Understanding the Blazor Project Structure

Explore Program.cs, Components, Pages, Layout, routing, static files, and the key files in a modern Blazor Web App.

Before writing larger applications, you should know where the important files live. A Blazor Web App is an ASP.NET Core application whose UI is composed from Razor components.

1. Important folders and files

2. Look at Program.cs

When Interactive Server components are enabled, a typical modern configuration contains calls similar to the following:

using BlazorTutorialApp.Components;

var builder = WebApplication.CreateBuilder(args);

builder.Services
    .AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

app.UseHttpsRedirection();
app.UseAntiforgery();
app.MapStaticAssets();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

3. Page components and regular components

A component becomes directly reachable by URL when it contains an @page directive:

@page "/about"

<h3>About This App</h3>
<p>This is a routable Blazor page.</p>

A reusable component doesn't need an @page directive. It can be embedded inside another component using its component name as a tag.

4. Create an About page

Right-click Components/Pages → Add → Razor Component. Name it About.razor and paste:

@page "/about"

<PageTitle>About</PageTitle>

<h1>About</h1>
<p>I am learning Blazor with Visual Studio 2026.</p>

Run the application and browse to /about.