Getting Started with Blazor WASM

Blazor WebAssembly (WASM) is a great way to write a web app (or even a desktop app! More on that later...). You get all of the benefits and productivity of using ASP.NET, C#, and WASM all in one! Of course, there are drawbacks, but that is a discussion for another time. Let's get started!

Get the .NET SDK

First you will need to install the .NET SDK. In this article I'm using .NET 7.0, the latest version should be fine. You can download the SDK here: dotnet.microsoft.com/en-us/download.

Create the project

In your terminal navigate to where you want to create the project and run this command:

~$ dotnet new blazorwasm -o BlazorApp

This command creates a new project in a subfolder named BlazorApp. Navigate into it and take a look around:

~$ cd BlazorApp

Explore the project

That created about a dozen files, let's go over a few.

• Program.cs is the entry point of the app and where you set up all of your services and middleware.

• App.razor is the root of the app.

• The Pages directory is where all of the pages go.

• BlazorApp.csproj is the project file which contains dependencies and the app definition.

Run the project

In your terminal run this command to start the project:

~$ dotnet run

After it builds the project will start and give you a message like Now listening on http://localhost:5180, open that URL in your browser to check out what comes in the box.

Next

Now that you have your project set up you probably want to make some changes and build your own components. For now, check out what's already in each page for some examples and try changing things around. Once you're done checking things out for yourself, check out my next article where we take a look at how to create your own components