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 modal 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 current stable version of .Net Core (3.1) and project template to create Blazor Server application is released with Visual Studio 2019 16.4.

  2. WebAssembly
    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 preview version of .Net Core.

Blazor Project Templates

 
As mentioned above, the project template to create 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 Blazor Webassembly project you will have to execute following command in 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 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.
 
Blazor Project Templates Explained 
 
Step 2
 
On the Create a new project window, enter or type Blazor in the search box. It will show Blazor App project on top, click on that and then click Next as shown in the below. screenshot.
 
Blazor Project Templates Explained 
 
Step 3
 
Next you will get the below screen, mention the name of project and solution, their path, and click on Create as highlighted.
 
Blazor Project Templates Explained 
 
Step 4
 
Next you will get 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 Create button.
 
Blazor Project Templates Explained 
 
Step 5
 
You will get a project with following structure,
 
Blazor Project Templates Explained 
 
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 Blazor application using this template are the same as Blazor.Server but at the template selection step you will have to choose Blazor.Webassembly as shown in the below image,
 
Blazor Project Templates Explained 
 
The Project structure of Blazor.WebAssembly is shown as below,
 
Blazor Project Templates Explained 
 
And the Output on execution will be as follows,
 
Blazor Project Templates Explained 
 

Blazor.Webassembly Hosted

 
This project template supports Blazor.WebAssembly execution model defined earlier, however it 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 a 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 Model class used to transfer data from client to server.
The steps to create 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 showed in the below image,
 
Blazor Project Templates Explained 
 
Project structure of Blazor.WebAssembly Hosted project is shown as below,
 
Blazor Project Templates Explained 
 
And output on execution of this template will be same as Blazor.WebAssembly as shown below.
 
Blazor Project Templates Explained 
 
You might have noticed that the output of all the project types is the same. That's because Blazor used 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.