Monday, March 29, 2021

How to host static website in azure storage

You can serve static content (HTML, CSS, JavaScript, and image files) directly from a storage container named $web. Hosting your content in Azure Storage enables you to use serverless architectures that include Azure Functions and other Platform as a service (PaaS) services. Azure Storage static website hosting is a great option in cases where you don't require a web server to render content.



How to host static web app in storage account

To host static web app in azure storage account, need to do

1.       Create Static Web App (Blazor App)

2.       Host Static Web App in Storage Account(djblogs)

Create Static Web App

Static web apps are commonly built using libraries and frameworks like Angular, React, Vue, or Blazor where server-side rendering is not required. If you want to learn more about static web app. Please read my previous post Whatis Azure Static Web Apps? In this demo I am creating Blazor App will host it in storage account.

We need to below steps to create Blazor App.

1.       Need to create Blazor App with help of Visual Studio 2019 by choosing option Blazor Web Assembly like below

 


2.       Create project with name DJBlogs.AzureCDN. It will create default template  project for Blazor app.  

3.       In this default template demo I had written code to get client machine details with help of browser and HTTP request. Like below

IP: xxx. xxx. xxx. xxx

City: Airoli

Region: State of Mahārāshtra

Country: IN


4.       If I run the above code it will display like


Download code from GitHub: https://github.com/deepakjoshiinfo/DJBlog.AzureCDN

Host Static Web App in Storage Account

We need to follow below steps to host static web app in storage account.

1.       Go to azure portal https://portal.azure.com

2.       Once we login in portal then create new StorageV2 (general purpose v2) type storage account. Which had option to host static web app. 

3.       In this demo I am using already created storage account djblogs. If you want to learn more about storage account(djblogs) in details please read my  previous blogs on AzureStorage Account


4.       Once Storage account created with name djblogs then need to enabled static website option. It will automatically create Primary endpoint which will be the URL for our static web app.

URL: https://djblogs.z19.web.core.windows.net

5.       Now we will publish the code in development machine folder

Path: C:\Temp\AzureCDN


6.       Once our code is published in development folder then we will copy all files and folder inside “wwwroot” folder with help for Azure Storage Explorer like below

7.       Once our published code copied inside $web blob container folder. Our static site URL will start working

URL: https://djblogs.z19.web.core.windows.net

Hope it will help you to host static web app in storage account which is cheap service provided by azure.

Keep sharing keep learning.  Cheers

No comments:

Post a Comment