Blazor Project Templates Explained

Blazor Introduction

Blazor is a free and open-source web framework developed by Microsoft, that enables developers to create web apps based on Single Page Application architecture using C# and HTML.

Blazor hosting models

Currently, there are two ways to host Blazor applications,

1. Server-side: In this hosting model the application is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection. This execution modal is available with the current stable version of .Net Core (3.1) and the project template to create the Blazor Server application is released with Visual Studio 2019 16.4.
2. Web assembly: In this hosting modal the application is executed client-side in the browser. The Blazor app, its dependencies, and the .NET run-time are downloaded to the browser. The app is executed directly on the browser UI thread. UI updates and event handling occur within the same process. This execution modal is available with a preview version of .Net Core.

Blazor project templates

As mentioned above, the project template to create the Blazor Server project is by default available with Visual Studio 2019 16.3 and above versions. To create a Blazor Server project open Visual Studio but if you want to create a Blazor Webassembly project you will have to execute the following command in the command prompt (or terminal window if you are on Mac)

dotnetnew -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2

After executing this command you will get the following three project templates,

Blazor.Server

Blazor applications created using this template support Blazor.Server execution model defined above, the steps to create a Blazor application using this template are,

Step 1. Open Visual Studio 2019 to see the following start screen and then click on "Create New Project" as highlighted in the screenshot.

Step 2. On the Create a new project window, enter or type Blazor in the search box. It will show the Blazor App project on top, click on that and then click Next as shown below. screenshot.

Step 3. Next, you will get the below screen, mention the name of the project and solution, their path, and click on Create as highlighted.

Step 4. Next, you will get a project template selection screen where you will see the Blazor. Server as an option ( and Blazor WebAssembly if you are following these steps after executing the command mentioned above). Select Blazor Server and click on the Create button.

Step 5. You will get a project with the following structure.

Step 6. On executing the application you will get the following output

Blazor.Webassembly

Blazor applications created using this template support Blazor.WebAssembly execution model defined earlier, and the steps to create a Blazor application using this template are the same as Blazor.Server but at the template selection step you will have to choose Blazor.Webassembly is shown in the below image.

The Project Structure of Blazor.WebAssembly is shown below.

The Output on execution will be as follows.

Blazor.webassembly hosted

This project template supports Blazor.WebAssembly execution model defined earlier, however, provides more structure to the application code by creating three different projects,

1. ProjectName.Client: This is a .NET Standard type project containing all the client-side code of the application including the static resources.
2. ProjectName.Server: This is an ASP.NET Core Web API project containing the server-side API controller code of the application.
3. ProjectName.Shared: This also is a .NET Standard project containing a Model class used to transfer data from client to server.

The steps to create a Blazor application using this template are the same as Blazor.Server but at the template selection step you will have to choose Blazor.Webassembly and ASP.Net Hosted option as shown in the below image.

Project structure of Blazor.WebAssembly Hosted project is shown below

And output on execution of this template will be the same as Blazor.WebAssembly is shown below.

You might have noticed that the output of all the project types is the same. That's because Blazor used the ASP.NET Core Razor Components Library for creating UI components in both Server and WASM-based models. This increases the code reuse and allows for better code maintenance.

In this blog, we understood about different types of Blazor Project Templates available with .Net Core and how we can create Blazor projects using these templates in Visual Studio 2019.