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:
- 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.
- WebAssembly : In this hosting modal client-side in the browser on WebAssembly. 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)
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2
After executing this command you will get following three project templates:
Blazor.Server : Blazor application created using this template supports Blazor.Server execution model defined above, the steps to create Blazor application using this template are :
Step-1 : Open Visual Studio 2019 to see following start screen and then click on "Create New Project" as highlighted in screenshot.
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 below screenshot.
Step-3: Next you will get below screen, mention the name of project,Solution their path and click on Create as highlighted.
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.
Step-5: You will get Project with following structure:
Step-6: On executing the application you will get following output :
Blazor.Webassembly: Blazor application created using this template supports Blazor.WebAssembly execution model defined earlier, the steps to create Blazor application using this template are same as Blazor.Server but at template selection step you will have to choose Blazor.Webassembly like show in below image :
The Project structure of Blazor.WebAssembly is shown as below:
And 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:
- ProjectName.Client: This is a .NET Standard type project containing all the client side code of the application including the static resources.
- ProjectName.Server: This is a ASP.NET Core Web API project containing the server side API controller code of the application.
- 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 same as Blazor.Server but at template selection step you will have to choose Blazor.Webassembly and ASP.Net Hosted option as showed in below image :
Project structure of Blazor.WebAssembly Hosted project is shown as below:
And output on execution of this template will be same as Blazor.WebAssembly as shown below.
You might have noticed that the output of all the project types is same, That's because Blazor used ASP.NET Core Razor Components Library for creating UI components in both Server and WASM based models. This increase the code reuse and 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.
