How To Host an Angular Static Website on Azure
How To Host an Angular Static Website on Azure

A step by step guide with an example project

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.



git clone // clone the projectgit clone https://github.com/bbachi/my-profile.git // 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.
['Bhargav Bachina']
['Angular', 'Programming', 'Web Development', 'Azure', 'Cloud Computing']