Blazor Server is a pretty nice ASP.NET framework that comes in two flavors, Blazor WebAssembly and Blazor Server. Blazor Server is great for internal company projects, since it's a 100% server-side framework that can easily access any APIs or databases that your company has!

Today, we'll be looking at how to quickly get a Blazor Server application up and running as an Azure Web App.

Azure App Service Setup

First, if you don't already have an Azure tenant, you'll need to set one up by following this link: https://portal.azure.com/

After your tenant is created, you should be taken to a quickstart screen, where you can select Create a new webapp, as shown below.

In this example, I chose creating a webapp without a database that is on the next page, but you can choose whatever will fit your needs. Any database setup will not be covered in this tutorial, however.

On the next screen, you'll need to fill out some basic information about the app itself. Note that the region and plans may be different depending on whether you have a specific pricing plan. For my purposes, I'm only using the free tier provided on the East US region.

You'll be taken to the App Service's home page, where you'll need to navigate to the Configuration tab on the left. In this tab, there will be an Application Settings tab that will allow you to set connection strings and environment variables. I don't have it shown here, but I set up an environment variable for to distinguish between Development/Production. This is automatically set in VS2022 as ASPNETCORE_ENVIRONMENT, so I added that environment variable with the value of Production and saved it. After this, you should navigate to the General Settings top tab.

In these settings, double check to make sure the stack and .NET version is correct (.NET 7 in our case), and make sure that the "Web Sockets" setting is turned on, then click save. Blazor Server uses websockets to communicate with the user's browser, and all data and state changes are sent back and forth via these websockets.

With this, we're done with our App Service setup, and can move next into setting up a registration that will allow us to add Active Directory authentication.

Azure App Registration Setup

The Azure App Registration is what will handle the application's authentication, via Azure AD for us. In the search bar at the top of your Azure Portal, go ahead and search for "App registration", it should be the first link to come up. You should come to a page like this:

Afterwards, you'll come to the screen in the next photo. You'll need to fill out a name, and we only allow a single tenant Azure AD, though you could allow multiple if needed. We won't be setting any redirect URIs, we'll get to that a bit later. Click register.

Next, you'll be taken to the App Registration's home page. From here, I've highlighted a few of the items we'll be altering. Let's start with the client secret, the top right highlighted item.

You'll need to create a new secret that your application will use to connect with Azure. Once it's created, grab and save the value and store it somewhere you can access it at a later time.

Now let's switch over to the application's Manifest tab. We'll need to set two properties to true, oauth2AllowIdTokenImplicitFlow, and oauth2AllowImplicitFlow. Mouthfuls, I know. I've highlighted where they are in the manifest. From the photo, change the values from false to true, and click the save button at the top left. These options allow us to more easily work with the Azure AD authentication in Blazor.