Build A Blazor Hybrid App with .NET MAUI for Cross-Platform Application

If we expand the platforms folder of the project, we will find all the platforms that .NET MAUI supports, as shown below.

Let’s build and run the solution. While running the solution, we will have a choice to select which platform we want to debug.

While building the project, we will get the license agreement screen only for the first time, as shown below.

Additionally, we will see various options to debug and execute.

Which means, we can emulate and run on Windows machines, Android Emulators, iOS Simulators, and so on, as shown above.

Initially, we will run the solution on a Windows Machine.

Oops!! We might get this window if we have not enabled developer mode in Windows.

In such a case, we need to enable developer mode to run the application on a Windows Machine.

Now, we will run the application again on the Windows Machine and see that the app is running successfully.

Our application runs successfully in a Windows Machine as a Windows app.

Furthermore, we will proceed with the Android Emulator and run the application with the Android Emulator. You will see an error as shown below. We will double-click and move to the next.

After that, there will be a screen to create a default Android Device as portrayed.

It will add an Android device to the emulator; however, we can have multiple Android versions and devices based on our needs.

After completion of the download, we will have the option to run the emulator. However, there will be a warning about performance as shown.

Click start anyway.

Click OK.

Then again, we will get the explicit option to debug or run with the Android emulator, Pixel 5 – API 31 (Android 12.0 – API 31).

Our app will open on an Android device added to the emulator, as depicted below.

We successfully created a .NET MAUI Blazor App and debug it in an Android emulator.

Now, the .NET MAUI Blazor App is ready, which we can use in cross-platform Windows, Android, iOS, macOS, and multiple devices.

However, we will experience slowness, and it will take significantly more time to load and run in the emulator. Furthermore, we can enhance the performance of Android emulators by enabling hardware acceleration on a Windows machine, as shown below.

• Enable Window Features: Hyper-V and Windows Hypervisor Platform.

https://docs.microsoft.com/en-us/dotnet/maui/android/emulator/hardware-acceleration

Then we run the solution again; however, the above Windows features will improve the loading of the Android emulator considerably.

This is how we can develop a cross-platform application with Blazor Hybrid apps, .NET MAUI.

Why do we use .NET MAUI Blazor App or Blazor Hybrid apps?

Well, understanding the complex situation explained in the beginning of this article, it is reasonable, and we have several valid reasons for using Blazor hybrid apps.

• With Blazor, we can use .NET and C# to build both front-end Web UI and back-end logic

• We can use the same C# skill set for both UI and back-end logic, which will accelerate the development and reduce the cost.

• We don’t need to get confused about which front-end frameworks to use.

• We can develop cross-platform applications with .NET MAUI for Windows, Android, iOS, macOS, Web.

• Same C# and .NET for cross-platform apps

• Shared code and UI layout

• Shared Design and consistent UI

• Share the same logic, test

• Native apps for all platforms

• It can be developed with Windows or Mac PC and can run across every device

• We can use a single project, which will be easy to maintain and work with

• We can use all the .NET libraries and C# features

• Latest technology and Strong Community Support

Support for Production Workload

Although we use Visual Studio 2022 preview to develop .NET MAUI Blazor apps, Blazor hybrid apps, .NET MAUI is generally available and is supported for production workload.

Conclusion

Software development is getting complex and costly day by day because of separate front-end and back-end frameworks, technologies, skill sets, and resources. On top of that, there is always a demand for cross-platform applications like Windows, Android, iOS, macOS, and so on. This leads to huge investment in terms of cost, resources, time, projects for different platforms, and maintaining separate teams. To overcome this complicated scenario, we have a way out: Hybrid Blazor apps with .NET MAUI. Using a .NET MAUI Blazor app, we can develop cross-platform applications for Windows, Android, iOS, and macOS, and both front-end UI and back-end using C# and .NET. We can use the same project, share the same codebase for logic, share UI and layout, which ultimately improves the development and reduces the cost. In this write-up, I have explained the Blazor apps, .NET MAUI, and Blazor hybrid apps. Additionally, I have delved into .NET MAUI Blazor apps and built a complete solution using Visual Studio preview. At last, I have explained the advantages of Blazor hybrid apps.

References

• https://rijsat.com/2022/08/20/build-a-blazor-hybrid-app-with-net-maui-for-cross-platform-application/

• https://docs.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?WT.mc_id=dotnet-35129-website&view=aspnetcore-6.0