DEV Community

Mohammad Hossein Rastegarinia
Mohammad Hossein Rastegarinia

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode
  • Run the following command to install the required workloads:
dotnet workload install maui
Enter fullscreen mode Exit fullscreen mode

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.12.7-hotspot\bin" -p:AcceptAndroidSDKLicenses=True
Enter fullscreen mode Exit fullscreen mode
  • 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.12.7-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"
Enter fullscreen mode Exit fullscreen mode

Step 4: Install and Configure the Android Emulator

  • Check which system images are available:
sdkmanager --list | findstr /i system-images
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode
  • Install the Android Emulator:
sdkmanager --install "emulator"
Enter fullscreen mode Exit fullscreen mode
  • Add the emulator to your system PATH:
setx PATH "%PATH%;C:\Program Files (x86)\Android\android-sdk\emulator"
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode
  • Launch the Emulator:
emulator -avd Pixel_6_Pro_API_34_Play
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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! πŸš€

Top comments (0)