Building a website
In this series, we will build an online store website together. You will have an overview of how a website is built with Blazor by using all the basic building blocks. This website includes 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 Server .NET 6 project.
- Remove boilerplate code in the created project.
You can download the example code used in this topic on GitHub.
Prerequisite
First thing first, you need to have the following softwares and knowledge to developing Blazor Server websites.
Software:
- Visual Studio 2022 Current.
- .NET 6 Runtime.
- 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:
- HTML.
- CSS.
- JavaScript (optional).
Create a Blazor Server .NET 6 project
The first step to get into Blazor Server website development is to create a project. Start your Visual Studio and click on Create a project.




Remove boilerplate code
Boilerplate code are the code that predefined by Microsoft as an example. You need to remove those files in order to make your own website.

After remove those files, open Index.razor
and remove the following line:
<SurveyPrompt Title="How is Blazor working for you?" />
Open Program.cs and remove all the using and the following lines:
using {{YourProject}}.Data;
...
builder.Services.AddSingleton<WeatherForecastService>();
Next, 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>
....