.NET MAUI – Project Template

You might wonder whether you’ve read the title of this post correctly, yes, of course, .NET MAUI project template is now available from the .NET CLI toolset and VS IDE.

Both VS2019 and VS2022 for Windows are now provisioned with project templates for both Maui as well as Maui Blazor app models. Use VS2019 16.11 Preview 4.0 or VS2022 Preview 3.0 or later version to build the project.

And, users on macOS can continue to use VS Code for time being as Microsoft is doing a complete revamp of Visual Studio for Mac. Develop MAUI app in VS Code with Comet for .NET Mobile extension. For further details, read this article.

Update: A far more advanced all-in-one .NET MAUI App project template is now available to install. Check out this article for more details.

Have published a VS extension to install the item templates that target .NET MAUI Preview. To know more about it, take a look at this .NET MAUI – Templates for Visual Studio article.

Note: From .NET 6 Preview 6 onwards, to work with MAUI, installing .NET SDK and Visual Studio alone is NOT enough. Since MAUI is an optional workload, it won’t get installed with Visual Studio for now. Maybe in a future version. For time being, this has to be manually installed with the .NET CLI command in an elevated prompt.

dotnet workload install maui

Post-installation, verify whether it is getting listed as a .NET workload using the command dotnet workload list as shown in the below screenshot.

Before moving on to the project template and its details, there is an exciting tool that helps in setting up the Dev environment dependencies for exploring the MAUI preview bits. It’s called the .NET MAUI Check tool, available on both Windows and macOS, and is published by Jonathan Dick on his GitHub page.

This can be installed into the .NET CLI global toolset and then invoked to set up the dev machine.

Warning: Since MAUI (and .NET 6 as a whole) is still in developer preview, recommend not to set it up in the primary machine where day-to-day activities are done as it might cause issues and support will not be available immediately.

To install/update this utility, run the appropriate command in the terminal.

Note: In all the commands, --global the switch can also be specified as -g (its short notation)

dotnet tool install --global redth.net.maui.check

dotnet tool update --global redth.net.maui.check

To verify the installation, run this command: dotnet tool list --global

In the below screenshot, have filtered the available tool list with the pipe (|) (if you’re on a Mac, then use grep instead of findstr) to show only that is matching with maui. The current version of this tool is 0.7.3 as of Aug 12, 2021.

Now to run this tool, type maui-check in the prompt and press enter/return key. This calls for Administrative privilege as it queries the registry in Windows or its equivalent in macOS.

This will run a series of checks and offers to install all the necessary prerequisites to work with an MAUI project including a project template. It will prompt if something is missing and will attempt to auto-fix it after the user confirms so.

For advanced usage of this tool (like running it in the CI machine or non-interactive mode), check out the documentation in the GitHub link provided.

To know whether the project template is installed, run the below command to confirm it.

dotnet new --list

In the above screenshot, have filtered the available project list with the pipe (|) (if you’re on a Mac, then use grep instead of findstr) to show only that is matching with maui, it’s optional and absolutely fine to run without that pipe command.

Note: The last item in the list is a custom item template for .NET MAUI Content Page, which can be installed from NuGet using the command dotnet new --install VijayAnand.MauiTemplates. For further details, visit this GitHub / NuGet Page.

Now it’s time for action. First will create a new directory for the project files (it’s up to the user in which way they want to do this).

From a terminal (here TestApp is the name given to the project and it could be any valid name as you wish):

md TestApp

cd TestApp

The next step is to create a new MAUI project, type the below command to do so:

dotnet new maui (or) dotnet new mauiapp

Now the project files are created in this directory, while building the project it will first attempt to restore the dependent packages.

Update: Upon the release of Preview 5 and higher, all the dependent packages are now made available in the public repository, NuGet. Hence no additional configuration is required. If you’re on the latest version, directly proceed to the section titled Building the Project.

Update: With the release of Preview 4, the MAUI team has enabled a preview link for their NuGet feed to download and restore. Run the below command after creating a project to configure it.

dotnet new nugetconfig

dotnet nuget add source --name maui-preview https://aka.ms/maui-preview/index.json

Building the Project:

Now let us build the project, as it is multi-targeting by design, need to specify the target framework (TFM) in the build command using the framework (-f) switch. To build and run the iOS/Android app, run the commands in the context of the core project (non-WinUI).

dotnet build -f:net6.0-android

During the initial build, it will take some time since it downloads the dependent packages as part of the restore.

For other platforms, pass the appropriate value for the framework (-f) switch during the build/run process (mentioned below). iOS requires an active connection with Mac machine acting as a build agent to build and run

iOS -> net6.0-ios

macOS -> net6.0-maccatalyst

Now build succeeded, to run the project, need to pass an additional argument (-t:Run) to the build command itself.

Before attempting to run the project, launch the Android Emulator upfront and then execute the below command

dotnet build -f:net6.0-android -t:Run

Finally, the output on the Android Emulator (Haven’t tried it out on the iOS, folks can try and update it in the comments):

Eureka, we did it, in my next post, will detail the option to run and debug the project from Visual Studio Code.

Stay tuned for more updates and insights folks!!!

Let us continue to learn and share the experiences from the journey of being a software developer.