Angular on Azure Functions – Serverless Hosting

It’s possible to host basic Angular applications together with their backend API, using a combination of Azure Functions and Azure Storage. Azure Storage can host static web content for the frontend, and Azure Functions have HTTP triggers for the backend. To tie it neatly together with a bow, using Azure Functions proxy configuration allows all of it to be accessible through a single URL.

This provides the fundamental components required to host an Angular app with a backend REST API, for minimal hosting costs, when PowerApps don’t quite cut it for your requirements.

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://.blob.core.windows.net/app/index.html"
    },
    "rootFiles": {
      "matchCondition": {
        "methods": [ "GET" ],
        "route": "{file}.{ext}"
      },
      "backendUri": "https://.blob.core.windows.net/app/{file}.{ext}"
    },
    "assets": {
      "matchCondition": {
        "methods": [ "GET" ],
        "route": "/assets/{*file}"
      },
      "backendUri": "https://.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.