Blazor - Part 2: How to create a simple static Blazor SPA
This article is part of a serie. You can jump to other articles here:
Start writing a Blazor app in seconds
As of today, if you want to start writing a Blazor app in just few seconds, you can follow the official get started guide which requires mainly 3 points:
- Install the latest .NET Core SDK release
Install the latest(Not necessary anymore with SDK 3.1.300 or later)Blazor
template by runningdotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-*
- Create a new
Blazor WebAssembly
project by running:dotnet new blazorwasm -o MyBlazorWebAssemblyProject
,- then
cd MyBlazorWebAssemblyProject
- and finally
dotnet run
That’s all, you get a running Blazor WebAssembly
web app that you can start developping/debugging.
If you want to publish it, just run dotnet publish -c release
and copy the content of the publish/dist
folder to your favourite static files hosting platform, and you are done!
And if like me, you don’t like when too much magic is done for you, keep reading the following sections :)
Smallest publishable static Blazor project
To create the smallest client side Blazor
app possible, we will need first a .csproj
file at it is a C# project. Inside we will be able to reference the Blazor
specific tooling, as well as mandatory dependencies (3 exactly: Microsoft.AspNetCore.Blazor
, Microsoft.AspNetCore.Blazor.Build
and Microsoft.AspNetCore.Blazor.HttpClient
)
Then like any classic ASP.NET core
project, you will need a Program.cs
file which will be calling the Startup.cs
file. The latest will be in charge of referencing you root Blazor
component.
Then for the real Blazor
stuff, you will need your root Blazor
component file, usually named App.razor
by convention, and also your default page usually called Index.razor
, placed inside a Pages
folder.
To glue all of that stuff, you will also need to create an index.html
file inside the wwwroot
folder. In this file, you will find a reference to the blazor.webassembly.js
framework which will be in charge of loading the mono
webassembly runtime, as well as your project assemblies which need to be defined inside a blazor.boot.json
file (You can have a look at the schema described in What is Blazor).
You can find below a small recap list of the mentionned files:
- A C# project
.csproj
file, - A entry
Program.cs
file, - A
Startup.cs
file following the startup pattern, - An
App.razor
root Blazor component, - An
Index.razor
page inside of aPages
folder (by convention), - And finally an
index.html
file inside of thewwwroot
folder, which will be the starting point.
You can have a look at the content of all these files on my Github commit #ADD smallest publishable static Blazor project, but at this level, they are pretty much empty.
Now you should have a deployable project, for which you can run dotnet publish -c release
and browse into the folder ./bin/release/netstandard2.0/publish/MyBlazorWebAssemblyProject/dist
to find all the static files you need to run your Blazor app (We will see in future articles how to host)
We still get to download 5.1MB to display our Blazor
app, mainly due to the size of the mono.wasm
and the mscorlib.dll
files which weight 1.8MB and 1.3MB respectively.
But like most SPA app, since these files are static files, they should ideally be downloaded only once, keeping the reload of the web page to only a few KB fortunately :)
In conclusion
Well, I hope this article helped you to get a better understanding of what is really needed to get a simple Blazor
app without any magic!
In the next article, I plan on writing about hosting this small Blazor
app (in a Docker container for instance :))
Feel free to reach me out on Twitter @vivienfabing or anywhere else, and may the code be with you!