I have about 10 years of experience with ASP.NET, but I have never used Blazor.

After a few hours, this is what I created:

This very simply demos a standalone piece of client-side interactivity.


To get started I followed the command line interface version of the official tutorial.

As the very first step, I used winget to upgrade to dotnet 8.

$> winget install Microsoft.DotNet.SDK.8

Next, I used the dotnet CLI to create and run the app that the tutorial suggested.

$> dotnet new blazor -o BlazorFirstSteps
$> cd .\BlazorFirstSteps\
$> dotnet watch

This served a Blazor Web App in the browser.

Screen shot of the Blazor Web App

That was a good start, but it wasn’t what I wanted to build.

Server Side vs Client Side

I would like to work with Blazor only on the client-side, in the browser, so that I can publish my demo without having to pay for ASP.NET server-side hosting. The Blazor web app that we just created uses Blazor Server, which I can run for free on my local dev environment, but I would have to pay for ASP.NET hosting, if I wanted to publish this on the World Wide Web. With client-side only Blazor, I can publish for free as a static site. For that we need the Blazor Web Assembly hosting model.

Client-Side Only with Blazor Web Assembly

It turns out that the dotnet CLI has templates for Blazor Web Assembly. We can find that by running dotnet new list blazor like this:

$> dotnet new list blazor

These templates matched your input: 'blazor'

Template Name                      Short Name          Language  Tags
---------------------------------  ------------------  --------  --------------------------------
Blazor Server App                  blazorserver        [C#]      Web/Blazor
Blazor Server App Empty            blazorserver-empty  [C#]      Web/Blazor/Empty
Blazor Web App                     blazor              [C#]      Web/Blazor/WebAssembly
Blazor WebAssembly App Empty       blazorwasm-empty    [C#]      Web/Blazor/WebAssembly/PWA/Empty
Blazor WebAssembly Standalone App  blazorwasm          [C#]      Web/Blazor/WebAssembly/PWA

That’s really nice. The dotnet CLI lists templates that contain the word blazor. We want the last one named “Blazor WebAssembly Standalone App” or “Blazor WebAssembly App Empty”.

This is how I created the “Empty” version of the app. It’s simplest, and I like to start simple.

$> dotnet new blazorwasm-empty
$> dotnet build

Two things to note from the output.

The Program.cs file contains this line:


The index.html file contains these two lines:

<div id="app">
<script src="_framework/blazor.webassembly.js"></script>

My goal now is to run that index.html file with a simple HTTP server. I would eventually like to publish the WASM without any need to have the dotnet runtime on the server. For now we can happily test with the dotnet CLI.

$> dotnet tool install -g dotnet-serve
$> dotnet serve -o -d wwwroot

Nice. That worked.

Running in a Static HTML Page

Somehow we need to shoehorn this new Blazor Web Assembly app into an existing HTML page. The official document on how to Host and deploy ASP.NET Core Blazor WebAssembly had more of a deep dive than I needed at this point. I simply want to hack together a simple demo.

I decided to try guess and test. Sure enough the following worked for my purposes.

$> dotnet publish -o C:\dev\temp\blazor-first-steps
$> dotnet serve -o -d C:\dev\temp\blazor-first-steps\wwwroot

Everything that we need we can find in the C:\dev\temp\blazor-first-steps\wwwroot folder.


This is actually really nice. We can publish our little demo app to an arbitrary folder; we can do that from the command line (thus, as part of continuous delivery), and we can even serve it as part of this static hugo blog.

The process isn’t clean or pretty at this point, but it works.

Shoehorning the Demo into This Blog Post

Finally, we published the simple demo to this Hugo blog post with a shortcode and the following script.

dotnet publish -c Release -o bin/publish
Copy-Item -Recurse -Force .\bin\publish\wwwroot\_framework ..\..\my-hugo-blog\content\posts\blazor-first-steps\

The first command published the Blazor demo to the publish directory.

The second command copied the _framework folder to this blog post’s root directory. We needed only that _framework folder. It contains the whole Blazor WebAssembly app.

Then we could load it like this:

<div id="app"></div>
<script src="./_framework/blazor.webassembly.js"></script>

That’s what loaded the demo at the top of this page.

Of course, the deployment process isn’t pretty yet, but it worked. Good enough for now.

Make it work, make it right, make it fast, and then if you have any time left, make it cheap (paraphrased from http://laputan.org/mud/).