On the other hand, we have another problematic situation in building cross-platform and multi-device applications. Subsequently, we need more resources with different skill sets based platforms. This situation creates the requirements of Android developer for Android devices, iOS developer for iOS devices, Windows developer for Windows, and Linux devices. Furthermore, an organization needs to make a huge investment and will be required more time to build cross platforms and multi-device applications.
Blazor Hybrid Apps
On top of that, .NET MAUI, Multi-platform UI is a cross-platform framework that allows us to create native mobile and desktop apps using C#. Using Blazor with MAUI, we can develop native Android, iOS, Desktop applications using the same code and .NET platform with C#.
.NET MAUI together with Blazor can enable a single code base of Web UI components for native mobile, desktop and web applications.
.NET MAUI is an open source, intended to use reusable single code base UI layout for cross-platform mobile to desktop developments and having the same application logic. Obviously, this will make the developer’s life easy and reduce the development cost significantly for an organization. Furthermore, we use the same .NET and C# skill sets to develop any kind of app.
To know more on .NET MAUI please refer the below article.
In this article, we will learn and build a hybrid Blazor app, .NET MAUI Blazor App step by step. I will go through subsequent points in this write-up.
- What is Hybrid Blazor App
- What is .NET MAUI
- .NET MAUI Blazor app
- Getting started with .NET MAUI Blazor App
- Prerequisites of .NET MAUI Blazor App
- Create a .NET MAUI Blazor app using Visual Studio
- Run and test the .NET MAUI Blazor app in Windows
- Run and test the .NET MAUI Blazor app in Android Emulator
- Why to use .NET MAUI Blazor app
Let’s commence. 😊
- First, we need a preview version of Visual Studio, which you can download from https://visualstudio.microsoft.com/vs/preview/. This preview version includes the MAUI workload and project templates.
Install .NET MAUI Workload as shown below.
Alternatively, you can enable preview version in exiting Visual Studio 2022. Please check below article.
- Additionally, we need Microsoft Edge WebView2, which can be downloaded from below link.
This is required to facilitate web content in our native applications, however, if you are using Visual Studio Emulators, then you don’t need this tool.
.NET MAUI Blazor Apps supports below platforms:
- iOS 14 or Higher
- Android 7.0 (API 24) or higher
- macOS 11 or Higher, using Mac Catalyst
However, .NET MAUI app supports more platforms as portrayed below:
- iOS 10 or higher
- Android 5.0 (API 21) or higher
- macOS 10.15 or higher, using Mac Catalyst
- Windows 11 and Windows 10 version 1809 or higher
Create a .NET MAUI Blazor app using Visual Studio
Now we will create a complete .NET MAUI Blazor App solution. Let’s begin by launching the Visual Studio 2022 Preview Version as shown below.
We will create a new project screen. Then we will search MAUI project templates and choose .NET MAUI Blazor App as portrayed below.
We will give a project name and choose a location.
Choose .NET 6 as the target framework.
At this point, our .NET MAUI Blazor app project is created successfully.
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 choice to select which platform we want debug.
While building the project, we will get 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 into Windows Machine, Android Emulators, iOS Simulators, and so on as shown above.
Initially, we will run the solution in Windows Machine.
Oops!! We might get this window if we have not enabled developer mode in Windows.
In such case, we need to enable developer mode to run the application in Windows Machine.
Now, we will run the application again on Windows Machine and see that the app is running successfully.
Our application runs successfully in Windows Machine as a win app.
Furthermore, we will proceed with Android Emulator and run the application with Android Emulator. You will see an error as shown below. We will double click and move to next.
After that, there will be a screen to create a default Android Device as portrayed.
It will add an Android device in the emulator, however we can multiple Android versions and devices based on our necessity.
After completion of download, we will option to run the emulator. However, there will be a warning about performance as shown.
Click start anyway.
Then again, we will get the explicit option to debug or run with Android emulator, Pixel 5 – API 31 (Android 12.0 – API 31).
Our app will open through Android device added in the emulator as depicted below.
We successfully created a .NET MAUI Blazor App and debug it in Android emulator.
Now .NET MAUI Blazor App is ready which we can be used in cross platforms Windows, Android, iOS, mac, and multi-devices.
However, we will experience slowness and it will take significantly more time load and run in the emulator. Furthermore, we can enhance the performance Android emulators by enabling the hardware acceleration in Windows machine as shown below.
- Enable Window Features: Hyper-V and Windows Hypervisor Platform.
Then we run the solution again, however, the above Windows features will improve the loading of Android emulator considerably.
This is how we can develop a cross platform application with Blazor Hybrid apps, .NET MAUI.
Why 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 same logic, test
– Native apps for all platforms
– It can be developed with Window or mac PC and can run across every device
– We can use single project which will be easy to maintain and work
– 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, however, Blazor hybrid apps, .NET MAUI is generally available and is supported for production workload.
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, maintaining separate teams likewise. To overcome this complicated scenario, we have a way out, Hybrid Blazor apps with .NET MAUI. Using .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 improve the development and reduce the cost. In this write-up, I have explained the Blazor apps, .NET MAUI and Blazor hybrid apps. Additionally, I have delved .NET MAUI Blazor apps and build a complete solution using Visual Studio preview. At last, I have explained the advantages of Blazor hybrid apps.