Blazor: Easily switch between client side and server side execution

Blazor as part of ASP.Net Core 3.0 will be shipping in approximately a month. As a generally available release Blazor is supported with server side execution. Even though client side execution is possible, it will remain in a preview state for at least the remainder of the year. Even if the intent for your project is to target server side there are some useful aspects to host your project in wasm on the client. Notably, the ability to use the browser development tools to understand just what your carefully crafted css is actually doing is priceless. If you are going to target the wasm deployment of your project it is still useful to change to server side for debugging at this point in time.

The source code for this project is available on BitBucket at https://bitbucket.org/MarkStegaOHI/blazor-cse-sse/src/master/. This post will just highlight the key aspects of making the switch easy. It is probably best to clone the repository and follow along using Visual Studio 2019 16.3.0 Preview 3.0 and ASP.Net Core 3.0 Preview 9. The project will be updated to ASP.Net Core 3.0 when it is released.

Solution configurations

There are four configurations in the solution. Using the Visual Studio configuration manager you can choose between debug and release and also between client side & server side execution. The key differences in each configuration is the definition of either ClientSideExecution or ServerSideExecution and DEBUG or RELEASE defined constants. So making the switch is as simple as choosing the desired project configuration.

Solution projects

The names of the projects may seem a bit odd; Just understand that this project was pared down from a very large project ‘in progress’ and in the large project the names make sense. The solution is architected in an MVVM style. Most of what appears in the demo project is simply the collection of view components in their simplest form.

GeneralComponents

This project is a Net Standard 2.0 Razor Class Library and implements the UI and backing logic. OptimiserComponents contains the usual Blazor suspects of MainLayout.razor, NavMenu.razor, and the _Imports.razor files as well as other useful components. These projects do not change with the server or client side execution.

Optimiser.Blazor

This project is the Blazor stub defined by program.cs & startup.cs with the packages of “Microsoft.AspNetCore.Blazor” and “Microsoft.AspNetCore.Blazor.Build”. It is only invoked for a client side execution, it is totally ignored for server side execution.

Optimiser.Web

This project is an ASP.Net Core 3.0 server. It uses the defined constants to determine if it is going to host the Blazor project on the server or to simply act as a launch pad for the client side assets. In real life the server presents a REST api for use by the client in either mode. The key to the switch is in startup.cs where the methods Startup and Configure are customized via the defined constants. This project is always the startup project in VS.

Further enhancements

It would be easy to add the development web server and a copy of the wwwroot folder from the Optimiser.Web project to the Optimiser.Blazor project. This would allow a third ‘mode’ of execution which would be to select the Optimiser.Blazor project as startup. But since that is just another client side execution scenario it is only mentioned here as a possibility.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.