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.
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
- Removed references to Blazor assemblies from .Net Core 3.1.0-Preview build
We need to added references to couple of Framework assemblies, namely
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
Also add support for Razor pages
services.AddRazorPages(), because, our Blazor components are Razor pages.
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.
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.
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.
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.
supporting Blazor server
- Rendering mode of the initial component to be changed to server-pre-rendered
<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
- BlazorServer is in the
serverAppbranch (which i branched out and modified)