Angular on Azure Functions

It’s possible to host static websites on Azure Storage, and Azure Function have the HTTP triggers. When combined you have the fundamental components required to host an Angular app with backend REST API for minimal hosting costs when PowerApps don’t quite cut it.

The Azure Function will become the public facing “web site”, and proxy requests for the Angular app to a storage account BLOB container.

To achieve this, create a BLOB container with a Public Access Level of “Blob (anonymous read access for blobs only)” inside an Azure Storage Account. This can be the same storage account that the Function App uses for storage as well.

In your Function App add proxies.json with the following content.

{
  "$schema": "http://json.schemastore.org/proxies",
  "proxies": {
    "root": {
      "matchCondition": {
        "methods": [ "GET" ],
        "route": "/"
      },
      "backendUri": "https://<account>.blob.core.windows.net/app/index.html"
    },
    "rootFiles": {
      "matchCondition": {
        "methods": [ "GET" ],
        "route": "{file}.{ext}"
      },
      "backendUri": "https://<account>.blob.core.windows.net/app/{file}.{ext}"
    },
    "assets": {
      "matchCondition": {
        "methods": [ "GET" ],
        "route": "/assets/{*file}"
      },
      "backendUri": "https://<account>.blob.core.windows.net/app/assets/{file}"
    }
  }
}

Substitute the backendUri values to those that match your Storage Account and BLOB Container. Once done copy your built Angular App into the container. This configuration covers a standard angular build, but will require modification if you have additional directories to “assets”.

Authentication can be applied at the Function App level, which I’ll go through in another post. Azure Active Directory, Facebook, Twitter, Google and Microsoft personal accounts can also be used quite easily.