Develop .NET MAUI Apps Using VS Code Without Traditional IDEs

.NET MAUI (Multi-platform App UI) is a powerful cross-platform framework by Microsoft, often used with full-featured IDEs. However, you can now build and debug .NET MAUI apps using VS Code alone! This guide provides a step-by-step approach to setting up your environment and developing .NET MAUI apps without relying on traditional IDEs.

Step 1: Install Required Tools

• Download and Install .NET SDK
  Get the latest .NET SDK (version 8 or 9rc) from the .NET website.

• Install Visual Studio Code
  Download and install VS Code from here.

• Install the .NET MAUI Extension for VS Code
  Install the .NET MAUI extension from the VS Code marketplace. This extension also installs the C# Dev Kit and C# extensions for debugging and building .NET projects.

Step 2: Install .NET MAUI Workloads

• Open a terminal in VS Code and create a new .NET MAUI project:

dotnet new maui -n MyMauiApp

• Run the following command to install the required workloads:

dotnet workload install maui

This ensures that your system is ready to build and run MAUI projects.

Step 3: Setup Android Development

Setting up Android development without full-featured IDEs can be tricky. Below are the steps to configure Android tools manually.

• Install Microsoft OpenJDK 17
  Download the latest version of Microsoft OpenJDK 17 here.

• Install Android Dependencies
  Use the following command to install the Android SDK and related dependencies:
  

dotnet build -t:InstallAndroidDependencies -f:net8.0-android -p:AndroidSdkDirectory="C:\Program Files (x86)\Android\android-sdk" -p:JavaSdkDirectory="C:\Program Files\Microsoft\jdk-17.0.13.11-hotspot\bin" -p:AcceptAndroidSDKLicenses=True

• Configure the required environment variables:

setx ANDROID_HOME "C:\Program Files (x86)\Android\android-sdk"
setx JAVA_HOME "C:\Program Files\Microsoft\jdk-17.0.13.11-hotspot\bin"
setx PATH "%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%JAVA_HOME%\bin"
setx PATH "%PATH%;C:\Program Files (x86)\Android\android-sdk\cmdline-tools\11.0\bin"
setx PATH "%PATH%;C:\Program Files (x86)\Android\android-sdk\platform-tools"

Step 4: Install and Configure the Android Emulator

• Check which system images are available:

sdkmanager --list | findstr /i system-images

• Install a System Image For example install the Google Play system image for Android API 34:

sdkmanager "system-images;android-34;google_apis_playstore;x86_64"

• Install the Android Emulator:

sdkmanager --install "emulator"

• Add the emulator to your system PATH:

setx PATH "%PATH%;C:\Program Files (x86)\Android\android-sdk\emulator"

• Create an Android virtual device, for example Pixel 6 Pro:

avdmanager create avd -n Pixel_6_Pro_API_34_Play -k "system-images;android-34;google_apis_playstore;x86_64" --device "pixel_6_pro"

• Launch the Emulator:

emulator -avd Pixel_6_Pro_API_34_Play

Step 5: Delete an Emulator (Optional)

If you no longer need a virtual device, delete it with:

avdmanager delete avd -n Pixel_6_Pro_API_34_Play

A Note on iOS/macOS and Windows Development

• iOS/macOS:
  Developing for iOS/macOS requires macOS, as Apple’s tooling, such as Xcode and simulators, is only available on macOS. Once configured, you can deploy and debug your MAUI app to iOS devices or simulators directly from VS Code by setting up remote build hosts.

• Windows (WinUI):
  For Windows apps, ensure that you have the required Windows SDKs installed. Building and running MAUI apps on Windows is straightforward since the necessary tools are included with the .NET SDK.
  For insuring about WindowsAppSDK install you can run this command:
  

dotnet add package Microsoft.WindowsAppSDK --version 1.5.2

Conclusion

Using VS Code to develop .NET MAUI apps offers a lightweight alternative to traditional IDEs. While configuring Android development can be tricky, following the steps outlined in this guide will set you up for success.

With your environment properly configured, you can build cross-platform apps targeting Android, iOS/macOS, and Windows all from the comfort of VS Code!

Happy coding! 🚀