We will create a new project (a blog engine) and will continue working on that project throughout the book.

You can find the source code for this chapter’s result at https://github.com/PacktPublishing/Web-Development-with-Blazor-Third-Edition/tree/main/Chapter02.

In this book, the focus will be on Windows development, and any screenshots are going to be from Visual Studio (unless stated otherwise). But since .NET 8 is cross-platform, we will go through how to set up your development environment on Windows, macOS, and Linux.

The go-to link for all the platforms can be found at https://visualstudio.microsoft.com/.

We can download Visual Studio or Visual Studio Code from the web page.

Windows

On Windows, we have many different options for developing Blazor applications. Visual Studio 2022 is the most powerful tool we can use.

There are three different editions, which are as follows:

• Community 2022
• Professional 2022
• Enterprise 2022

In short, the Community Edition is free, while the others cost money. The Community Edition does have some limitations, and we can compare the different editions here: https://visualstudio.microsoft.com/vs/compare/.

For this...

Throughout the book, we will create a blog engine. There won’t be a lot of business logic that you’ll have to learn; the app is simple to understand but will touch base on many of the technologies and areas you will be faced with when building a Blazor app.

The project will allow visitors to read blog posts and post comments. It will also have an admin site where we can write a blog post, which will be password-protected.

We will create an app that leverages Blazor Server, Blazor WebAssembly, and streaming server-side rendering.

Exploring...

With .NET 5, we got a super powerful tool called dotnet.exe. Developers who have used .NET Core before will already be familiar with the tool, but with .NET 5, it is no longer exclusively for .NET Core developers.

It can do many things Visual Studio can do, for example, creating projects, adding and creating NuGet packages, and much more. In the following example, we will create a Blazor Server and a Blazor WebAssembly project using the dotnet command.

Creating projects using the command line

The following steps are to demonstrate the power of using the command line. We will not use this project later in the book, so if you don’t want to try it, go ahead and skip this section. The CLI is cross-platform, so this can be used on Linux and macOS as well.

To create a solution with a Blazor app, you can do the following:

dotnet new blazor -o BlazorWebApp

We will not go deeper into the CLI in this book but know that it is a great way...

Visual Studio will generate two projects: Blazor App, which is the server project, and BlazorWebApp.Client, which is where we put our WebAssembly components.

Now, it’s time to look at the different files and how they may differ in different projects. Take a look at the code in the two projects we just created (in the Creating our first Blazor app section) while we go through them.

Program.cs (BlazorWebApp project)

Program.cs is the first class that gets called. So, let’s start looking at that one.

The Program.cs file looks like this:

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler(&quot...

In this chapter, we got the development environment up and running, and we created our first Blazor app. We learned in what order classes, components, and layouts are called, making it easier to follow the code.

In the next chapter, we will take a break from Blazor to look at managing state and set up a repository to store our blog posts.