How To Host an Angular Static Website on Azure

A step by step guide with an example project

Bhargav Bachina
May 27 · 6 min read
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 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.

Sample Application

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 checkout this link

You can see the below dashboard once you create your account.

Azure Dashboard

Create a subscription

You need to create a subscription that’s how It serves as a single billing unit for Azure resources in that services used in Azure are billed to a subscription

Pay-As-You-Go subscription

Create a Storage Account

An Azure storage account contains all of your Azure Storage data objects: blobs, files, queues, tables, and disks. The storage account provides a unique namespace for your Azure Storage data that is accessible from anywhere in the world over HTTP or HTTPS. Let’s create a storage account under this subscription.

Storage Accounts

If you don’t have resource groups under subscription you need to create one. Resource groups are the ones that groups all your resources under the subscription. You can create multiple resource groups.

Create a Storage Account

Once you review and create you can see the following screens.

deployment is underway
deployment complete

Host Static Website With Azure Blob Storage

Now we have a subscription, resource groups, and storage accounts created on our Azure account. It’s time to build our app with this command npm run build. When you do that all the built assets can be found in the dist folder.

build

Now, go to your storage account on Azure and click on the static website on the left navigation and give the required index and error pages.

static website

Once you enabled Azure creates we container called $web in which you can upload all your build files as below and it creates the primary endpoint as well.

upload all your build files

Copy the primary endpoint and hit it in the browser once the upload is complete.

static website

If you want to create a folder and upload it into that folder you can do that by selecting advanced and name the folder. I named it my-profile here.

In this case, you have to build your Angular application with a deploy-url flag like this ng build --deploy-url /my-profile/


Deliver With Azure CDN

You can enable Azure Content Delivery Network (CDN) to cache content from a static website that is hosted in an Azure storage account that provides consistent low latencies to your website from anywhere in the world.

Let’s select an Azure CDN under blob service and give CDN endpoint name and you need to select your Azure blob storage URL as origin hostname. Make sure you remove protocol identifier https and trailing slash at the end.

Creating an Endpoint

If it’s successful you can see newly created endpoints under the Endpoints section.

Endpoints

You can see all the details about this endpoint when you click on it such as the resource group, location, subscription, endpoint, origin, etc.

Endpoint Details

After creating a CDN endpoint, it will not immediately be available for use, as it takes time for the registration to propagate through the CDN. You might get this following error page.

404 Page

Make sure you go through this troubleshooting page. If you set up everything correct wait for 10 minutes or so, it will start working.

Azure CDN

Summary

  • Azure CDN with blob storage is one of the options which provides low cost and highly reliable static website hosting solution.
  • You need to create an Azure account, subscription, resource groups, and storage account before you create static website hosting.
  • You need to create a subscription that’s how It serves as a single billing unit for Azure resources.
  • An Azure storage account contains all of your Azure Storage data objects: blobs, files, queues, tables, and disks.
  • Resource groups are the ones that groups all your resources under the subscription.
  • You can just upload all the built files to the $web container that storage account created for you when you enable a static website.
  • You can upload all the files into a folder as well. In that case, you have to build the app with a deploy-url flag.
  • You can set up an Azure CDN endpoint for your static website on the Azure blob storage.
  • After creating a CDN endpoint, it will not immediately be available for use, as it takes time for the registration to propagate through the CDN.
  • Here is the troubleshooting page if something goes wrong.
  • You can map to a custom domain as well if you have one.

Conclusion

Static website hosting on the Azure is pretty straight forward. Try this if you are building static web apps.

BB Tutorials & Thoughts

Tutorials Ranging from Beginner guides to Advanced | Never…

Sign up for BB Tutorials & Thoughts

By BB Tutorials & Thoughts

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

BB Tutorials & Thoughts

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

BB Tutorials & Thoughts

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store