How to deploy Blazor Webassembly App as Static website on Azure ?


As you know that doing deployment as static web site on GitHub, Azure, AWS and Google Cloud is totally free. We don’t have to pay any money for it.

If we have created some demo or portfolio project using Blazor wasm and need to share with someone. we can take benefit of this service. It is totally free.

In this demo, I am going to show, one of the easiest approaches using Azure Static Web App.

Step 1: Created the Blazor web assembly app using dotnet cli command like this

dotnet new blazorwasm -n WasmTest -o app

>> In the above command, I am creating Blazor Web assembly application in app folder

Step 2: Push the code on GitHub Repo.

Step 3: Go to Azure portal and create the Static Web App like this

Step 4: Fill the mandatory field like this

Step 5: Click on Review and created button.

Step 6: Go to your resource and click on the generated URL

Now you will see your website like this

It will also create CI/CD pipeline for us on Github.

Summary: In this above demo, we saw that without writing any code, we are able to deploy our static website on Azure portal. It very simple and straight forward process.

Hey, thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.

Advertisement

How to deploy BlazorHero App to Azure ?


Blazor Hero is good open source project for learning the Blazor concept, Even though you can customize and use on your project.

https://github.com/blazorhero/CleanArchitecture

Recently I got a chance to deploy this application on Azure, So I m writing step by step note on this.

If you are using visual studio deployment wizard, it is very simple to do it. I hope you have already created profile on Azure portal

There are the following Steps:

>> Clone the BlazorHero from github then clean and re-build the application

>> Go to the LocalizationConstants.cs file comment the given below

Note: Currently Azure is not supporting this country culture code.

  • Go to visual studio build >> publish server
  • Select azure like this

Click on Next button

Click on Create

Step 6: Configure the Sql server like this

Now Click on Publish Button

You will able to see the running application on Azure Cloud like this

Summary:

In this post we saw the magic of visual studio 2022 deployment wizard tool. We saw that without going azure portal, we are able to deploy the Blazor Application on azure cloud.

Azure AD Authentication on Blazor WebAssembly


Implementing Azure AD Authentication In Blazor web assembly is very much similar to Blazor Server.

Please read the below post to know more details about azure portal configuration for Blazor Server

Step 1: Register the single page application on azure portal like this
Note: donot forget to append localhost URL with authentication/login-callback

Step 2: Select the Access Token and Id Token like this

Now create the Blazor Webassembly project with Microsoft Identity Platform

Now it will install, all the Authentication related nuget package and boilerplate code for us.

Step 3: Go to appsettings.json file and keep the TenantId and ClientId here.

Step 4: Now run the application, It will work as expected.

Azure AD authentication on Blazor Server


Recently I have used Azure AD(Active Directive) authentication on my Blazor project, So I am writing small post on this topic.

As you know Azure Active Directory (Azure AD) is a cloud-based identity and access management service. It is very simple and easy to integrate in Blazor Application.

Step1: Create the Blazor server application like this

Step2: Select the Authentication Type as “Microsoft Identity Platform”

Step 3: Now go to Azure portal and click on Active Directory

Step4: Click on Add and App registration link then you will see the page like this

Step 5: Click on Register and pick the client and tenant Id

Step 6: Go to Authentication then select the Id taken and Access Token and save it, like this image

Step 7: Go to appsettings.json file and file the required input like this

Note: you will get the Domain Name from here

Now run the application, It will work.

The subscription is not registered to use namespace ‘Microsoft.AzureActiveDirectory’


Today I was creating the Azure active directive B2C for my Blazor application. I was getting below exception

The subscription is not registered to use namespace ‘Microsoft.AzureActiveDirectory’

Error message is straight forward, so we need to create the subscription for Microsoft.AzureActiveDirectory

There are the following steps to create Subscriptios

Step 1: Go to home page of azure portal and select subscription

Step 2: Click on Free Trial

Step 3: Click on resource provider and select provider which one you want to register. In the below image I have Registered the Microsoft.AzureActiveDirectory

I hope this will help to some one who is getting this type of exception.