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.
How?
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.
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:
builder.RootComponents.Add<App>("#app");
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.
_framework
index.html
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/).