Adventures with Blazor: Blazor, .NET MAUI and Razor Class Libraries

Blazor is a Single Page Application development framework. The name Blazor is a combination/mutation of the words Browser and Razor (the .NET HTML view generating engine).

Read more at What is Blazor? – Blazor University (blazor-university.com) and ASP.NET Core Blazor | Microsoft Docs.

Get started at What is Blazor [1 of 11] | Microsoft Docs.

.NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML.

Read more at What is .NET MAUI? – .NET MAUI | Microsoft Docs.

Razor views, pages, controllers, page models, Razor components, View components, and data models can be built into a Razor class library (RCL). The RCL can be packaged and reused.

Read more at Reusable Razor UI in class libraries with ASP.NET Core | Microsoft Docs.

Now that we have some context behind us the specific scenario or scenarios that I have been exploring is creating a shared component library that could be used by a Blazor application and a .NET MAUI application with minimal code changes.

The code can be found at mattruma/blazor-demos: Various Blazor demos, including web and mobile (github.com).

The repository includes the following projects:

• BlazorApp1 – Blazor WASM application.
• MauiApp1 – Maui Blazor application.
• RazorClassLibrary1 – Shared components used by BlazorApp1 and MauiApp1.

I have implemented the following features, with more to come:

• Share components between the Blazor and Maui applications.
• Read settings from appsettings.json. Easy for Blazor, but not so easy for Maui, have to embedded appsettings.json as a resource and load it in MainProgram.cs.
• Use IConfiguration in pages to display values.
• Call an external API using HttpClient, HttpClientFactory and a typed HttpClient using dependency injection.
• Call an external API inheriting from ServiceBase class.
• Call JavaScript from a class library.
• Use a third-party UI library, Blazorise.

I will continue to add to this, but if you are struggling with creating both a Blazor application and .NET MAUI application with minimal code changes, hopefully this helps you out.

Please share any tips you might have in the comments!