Sharing Top Content from the Angular-sphere.

Serving SPA using Azure Functions Proxy

  • 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 a container is created, you should upload your SPA files.
  • 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).
  • 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.

You have your Single Page Application and you don’t know how to serve it cheaply? You can deal with it using Azure Functions Proxy!

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!

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.

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…

Serving SPA using Azure Functions Proxy