How To Host an Angular Static Website on Azure

A step by step guide with an example project

Bhargav Bachina
Bachina Labs
Published in
6 min readMay 27, 2020


Photo by William Iven on Unsplash

There are a number of ways you can build a website with Angular such as Java with Angular, NodeJS with Angular, NGINX serving Angular, etc. For the single-page applications, all you need to do is to load the initial index.html. Once you load the index.html the Angular framework kicks in and do the rest of the job like loading component, calling API calls, etc. What if there are no backend calls and you want to build a static website with Angular?

Azure CDN with blob storage is one of the options which provides low cost and highly reliable static website hosting solution. These static sites have only CCS, HTML, JS files, fonts, etc. In this post, we can see how we can build a static website with Angular and host that on Azure.

  • Example Project
  • Prerequisites
  • Host Static Website With Azure Blob Storage
  • Deliver With Azure CDN
  • Summary
  • Conclusion

Example Project

Here is an example project which we can put in the Azure blob storage for static website hosting. This is a simple profile page with a header and some sections.

// clone the project
git clone
// install dependencies and start the project
npm install
npm start

You can clone the project and run it on your machine. Here is the demonstration when you run it on your localhost and the port 4200.

Sample Application


You should be familiar with Angular and how Angular builds stuff. If you are not familiar with Angular check out this link or go to their official website.

Once you install the necessary components and run the above project on your local machine. It’s time to create Microsoft Azure Account…