Serving SPA using Azure Functions Proxy

Spread the love

Background

Recently I participated in Serverless Amsterdam Hackfest. Our project was divided into 2 parts: a frontend (SPA) and a backend. We wanted to serve our Single Page Application using Azure Functions. Our first idea had been to base our project on static file server, however it turned out that there was even easier way, which Dariusz Porowski(@DariuszPorowski) showed us. Let’s do this!

SPA in container

Firstly, you have to create an Azure Functions App that allows you configure a proxy and a storage account, where your SPA will be located.
Created resources

After the resources are ready to use you need only a complete SPA 😉 (I have an example that is written in React.). Later on, you can open your storage account in Storage Explorer. Then, you should create a new container and set “Public read access for blobs only” as a public access level.

Create container and set public access level

After a container is created, you should upload your SPA files.

Uploading spa files to a container

Subsequently, you should go to index.html properties and copy its uri.

Configure Azure Functions Proxy

After SPA is uploaded, you should open Function App, go to proxy configuration page and create a new one.
Then, first thing you need to do is create a proxy for index.html, so input values should be as follows:

Azure Functions Proxy settings for index.html

Of course backend URL should point to your index.html (uri that you copied in the previous point).
Secondly, you should configure how a routing inside your application will work (e.g. in my case to .js file with react). You have to create a new proxy and setup it as you need. Following example works for me:

Azure Functions Proxy settings for paths

As you can see below, Azure Functions Proxy serves my website correctly:

Website served by Azure Functions Proxy

Summary

There is a lot of “serverless” options that you can apply to your project. Thanks to this one, you don’t have to pay if you have a small traffic on your site. At the same time, you are prepared for a spike! It means that your site will be served to every visitors not matter if you have 100 or 1 million simultaneous visits.

Leave a Reply

Your email address will not be published. Required fields are marked *