Deploying frontends to Azure

Nowadays, deploying frontends built with the most used frameworks (React, Angular) to AWS is quite an easy task due to the special features available in such a platform. It’s a matter of enabling static page hosting on a S3 bucket and…voilà, you are ready to go.

In less mature platforms such as Azure, this apparently easy task can get really tricky. Despite offering an easy way of deploying fronts (Using an Azure App), it ends up costing at least U$D 50 a month, way over the regular frontend hosting budget.

When needing to deploy an Angular project to Azure due to client requirements, we were forced to start looking for an AWS-like way of deploying our frontend to the Azure cloud platform. The answer was to use Blob Storage Containers, they are similar to S3 buckets and despite not having a Static Site Hosting option, there’s an easy way of using them for that.

Creating the Container

1. From the main portal, go to Create a Resource, then choose Storage and finally Storage Account. The storage kind should be Blob Storage.
2. In order to upload a website, you need to create a container. You can do so from the Containers section, remember to select Container in Public Access level so the content can be publicly accessed.

Uploading your site to the container

There are two main tools to upload your files: Azure Storage Explorer or AzCopy.

Azcopy allows you to sync your project’s build folder by running:

azcopy — recursive — source <build folder> — destination <blob url>/<container name> — dest-key <access key> — set-content-type text/html

Since Azure doesn’t automatically detect the appropriate Content-Type for each file, you will need to upload each file manually setting it’s correct Content-Type.

In order to speed up this process, you can use the following script which uploads all the files setting the correct Content-Type for the most commonly used files:

export BUILD_FOLDER= <build folder>
export CONTAINER_URL= <blob url>/<container name>
export ACCESS_KEY= <access key>
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type text/html — include “*.html” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/svg+xml — include “*.svg” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/jpeg — include “*.jpg” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/jpeg — include “*.jpeg” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/png — include “*.png” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type application/javascript — include “*.js*” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type text/css — include “*.css” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/x-icon — include “*.ico” — quiet

The access key can be obtained from Storage Accounts -> Access keys

Making your site accessible

This is the most important part of the process, since Azure doesn’t have a hosting option, we have to use a Function App to route it.

To create it go to Create a Resource -> Compute -> Function App, give it a name and leave the rest as default.

Then go to proxies, choose +, give it a name and set/ as Route Template.

After that, go to Proxies, Advanced Editor and edit the proxies.json file, changing its content for on the following gist.

https://gist.github.com/juanisierra/2660d1f4a80ba0593e598cab8e8f60fd

Replacing <blob url>/<container name> with your blob URL and container name.

This configuration works for React front-ends containing a static folder. For any other application, you will need to add a proxy object for each static assets folder present.

After that, you are ready to go!

Azure is expected to provide a specific function to allow this behavior without having to manually configure the routing but so far this is the easiest way of doing so.