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 Blog 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 blog 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

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

Hope you like it.

Cheers.

Comments