Blazor Web-Assembly Project
This starts from my Blazor Web-Assembly project that I create as a replica of the Angular TourOfHeros tutorial. The source code of project is in GitHub
This is an attempt to convert the existing project to a Blazor server app with few changes to the wiring up and hosting configuration. Since this article is written with a pre-release version of Blazor Web-Assembly, there could be changes to the steps after the actual release expected in May 2020.
Framework updates
The WebAssembly project was create in Jan 2020 when the Blazor Web-Assembly project was in preview, hence i have to change the TargetFramework and few assembly references in the project file.
- Updated Target Framework to
netcoreapp3.1
- Removed references to Blazor assemblies from .Net Core 3.1.0-Preview build
- Removed
RazorLanguageVersion
specification
Hosting and Startup changes
We need to added references to couple of Framework assemblies, namely Microsoft.AspNetCore.App
and Microsoft.NETCore.App
which provides the BlazorServer components.
To wire up Blazor Server app we first need to configure the dependency injection container. This is done by adding server side Blazor service in startup class's ConfigureServices
method
services.AddServerSideBlazor()
Also add support for Razor pages services.AddRazorPages()
, because, our Blazor components are Razor pages.
Configuring the request pipeline
Unlike the Web-Assembly where we just bootstrap the first component and routing is performed at browser end, the Blazor server integrates with ASPNet Core routing and it uses BlazorHub to interact with Blazor components. For this we add the below configurations to the Configure method.
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
All the requests are directed to a Blazor component based on the URL defined using the @page directive, any URL that does not have a match in the routing configured to directed to the fallback page.
The MapFallbackToPage
is used to define the component to be loaded when the request does not match any URL. The host file is named _host by-convention also this route has a lower priority in the routing table, hence Blazor can be coexist with other ASPNet core pages/controllers without causing conflicts.
_Host file
Since the host file is loaded by default in our project (since we don't have any another routes configured), the code that we had in our index.html
will need to be copied over to the host file along with couple lines of code modified.
- The JavaScript file supporting web assembly needs to be changed to the one
supporting Blazor server
i.e.
<script src="_framework/blazor.server.js"></script>
- Rendering mode of the initial component to be changed to server-pre-rendered
<app>Loading...</app>
to<app> <component type="typeof(App)" render-mode="ServerPrerendered" /></app>
We can pretty much bootstrap any component in the type attribute, we use the App component as it is our parent component which calls all the rest of the components.
And that's pretty much it. Your WebAssembly app should be able to running in a ServerRendered Blazor server mode now.
Both my WebAssembly and Blazor Server app code are available in GitHub
- WebAssembly is in the
master
branch - BlazorServer is in the
serverApp
branch (which i branched out and modified)
Top comments (0)