Reviewing the Blazor WebAssembly Project Template

Learn about creating a Blazor WebAssembly project, highlighting project structure, deployment choices, and code similarities and differences with Blazor Server.

We'll cover the following

Creating Blazor WebAssembly project

Now we will create a Blazor WebAssembly project.

Step 1: Use the preferred code editor to open the PracticalApps solution or workspace and then add a new project, as defined in the following list:

  • Project template: Blazor WebAssembly App or blazorwasm

  • Project file and folder: Northwind.BlazorWasm

  • dotnet new switches: --pwa --hosted

  • Workspace/solution file and folder: PracticalApps

  • Authentication Type: None

  • Configure for HTTPS: Checked

  • ASP.NET Core hosted: Checked

  • Progressive Web Application: Checked

While reviewing the generated folders and files, note that three projects are generated, as described in the following list:

  • Northwind.BlazorWasm.Client is a Blazor WebAssembly project stored in the Northwind.BlazorWasm\Client folder.

  • Northwind.BlazorWasm.Server is an ASP.NET Core project website stored in the Northwind.BlazorWasm\Server folder. It hosts the weather service with the same implementation for returning random weather forecasts as before but is implemented as a proper Web API controller class. The project file has project references to Shared and Client, and a package reference to support Blazor WebAssembly on the server side.

  • Northwind.BlazorWasm.Shared is a class library stored in the Northwind.BlazorWasm\Shared folder that contains models for the weather service.

The folder structure is simplified, using only the short names like Client, Server, and Shared rather than the full project names, as shown in the figure:

Get hands-on with 1400+ tech skills courses.