How To Host an Angular Static Website on Azure
A step by step guide with an example project
--
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 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.
Prerequisites
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…
