Creating a Cross Platform Mobile App with Maui .NET on Mac M1

I always wanted to get more into .NET programming as together with Typescript it is one of my favourite languages as it is flexible and more importantly allows for cross-platform development. Finally, it is adopting a more simplified syntax as well which is coming in .NET 7.

For cross platform mobile app development, .NET had Xamarin and Xamarin.Forms which allowed us to create mobile apps easily. However, some things were lacking (such as Desktop support) and it was more of a standalone product that was not integrated in the .NET BCL (Base Class Library). Which is why Microsoft decided to rewrite the entire approach and name it MAUI (more info can be found here - Thanks Clifford for the amazing write up!)

You can view a detailed roadmap of MAUI here

So let's get started and create a mobile application!

Getting Started

Prerequisites

• XCode (Make sure to start it once to accept the EULA)
• XCode Terminal Tool
• If dotnet doesn't build, check if it is set by opening Xcode -> Preferences -> Locations -> Command Line Tools and ensure it is set.
• Android Studio
• Visual Studio 2022 Preview (7+) for Mac
• Mac sure to install iOS, Android and macOS tools

Installing MAUI

1. Go to the dotnet website and download and install the latest dotnet LTS version

• Make sure dotnet --list-sdks shows it is installed under /usr/local/share/dotnet/sdk

1. Once installed, install maui by running dotnet workload install maui

Warning: Do not install dotnet through brew as this will render you unable to install maui correctly on mac

Creating and Running your App

Create your App

1. Create a directory with mkdir mobile-app
2. Create a maui app with cd mobile-app; dotnet new maui

Get Device Identifier

If we would try to run our application, we would get the error as shown below:

To resolve this, we should do another thing, which is to get our Device Identifier that we will use to target our device. So follow these steps:

1. Open up Xcode
2. Go to Window
3. Devices and Simulators
4. Select your Device
5. Right Click
6. Copy Identifier

Now run the command below with your identifier:

dotnet build -t:Run -f net6.0-ios -p:\_DeviceName=:v2:udid=4C4906B6-B3DB-490A-A322-8153E2DBCA85

If it opens up the simulator, you can close it again.

Run your App

Now we can open our app with Visual Studio.

If you were able to run all the steps above, you should now be able to see an interface that looks like the below:

When we now click the big Play button on the top, the simulator will start and we will be able to start working on our application! Including Hot-Reload of the XAML interface, so each change we make will be reflected in the simulator

Conclusion

That's it! See how simple it is to start creating your cross platform mobile application using .NET.