Serving Angular App From Azure Functions

Serving Angular App From Azure Functions

There must be some very specific scenarios where you would want to serve your Angular app via Azure Functions. To be very honest, I'm not even sure if there's such a scenario yet, but I'm up for the challenge. I'll show you how to implement it technically, whether it fits into your situation then it's another matter.

I've wrote a post almost a year ago going through the steps to serve an Angular app from Azure CDN and that post is still relevant, but I'll highlight some advantages of using functions.

But first, let's start with steps to get there:

1. Starting with a brand new Angular app using the CLI
> ng new my-app
> cd my-app
> ng serve
2. Create new function app

CreatingFunctionApp1

3. Create new blob container and make it public

For this step, I'm using the Azure Storage Explorer. Once you create the blob container, copy the URL to it.

CreatingBlogContainer

4. Build the Angular app and copy to the blob container

Now I've got to be careful here whether I'm going to serve my app in the root of my domain or in a virtual directory. This will change the way you're going to build your application. Either ng build --prod or ng build --prod --bh /angular/ where /angular/ is your virtual directory.

Uploading-to-blob

5. Create proxy to point to the new blob container

Small mistake here, instead of {rest}, it should be {*rest}

CreatingProxy

6. Create second proxy to override index.html

CreatingIndexProxy

Some key differences between serving your angular app via CDN and Azure Functions are:

  • CDN is globally distributed, so it's damn fast wherever you are
  • CDN does require several minutes to refresh cache once a new version is deployed, where Azure Functions does NOT.
  • It's quite simple using Azure Function to redirect your root directory to /index.html where this feature is not there for the basic version of CDN.
  • You can use your Function App to run some server side processes and host your entire API if you wish.

That's it. Hope it helps.

Do let me know if you end up using this for a production app. I'd be very keen to know.

Cheers.