I ❤️ .NET

In this article, let's learn about developing Hybrid App using Blazor WASM and MAUI.

Note: If you have not done so already, I recommend you read the article on Developing Hybrid App with Blazor WASM and .NET MAUI.

Table of Contents

1. Introduction
2. Converting Blazor WASM to MAUI Hybrid App
3. Summary

Introduction

So far we have learned how to build and run blazor web app. In a Blazor Hybrid app, Razor components run natively on the device. Components render to an embedded Web View control through a local interop channel. Components don't run in the browser, and WebAssembly isn't involved. Razor components load and execute code quickly, and components have full access to the native capabilitie of the device through the .NET platform. Component styles rendered in a Web View are platform dependent and may require you to account for rendering differences across platforms using custom stylesheets.

Join me on a journey of building your first hybrid applications across iOS, Android, Mac, Windows, and web with ASP.NET Core, Blazor, Blazor Hybrid, and .NET MAUI. Learn how to use Blazor Hybrid to blend desktop and mobile native client frameworks with .NET and Blazor.

Converting Blazor WASM to MAUI Hybrid App

Let's take our I Love DotNet Blazor WASM app and convert it to a MAUI Hybrid app. The steps we need to follow are:

1. Create a web assembly app. In our case we already have our I Love Dotnet Blazor Wasm app.

   

   

   

2. Create a common razor class library.

3. Move the pages/components/assets to common razor class library.

   

   

4. Create MAUI Blazor Hybrid Project.

5. Reuse the common razor class library in MAUI and Blazor.

   

6. Now we need configure MauiProgram.cs and register the dependencies as we have done in Blazor Wasm Program.cs Make sure to configure environment additionally in MauiProgram.cs.
7. We need to configure the Routes.razor component in Maui App same as we have done in Blazor Wasm App.
8. We need to configure the index.html in Maui App same as we have done in Blazor Wasm App.
9. To make use of native platform features in razor class library, we need to add <UseMauiEssentials>true</UseMauiEssentials> in the .csproj file and add reference to Nuget Microsoft.Maui.Essentials.
10. Make sure you point to index.html from wwwroot of common razor class library in MainPage.xaml of Maui project.
11. Thats it. Now we can run the app and see the same Blazor Wasm app running as a MAUI Hybrid app.

MacOS

iOS

Andriod

Windows

Web

Summary

In this article, we learnt about developing Hybrid App using Blazor WASM and MAUI. We also learnt about the steps to convert Blazor WASM to MAUI Hybrid App and gone through the steps we need to take to ensure native platform features are available in the razor class library. Boom we now have a single codebase running in multiple platforms and devices.