Create a Blazor WebAssembly project

🟥 Not applicable to Blazor Server

Welcome to our tutorial on creating a Blazor WebAssembly project! In this tutorial, we will walk you through the process of setting up and building a simple Blazor WebAssembly application from scratch. By the end of this tutorial, you will have a solid understanding of how to use Blazor WebAssembly and the tools necessary to start building your own applications. We will be using Visual Studio, a popular development environment for .NET, to create and build our project.

• Set up the local machine.
• Project templates and options.

Set up the local machine

To create a Blazor WebAssembly project, you need:

• .NET 7 Runtime.
• Visual Studio 2022.
• ASP.NET and web development.

Once you installed Visual Studio 2022, run Visual Studio Installer and click Modify.

Tick ASP.NET and web development.

Switch to tab Individual components and select .NET 7 Runtime.

Project templates and options

When creating a new project in Visual Studio, you will be presented with a variety of templates to choose from, including official templates provided by Microsoft and third-party templates for Blazor WebAssembly.

The two official templates provided by Microsoft for Blazor WebAssembly are:

• Blazor WebAssembly App: This template provides a pre-built navigation bar and Bootstrap 5, which can be useful for quickly getting started with a new project.

• Blazor WebAssembly App Empty: This template provides a blank slate, with no pre-built code or libraries. This can be useful if you prefer to build your own navigation bar or use a different CSS framework.

When selecting a template, keep in mind that using a third-party template might prevent you from debugging the project. Follow the following steps to create a new project:

1. Start your Visual Studio, select Create a new project.

2. A list of templates will appear, you need to select one of the template: Blazor WebAssembly App or Blazor WebAssembly App Empty.

3. Select the options for your project.

After selecting a template, you will have the option to configure your project with the following options:

• Framework: Allows you to choose the target framework of the project.

• Authentication type (only available for Blazor WebAssembly App template): Allows you to generate code for authentication. It is recommended to leave it as None and build the authentication functionality yourself as the generated code may not meet all your needs for a basic project.

• Configure for HTTPS: Allows you to add a profile named https. If the ASP.NET Core Hosted is also selected, it will redirect HTTP to HTTPS for server, which is recommended for security in production.

• ASP.NET Core Hosted: Allows you to create multiple projects (1 for the server, 1 for the client, and 1 for shared). If you have an existing API, it is recommended to not select this option.

• Progressive Web Application: Allows you to add a service worker to the project, which can improve the offline functionality of the app.

• Do not use top-level statements (only available for Blazor WebAssembly App template): Allows you to use the old syntax for the project, it is recommended to not use this option to adapt the latest syntax of C#.

It is important to keep in mind that many options can be implemented manually at a later stage in a project, and it is not necessary to stress about selecting them at the beginning. It is often more effective to start with a minimal set of options and gradually add more as needed. This allows for flexibility and adaptability throughout the project.