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."

AllinOne Platform

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.

Create a new project.

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

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

AllInOnePlatform

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

Provide framework details and additional information.

Additional information

Image 4. Select .NET version and Interactive mode

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

AllInOnePlatform.Web

Image 5. Solution containing all three apps

1. AllinOnePlatform Project (Desktop and Mobile)

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

MAUI app

Image 7. Desktop app (AllinOnePlatform)

Mobile app

Image 8. Mobile app (AllinOnePlatform)

2. AllinOnePlatform.Shared (Shared Library)

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

3. AllinOnePlatform.Web (Web App)

Services

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

Importing shared

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.

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