Blazor from Scratch: Chapter 2 — Your First Blazor App

Welcome to Chapter 2 of Blazor from Scratch. If you missed Chapter 1, read that first so the rendering model context is fresh.

In this chapter we’ll create a new Blazor app, run it locally, and understand what each important file is doing.

Step 1: Create the project

From your terminal:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

This creates a .NET 9 Blazor Web App with the default structure.

If your tooling asks you to choose an interactivity model, start with Interactive Server. It’s the easiest mode to learn with because everything runs on the server and the setup is straightforward.

Step 2: Run it locally

Start the app:

dotnet watch

Then open the URL shown in the terminal (usually https://localhost:5xxx). You should see the default app with the Home, Counter, and Weather pages.

If that works, your environment is ready.

Step 3: Understand the project structure

Here are the files and folders you should know first:

• Program.cs — registers services and configures the request pipeline.
• Components/App.razor — root component for the app.
• Components/Routes.razor — route mapping for pages.
• Components/Pages/ — routable pages like Home and Counter.
• Components/Layout/ — shared layout (MainLayout.razor, nav menu).
• wwwroot/ — static assets (CSS, images, favicon).
• appsettings.json — configuration values.

Don’t worry about every file yet. At this stage, understanding where UI lives and where startup is configured is enough.

Step 4: Make your first change

Open Components/Pages/Home.razor and replace the default content with:

@page "/"

<PageTitle>Blazor from Scratch</PageTitle>

<h1>Blazor from Scratch</h1>
<p>Chapter 2 is running locally.</p>

Save the file and refresh the browser. With dotnet watch, the app should update immediately.

This small edit confirms the full loop: edit -> build -> render.

Step 5: Read Program.cs once

You don’t need to memorize it, but you should recognize the key lines:

• AddRazorComponents() enables Razor components.
• AddInteractiveServerComponents() enables interactive server components.
• MapRazorComponents<App>() maps the root component to endpoints.

These lines tell you how the app boots and which rendering capabilities are active.

Common issues

If something fails, it’s usually one of these:

• Old SDK: run dotnet --version and make sure you’re on .NET 9.
• HTTPS certificate warnings: run dotnet dev-certs https --trust.
• Port conflicts: stop old dotnet processes and run again.

Up next

In Chapter 3 we’ll focus on components in depth: parameters, composition, and how to structure reusable UI without creating a mess.