A Website Without Servers – Using Azure Functions: Part 8

by 

| December 7, 2017 | in

Azure Functions fit a nice slot: for times when you don’t want to deploy much but want a little bit of logic in the cloud. There’s another feature that really gives Azure Functions some legs: you can proxy request to blob storage. This might not seem like a big deal, but it is a game changer.

Why? Well, with this you can put your entire web application into an Azure Function. That means you don’t need any other hosting; your fancy dancy Angular site with backend can easily be 100% hosted with Azure Functions. Just use the proxy to host your Angular website and it can make AJAX calls to your Azure Function backend.

So how do you do this? Follow along.

1. Run this CLI command to build the Angular website:

ng build

2. Upload the output into “dist” folder of Azure Blob storage. You can do this with Microsoft Azure Storage Explorer.

azure functions

3. Now we must set up the proxy. While we would typically go into the Azure Portal and configure proxies for our Azure Function application, we won’t do that here. Instead, we are going to use a proxies.json file within Visual Studio.

4. The proxies.json has a pretty easy format. We just update it with each item we want to proxy. All we need to know is the blob storage URL for each of the files we uploaded in step 2.

5. Republish the application. Now we have a website running with a backend in Azure Functions and the frontend hosted from Azure Functions too.