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.

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.