Build Cross-Platform Apps with .NET MAUI Blazor Hybrid

Introduction

In my past experience, I was able to create desktop applications using WPF, web applications using Blazor, and mobile applications using Xamarin. While the backend logic could be written in C#, all three platforms, desktop, web, and mobile required different UI frameworks. But what if there were a way to use a single UI framework while still being able to run the app on all three platforms?

With ".NET MAUI Blazor Hybrid and Web App", we can use Blazor components in a .NET application to achieve a unified experience across all three platforms. The following image illustrates the same component (Weather Forecast) running on desktop (left), mobile (right), and web (bottom) versions."

Image 1: Running the same app on web, desktop, and mobile platforms

Create the .NET MAUI Blazor Hybrid and Web App

Open Visual Studio and select Create a new project. Search for ".NET MAUI Blazor Hybrid and Web App" in the project templates. Please select it and click Next.

Image 2: Create the .NET MAUI Blazor Hybrid and Web App

Provide a project name, such as AllInOnePlatform, and click Create.

Image 3: Configure the .NET MAUI Blazor Hybrid and Web App

Provide framework details and additional information.

Image 4: Select .NET version and Interactive mode

Now, you'll be able to see three projects.

• AllInOnePlatform
• AllInOnePlatform.Shared
• AllInOnePlatform.Web

Image 5: Solution containing all three apps

1. AllinOnePlatform Project (Desktop and Mobile)

Image 6: File structure of AllInOnePlatform

This project is designed to run on mobile (iOS, Android) and desktop (Windows, macOS) platforms. It leverages BlazorWebView to embed Razor components in the native app UI. This allows rendering Blazor components using WebView.

Key Components

• MainPage.xaml & MainPage.xaml.cs: The entry point for the UI, hosting the BlazorWebView, where your Razor components will be rendered.
• Platforms Folder: Contains platform-specific configurations for iOS, Android, Windows, and macOS.
• wwwroot Folder: Contains static web assets like CSS, JavaScript, and images for Blazor components.
• Program.cs: Configures services and middleware for the MAUI app.

Image 7: Desktop app (AllinOnePlatform)

Image 8: Mobile app (AllinOnePlatform)

2. AllinOnePlatform.Shared (Shared Library)

Image 9: File structure of (AllinOnePlatform.Shared)

This is a class library project that contains the shared Razor components, models, and logic that can be reused across Deskop-Mobile and web projects (e.g., AllinOnePlatform and AllinOnePlatform.Web). By centralizing shared components, we can achieve a single codebase for UI and logic.

Key Components

• Razor Components: For example, the Login.razor component resides here. It defines the shared UI and behavior.
• Models: Classes representing data structures (e.g., User, LoginModel) shared across projects.
• Services: Any reusable business logic or APIs (e.g., authentication service).

3. AllinOnePlatform.Web (Web App)

Image 10: File structure of AllinOnePlatform.Web

This project is your Blazor app, a web application that will render the shared Razor components (Login.razor, etc.) in a browser. It runs on a server and uses SignalR to establish real-time communication with the browser for interactive UI updates.

Key Components

• Components Folder: Contains Razor pages that define the navigation structure of the app.
• App.razor: Defines the application layout and routing.
• Startup/Program.cs: Configures the Blazor app, including dependency injection for shared services.
• _Imports.razor: Simplifies Razor syntax by importing shared namespaces.

Image 11: Web app AllinOnePlatform

How do they communicate together?

1. Shared Components
   • The AllinOnePlatform.Shared library is referenced in both the AllinOnePlatform and AllinOnePlatform.Web projects.
   • This allows both the mobile/desktop app and the web app to render the same Razor components and use the same logic/models.
2. Dependency Injection
   • Common services, such as authentication or data services, are defined in the Shared project and registered in both apps’ DI containers (Program.cs in each host project).
   • For example, an AuthService defined in Shared can be registered in both AllinOnePlatform and AllinOnePlatform.Web to handle authentication consistently.
3. UI Rendering
   • The MAUI app uses BlazorWebView to host and render Razor components from Shared locally on the device.
   • The Blazor app renders the same components in the browser, communicating with the server via SignalR.
4. Static Assets
   • Static assets (like CSS, images, and JS files) in the Shared project are embedded and served by both the MAUI app and the Blazor app.

Conclusion

There are advantages to a single codebase.

• Code reusability: Share Razor components between MAUI and Blazor Server apps.
• Efficient development: Maintain a single source of truth for UI and logic.
• Cross-platform reach: Deploy to mobile, desktop, and web with minimal changes.

Now, we can efficiently create cross-platform applications with shared components and logic.