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:
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:
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.