Pre-requisite:- Azure
Ever hosted a static website like a blog or a simple information website, That can be a hassle and expensive, Blazor is a cool, new feature of ASP.NET that allows you to build interactive web UIs using C# instead of JavaScript. And you can run your client-side C# code directly in the browser, using Web Assembly which is a standard that is supported by all modern, major browsers.
Here Using the Static Websites feature, we will create a client-side Blazor web application and host it in Azure Storage.
Developing the Blazor App
First, we will develop the Blazor app. We will use Visual Studio Code 2019 to accomplish that. Use the following command on the command line to obtain the Blazor templates:
- .NET Core 7.0 SDK (Current version)
- Executing the following command from the command line will yield the Blazor templates.
- With the latest Blazor (extension from the Visual Studio Marketplace and the ASP.NET and web development workloads selected, Visual Studio 2019
- A subscription to Azure (If you don’t already have one, open a new window and sign up for one for free before you start).
Step 1: Start with Visual Studio 2019 and make a New Project. Be with, ASP.NET Core Web Application (Better option).
Step 2: Provide it a name and Choose a template. Blazor (client-side), as depicted in the following illustration
Step 3: Press “Create”. Currently, a client-side Blazor application ought to exist. Check out the solution explorer to see it. It will seem as follows
You can see an example of how to use Blazor with the UI if you open the Counter. razor page. You can have the UI trigger C# techniques and do anything you desire, similar to increasing an int.
Note: Pressing F5 will launch the application locally. That moves quickly. By setting a breakpoint in the C# code, you can also debug it.
Step 4: Publish the files necessary to run the Blazor app in order to be able to host it. And, In Visual Studio, this is simple.
- Right-click the Blazor project and select Publish.
- Select a folder as the publish target.
- Click Publish. Enter the folder.
- To operate the website, we require its contents. It ought to appear as follows:
Step 5: Now that we have a functioning Static Web App, we can run it in Azure. To do this, create an Azure Storage Account and enable the static website feature.
- In Azure Storage, we will operate it as a static website. It is very inexpensive, dependable, and efficient to run the app there.
- First, let’s set up a brand-new Azure Storage account.
- Navigate to the Azure portal, select Storage account, and then click the Create a resource button (the plus sign in the upper left corner).
- Select an Azure subscription or Resource group to open the Create storage account blade
- Enter a name. Make sure the account is a StorageV2 account. Click Review + Create.
Make a brand-new Azure Storage Account:-
- Once the storage account has been created, its static website feature can be enabled.
- Navigate to the Azure storage account in the Azure portal, select the Static website menu item, and then click the Enable button.
- When we go to the website, this will be the default file we use.
- Click Save to activate the setting
This Azure Storage Account is now able to host a static website. Copy the URL of the Primary endpoint that you notice. We access the website by entering that URL.
Test the website
Now we need to test the website after Copying the Blazor App to Azure Storage.
Only one more thing needs to be done: the Blazor application’s files should be copied into the Azure Storage Account. We will do that utilizing the Azure Storage Explorer
- Navigate to the Azure storage account that we have created.
- Drill down into Blob Storage
- The static website feature looks for files in the $web container that it created.
- Open the Azure Storage Explorer and ensure that you are signed into your Azure account.
- Open an explorer window to the dist folder of the published Blazor app by clicking on the $web container now.
- Drag the contents of the dist folder onto the storage explorer by selecting them. The files will be uploaded automatically into the web container.
Now, paste the Azure Storage static website’s Primary endpoint URL into a browser. We’re off. A static Azure-based Blazor website!
Conclusion
A very amazing feature of ASP.NET Core is Blazor, which enables you to develop web UIs using C# rather than JavaScript. That is finally what many.NET developers have been waiting for a very long time.
And once you’ve built a website with Blazor, there is nothing easier than hosting it in Azure Storage as a static website. It is affordable and quite easy to use. It is also very dependable because Azure Storage guarantees that you never lose data and is highly available by default. Additionally, due to the speed of Azure Storage and Blazor, your website will be very quick.