How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

Introduction

In this article, I am going to explain how to create a Blazor WebAssembly project in ASP.NET Core MVC 7.0 application step by step and execute.

Read my previous articles, using the below links.

Prerequisites

  1. Install Visual Studio 2022 updated version 17.4.0
  2. Install .NET SDK 7.0

Creating Your First Blazor WebAssembly Application

1. Open Visual Studio 2022 and select Create a new project.

How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

2. In the Create a new project window, just type Blazor on search box and hit Enter, it shows all the Blazor app templates.

3. Select “Blazor WebAssembly App” project template and select Next button. 

How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

 

4. Define Project Name and Location

In the project configuration window you will see the following options,

  • Project Name
    Define any name for your project as per your choice. Here I have chosen project name as “BlazorAppWebAssembly”.
  • Location
    Choose the location to save the project files on your hard drive of the system. I have chosen the Project/VS folder of the E drive of the system.
  •  Solution Name
    Solution name is auto-defined based on the project name, but you can change the name based on your own choice. But I have not changed my solution name. Solution name and project name both are same.

Additionally, there is a checkbox, if you have checked it, then the solution file (.Soln) and project files will be saved in the same folder. As shown in the following image. Then click Next Button.

How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

5. Now, Select framework .NET 7.0(Standard Term Support). You can select the Authentication Type as None, Individual Account, Microsoft Identity platform, or windows. For the demo purpose, I am selecting none. Based on your project need and Authentication requirement you can select this option. You can select Configure for HTTPS based on your need.

If you need Docker in your project then Select Enable Docker.

Uncheck Do not use top-level statements.

Then click the create button.

How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

6. Our First Blazor WebAssembly application will be created and default project structure is shown below,

How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

7. Index.razor file

How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

8. The Project.cspoj file looks like below. Where you can see the target Framework net7.0, by default Nullanle and ImplicitUsings are enabled. 

How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

9. Program.cs file

How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

10. Now, build and run the application.

Output

How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

Conclusion

In this article, we explained how to create Blazor WebAssembly App in ASP.NET Core7.0. I hope this article is useful and easy to understand.


Similar Articles