/ Azure

Serving Angular App From Azure CDN

I've been using CDN for a long time, but it really never came to my mind to serve a whole client application using CDN. When I first heard about it I thought it was crazy, but then I started investigating to see how easy and feasible it was to achieve that.

Found a couple of sites here and there with step-by-step guides on how to use Azure CDN, including in the official documentation, but nothing as specific as I wanted. So started playing with it and I actually got to the other end. So here we go...

In this example, I'm gonna use a couple of things:

1. Create and Build our Angular App using the Cli

Open the console

ng new ngCDN
cd ngCDN
ng build
cd dist
explorer .

After running all these commands, Windows explorer (Yes, I'm using Windows here, if you're using another OS the last command might not work, just use your usual way to get to the file explorer and navigate to the folder you created the app) should be open and be showing all the files required for your Angular app to run in production.

Let's park this here for a sec while preparing the other side.

2. Copy Files to a Blob container in an Azure Storage Account

If you don't still have an Azure Storage Account, go to the Portal and follow the steps below:

Creating Storage Account

Open Azure Storage Explorer, navigate to your storage account and create a blob container by right-clicking on Blob Containers. In my case, I've created one called angular. Now drop the files you created in the first step here.

Azure Storage Explorer

One thing to make sure here is that the blob container is available publicly.
Public Read Access to Blob

3. Create CDN and Point to the Blob Container

Let's go to the Portal and create our CDN profile following these steps:

Creating CDN Profile

Once you have your CDN profile, it's time to create a new Endpoint to point to our just created blob container. Follow the steps below:

Creating Endpoint

4. Testing it

If everything went well, you should be able to access your Angular app via the URL: [Endpoint Name].azureedge.net/index.html

End result

Warning: Using CDN to server your Angular application is amazingly fast, but be warned that it will take from 2-7 minutes to refresh the cache across the globe. So I'd definitely advise against using CDN in a development environment where you're going to be updating the files constantly.

Hope you like it.


Buy me a coffeeBuy me a coffee
Thiago Passos

Thiago Passos

I'm Thiago Passos, a Solution Architect working for SSW sharing what I've been working with and learning. Love technology, dancing and I get unfriendly when I'm hungry.

Read More