5 - Adding Blazor

So in the previous step 4, we had upgraded our application to ASP.NET Core 3.1, but we still had no actual Blazor anywhere in the system. However this is a good approach - I'd strongly suggest getting the ASP.NET Core upgrade working and stable before you try to do this step to add Blazor. We were still encountering bugs for a couple of weeks after the upgrade, as the users found things we'd missed in the testing stage.

As the bugs were cleared out it was time to try to add Blazor to our existing project!

Server or WebAssembly?

At this point I needed to decide if we went down the Blazor WASM or Blazor Server-side route. The great thing about Blazor is that this choice is important but not irreversible. Blazor code works on both technologies equally well, and providing you handle obtaining resources from the server in the right way, it's not difficult to swap from one to the other.

Backward Compatibility

The big issue in this choice was being able to keep all the existing legacy application functionality. Our migrated application uses MVC controllers and view, and the Blazor functionality needs to work alongside this as we gradually migrate away from it. 

WASM Test

Blazor WASM is much more involved from a security perspective as it involves a change from using Cookie-based authentication to JWT token-based and Identity Server. I tried doing this for a few days, but this was an issue for getting the legacy MVC stuff to work in this context. So for now I decided to leave this version and try the server-side.

Server-Side Test

Server-side was much easier to integrate as we could keep our Cookie-based authentication and not have to deal with Identity server just yet. I've also found server-side much easier to debug than WASM, although that has now improved a lot with Blazor WASM RTM release 3.2.

To figure out the steps to upgrade, my approach was to create a new clean Blazor Server-side project that included authentication, and then compare the changes required. For server-side these are fairly simple. I had to replicate our _Layout.cshtml content in MainLayout.razor and _Host.cshtml so we had a layout that looked the same as our MVC layouts.

Another wrinkle is that our ASP.NET Core MVC 404 page handler no longer works. Blazor is a single-page-application model, so it handles all routes that don't map to a static file or controller. This means it's the final handler for requests and the Blazor <NotFound> component in the <Router> ends up with these. I just replicated the status page in Blazor which was easy.