Blazor WebAssembly is a modern technology developed by Microsoft that allows running web applications written in C# directly in the browser, without the need for JavaScript. Based on WebAssembly, this approach paves the way for full-stack development with .NET using the same language – C#.
In this article we will explore:
-
What Blazor WebAssembly is
-
How it compares to Blazor Server
-
How to create a new project
-
Project structure
-
A first "Hello, Blazor!" example
🧠 What is Blazor WebAssembly?
Blazor WebAssembly (or Blazor WASM) is a SPA (Single Page Application) that runs entirely in the browser. The C# code is compiled into WebAssembly, a fast binary format that can be executed by modern browsers.
The main difference from Blazor Server is that there is no constant connection to the server – the application logic runs locally, in the user's browser.
⚖️ Blazor WebAssembly vs. Blazor Server
|
Feature |
Blazor WebAssembly |
Blazor Server |
|---|---|---|
|
Execution |
In browser (client-side) |
On server (via SignalR) |
|
Startup speed |
Slower at start |
Instant, logic on server |
|
Application size |
Larger (DLL downloads) |
Smaller (code on server) |
|
Offline interactions |
Possible |
No |
|
Response to poor network |
Better |
Poor (requires connection) |
🛠️ Creating a new Blazor WebAssembly project
-
Open the terminal or use an IDE (Visual Studio or Rider).
-
Create the project:
dotnet new blazorwasm -n BlazorIntro
cd BlazorIntro
dotnet run
-
Access https://localhost:5001 or http://localhost:5000.
🧩 Structure of a Blazor WASM project
BlazorIntro/
├── wwwroot/ # Static files (CSS, JS, images)
├── Pages/ # Application pages
├── Shared/ # Shared components
├── Program.cs # Entry point
├── App.razor # Routing configuration
└── index.html # Main HTML page
👋 Example: Hello, Blazor!
Let's create a new page:
-
Create a new file in Pages/Hello.razor:
@page "/hello"
<h3>Hello from Blazor!</h3>
<p>Current date: @DateTime.Now.ToString("f")</p>
-
Add a link in Shared/NavMenu.razor:
<NavLink href="hello" Match="NavLinkMatch.All">
<span class="oi oi-star" aria-hidden="true"></span> Hello
</NavLink>
-
Done! Navigate to /hello and see your page in action 🚀
🧭 What’s next?
Now that you have seen how to create a Blazor WebAssembly application, in the next article we will explore Routing in Blazor and how you can build a multi-page application.
📅 Stay tuned for the next article in the series!
