Use static website hosting in Azure Storage to host an Angular application

What is Azure Blob Storage and static website hosting?

According to the official MS Docs (Introduction to Blob (object) storage - Azure Storage | Microsoft Docs) Blob storage is Microsoft’s cloud storage which can be used to store large volumes of unstructured data like images, audio, video and others.?

According to the official MS Docs (Static website hosting in Azure Storage | Microsoft Docs) you can serve static content directly from a storage container named?$web.??

But there are some limitations. If we want to configure headers, we must use Azure CDN. For more information on this topic I suggest you read the following MS Docs:

Using Azure CDN with CORS | Microsoft Docs

Integrate a static website with Azure CDN - Azure Storage | Microsoft Docs

The application can be viewed from a browser by accessing the public URL.

Creating the Angular application?

Let us now create an Angular application that we will deploy to Azure Blob storage static website. ?

We can create a new application by using the command below:?

ng new weather-app?        

For this demo, we won’t make any changes to the application and just deploy it with the default template and code provided.

Create a Storage account?

Next, let's create the Storage account that we will use for this demo.

Go to the Azure portal and search for 'Storage accounts'.

Now click on the '+ Create' button.?

Fill in the information similar to below:

Review the information, confirm and wait for the resource to be successfully deployed.

Enable static website hosting?

Now go to the previously created storage account and click on 'Static website' from the side menu:

Click on 'Enable'.

Set the value of ‘Index document name‘ (name of the webpage that Azure Storage returns when a request is made to the root of the website or any subfolder) to index.html. For now, you can leave the value of?‘Error document path’ (path of the 404 document which is displayed when Azure Storage returns a 404 error)?empty.

After all this is set up, we can see a $web container created in our Storage account.

Next, we need to build our Angular application by using the following command:

ng build        

We can see that a dist folder was created in the root directory after the command successfully executed.?

Now we can deploy these static files to our $web container.?

To do this, we can just upload all the files from the dist folder to the $web container.

After we finish, we can see our application by visiting the 'Primary endpoint' which we can see in the 'Static website' blade.

Perfect. We have successfully deployed our Angular application to Azure Storage static website.

Thanks for sticking to the end of another article from?"Iliev Talks Tech".?#ilievtalkstech

Next steps:

• Consume a batch of messages in an Azure Function from an Azure Service Bus
• Manage Feature Flags using Azure App Configuration