As discussed in one of the past articles, there are multiple types of Blazor project templates. In previous article, we have had an introduction to the Blazor Server App. We created the app and checked how the project is structured. In this article, we are going to create a Blazor WebAssembly project.

Create Blazor WebAssembly Project

Let’s open the Visual Studio and search for Blazor projects. You should multiple options in the search results. Select the Blazor WebAssembly App option (the one which is highlighted in the image given below). Then let’s click on Next to proceed.

On the next screen in wizard, project name, its location and solution name can be entered. We can proceed to the next step in the wizard.

The next screen is interesting. There are multiple options. If you have been working with .NET Core web apps since long, then some of these options must be known to you.

• Target Framework, the framework version for the project. Let’s set it to .NET 7
• Authentication Type, let’s set it to None.
• Configure for HTTPS, this should be selected to enable communication over HTTPS.
• There are two next checkboxes, ASP .NET Core Hosted and Progressive Web Application. We will discuss about these two checkboxes in the next paragraph.
• Then the last checkbox is to specify if you want top level statements in the project. I generally do not like top level statements in web application projects and hence I am selecting it.

Option – ASP .NET Core Hosted

Now, let’s talk about what ASP .NET Core Hosted checkbox means. Frankly speaking, it was not very intuitive (for at least me) to understand what does it mean.

So, what did I do? I created WebAssembly App projects two times – first time, this checkbox was enabled and second time, it was not.

When this checkbox is enabled it created 3 different projects :

• Client project, which is actually a WebAssembly App, which will be executed in the browser.
• Server project, which is supposed to be hosted on server side (I mean, obviously) and it is also supposed to serve to the files.
• Shared project, which may contain the classes which are shared between Client and Server projects. e.g. POCO classes which are used as contracts in APIs.

This type of WebAssembly app is called as Hosted app. And I am repeating, that it happens only if ASP .NET Core Hosted option is selected.

Then what happens when the checkbox is not selected ? When this option is not selected, it creates a single project – which is basically the WebAssembly App which is going to execute in the browser. This type of application is called as Standalone app.

Option – Progressive Web Application

From the documentation, A Blazor Progressive Web Application (PWA) is a single-page application (SPA) that uses modern browser APIs and capabilities to behave like a desktop app.

So, for example, it can run offline, it may open in its own window, it may automatically update in the background, or it may also receive push notifications.

We will have a look at this option in detail, but in some other future post.

Overview of the code

Let’s have a very high level overview of what kind of code we can see in WebAssembly project.

If you have opted for Hosted app, there would be a project which is suffixed with .Server and the code inside it is almost similar to Blazor Server App (almost). It has API controller and some razor pages. This Server app does not configure server side Blazor. Instead it uses UseBlazorFrameworkFiles to serve WebAssembly files.

Also, it configures a middleware, only if the application is running in the development environment. The UseWebAssemblyDebugging call configures middlewares which is needed for debugging WebAssembly application in chromimum dev tools.

As we already have mentioned before, the .Shared project is supposed to contain classes which can be used in both Server as well as Client. The template basically keeps the output type of Weather Forecast GET API in the Shared project.

Now, let’s have a look at the Client project. Also, you have not opted for ASP .NET Core Hosting (i.e. Hosted App), then you would only get a single project which will contain the same code as in Client project of Hosted App.

The code snippet given below shows the contents of Main method. This WebAssemblyHostBuilder is used to create the host builder. Then there are some basic services added to the container. And then the application is built and started. Note that the type involved here is not WebApplication, but it is WebAssemblyHost.

The remaining code is basically some razor files. The code in those files is same as in Blazor Server app.

If you are using Standalone app, then the FetchData razor file, does not make call to API. Instead it just reads the data from the JSON file. If you are using Hosted app, FetchData razor file, would make call to the API.

Run and Verify

If you have created a Hosted App, you can run the .Server application. Otherwise there would be a single project in your solution, so we can run that project. If we open the network tab from dev tools, we can see that the application has requested for many .dll files.

So, basically, when a Blazor WebAssembly app is built and it is executed in the browser:

• C# code files and Razor files are compiled into .NET assemblies
• The assemblies and the .NET runtime are downloaded to the browser.
• Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

That’s why these DLLs are downloaded in the browser and that’s how the .NET code runs in the browser.

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