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.
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.
After a container is created, you should upload your SPA files.
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:
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:
As you can see below, Azure Functions Proxy serves my website correctly:
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.