Building a website

In this series, you will learn how to build a simple website with Blazor WebAssembly. To make Blazor WebAssembly works, you will need a server. For the sake of simplification, we will simulate the result from the server in this tutorial series. The website is going to have the following features:

• Show a list of product and a buy button.
• Allow users to put product to cart.
• Allow users to review their cart.
• Collect users information to make a delivery.

In this tutorial, you will learn:

• Prerequisite.
• Create a Blazor WebAssembly .NET 6 project.
• Remove boilerplate code.

You can download the example code used in this topic on GitHub.

Prerequisite

First thing first, you need to have the following software and knowledge to developing Blazor WebAssembly websites.

Software:

1. Visual Studio 2022 Current.
2. .NET 6 Runtime.
3. ASP.NET and Web development.

Do not install .NET 6 Runtime and ASP.NET and Web development from outside Visual Studio Installer.

Run Visual Studio Installer from your machine, Modify your Visual Studio 2022 Current.

Select .NET 6 Runtime and ASP.NET and Web development.

Knowledge:

1. HTML.
2. CSS.
3. JavaScript (optional).

Create a Blazor WebAssembly .NET 6 project

Start your Visual Studio, select Create a new project.

Remove boilerplate code

When you create a new Blazor WebAssembly project, there will be a default template with the boilerplate code, you will need to remove those boilerplate codes in order to continue development. The following image indicates the file that you need to remove:

After that, open NavMenu.razor to remove the link on the menu as well.

....
<div class="nav-item px-3">
    <NavLink class="nav-link" href="counter">
        <span class="oi oi-plus" aria-hidden="true"></span> Counter
    </NavLink>
</div>
<div class="nav-item px-3">
    <NavLink class="nav-link" href="fetchdata">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
    </NavLink>
</div>
....