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
- Host Static Website With Azure Blob Storage
- Deliver With Azure CDN
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
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.
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
- Microsoft Azure Account
- Create a subscription
- Create a Storage Account
You can see the below dashboard once you create your account.
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
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.
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.
Once you review and create you can see the following screens.
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.
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.
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.
Copy the primary endpoint and hit it in the browser once the upload is complete.
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.
If it’s successful you can see newly created endpoints under the Endpoints section.
You can see all the details about this endpoint when you click on it such as the resource group, location, subscription, endpoint, origin, etc.
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.
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 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.
Static website hosting on the Azure is pretty straight forward. Try this if you are building static web apps.