In previous articles, we have covered various basic aspects of Blazor WebAssembly application. In this article, we are going to demonstrate how the Blazor WebAssembly app can be deployed in an Azure App Service.

What are various options for deploying Blazor Apps ?

There are two different types of Blazor applications – Blazor Server Apps and Blazor WebAssembly Apps. Blazor Server App’s deployment is served by ASP .NET Core web application and hence deployment strategy is majorly similar to similar any other ASP .NET Core web apps.

Blazor WebAssembly Apps are special types of applications. Blazor WebAssembly executes on the UI thread of the browser. All the code (actually assemblies), which is required for the application, is downloaded on the client machine.

This article is going to cover hosting of only WebAssemly applications. For hosting WebAssembly applications, there are two main options:

• First option is to have ASP .NET Core hosted option. That way, a Server app is created, which should be published. That application can serve the WebAssembly application. The Server app can then serve even more than one WebAssembly applications, if needed.
• Second option is to have a WebAssembly Standalone App. When the application is standlone, it does not have any logic to server the application itself. Hence, for deploying such application, Azure Static Web Apps.

In this article, we will have a look at first option. We will try to deploy the Hosted WebAssembly app to Azure App Service.

Create Hosted Blazor WebAssembly App

Let’s create a Blazor WebAssembly app. While creating the project, make sure you select the “ASP .NET Core Hosted” option. The solution should have three projects – Server, Client and Shared.

How does it work ?

The Server project needs to be published. When we publish the Server project, the output needs to be copied to the hosting server.

A hosted deployment serves the Blazor WebAssembly app to browsers from an ASP.NET Core app that runs on a web server. When the application needs to be published to IIS or Azure App Service (or any other web server which is capable of hosting ASP .NET Core web app), the hosted deployment mode should be selected.

As we know, the Server project (ASP .NET Core Web App) has a reference added to the Client (Blazor WebAssembly) project. So, when the Server project is published, the Blazor WebAssembly app is also copied in the publish output, in /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot folder. In this path, the {TARGET FRAMEWORK} is basically the framework version which was used for compiling the project. This folder also contains other static resources, used in the project.

How to deploy to Azure App Service ?

Now, let’s move to the Visual Studio and right click on the Server project and select option Publish from the context menu. It will open the wizard screen shown in the snapshot given below. Select Azure and click on Next.

On the following screen, select the option Azure App Service (Windows). Then click on Next.

On the next screen, we need to select the Azure Account that we want to use for publishing this web application. If you do not have the account, you can create a new Azure Account from the link provided on this screen. If you already have account then, you can click on Sign In and enter the appropriate credentials.

I am using preview version of Visual Studio in order to be able to use .NET 7 with Visual Studio. I was facing an issue. After entering credentials, the login popup was closing, but this publish wizard was not moving to the next screen. I had to restart the Visual Studio in order to fix this issue. Putting it here, so that if you face similar issue, you can also try restarting Visual Studio in order to be able to proceed further. And I hope this issue occurs only in preview version and stable version of Visual Studio would not have this issue.

On the following screen, we can select the subscription from the dropdown. The screen will also show if there are any app service instances, which are created under the selected subscription. Currently, I do not have any app service instance under the selected subscription.

So, I will select create new option.

On the new popup, we can enter some details:

• App Service instance name
• Resource Group Name
• Subscription Name
• Hosting Plan

Once these details are provided, click on Next.

Once all inputs are provided and all popups are closed, it would show the details , that we have entered on those popups. Click on Finish.

This click on Finish button should create a new publish profile in the project. It will not really publish anything as such. This click would open a new screen as shown below.

I generally prefer self-contained deployments. By default, Framework dependent deployment mode is selected. Here I would click on edit option and select self-contained option. This means that the package will contain all the assemblies from framework, which are needed to run the application.

Then click on Publish. It would build the application and would publish the outcome to the App Service.

Run and Verify

Now, we can browse the URL and see that the Blazor application download starts. We can see that first request would begin download of all the required assemblies. Once all assemblies are downloaded, the application would render the application screens as shown in the snapshot given below.

Wrapping Up

Having Blazor WebAssembly Hosted application would be a good option, if you want APIs and the client (i.e. Blazor WebAssembly app) to be part of the same deployment package. The Blazor WebAssembly app is downloaded to the browser and it runs on Browser UI thread and APIs run on the App Service.

I hope you find this information helpful. Let me know your thoughts.