Logo

dev-resources.site

for different kinds of informations.

Develop .NET MAUI Apps Using VS Code Without Traditional IDEs

Published at
10/18/2024
Categories
dotnet
maui
vscode
android
Author
mhrastegari
Categories
4 categories in total
dotnet
open
maui
open
vscode
open
android
open
Author
11 person written this
mhrastegari
open
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 Templates and Workloads

  • Open a new terminal and write these to install Microsoft's .NET MAUI project templates
dotnet new install Microsoft.Maui.Templates 
Enter fullscreen mode Exit fullscreen mode
  • Write the following command to 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.13.11-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.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"
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! 🚀

maui Article's
30 articles in total
Favicon
Sneak Peek at 2024 Volume 4: .NET MAUI
Favicon
Open Source Tools for .NET MAUI
Favicon
How to Build a .NET MAUI Barcode Scanner Using IronBarcode
Favicon
Adding Platform-Specific Code to a .NET MAUI Project
Favicon
How to build a MAUI app in Azure Devops
Favicon
Create a .NET MAUI Bubble Chart to Visualize Market Cap Distribution by Country – GDP and Company Analysis
Favicon
Develop .NET MAUI Apps Using VS Code Without Traditional IDEs
Favicon
Embracing the Blazor Hybrid Approach in .NET MAUI
Favicon
The Luhn's algorithm in practice
Favicon
Chart of the Week: Visualizing Top 25 Largest Countries Using .NET MAUI Column Chart
Favicon
Free online Maui discussion 09/12/24 10:00am CST
Favicon
Design a Timer App using .NET MAUI Radial Gauge and Timer Picker
Favicon
Making Payments Easy: Using .NET MAUI Radio Button for Payment Apps and Digital Wallets
Favicon
Chart of the Week: Create .NET MAUI Multi-Category Bar Charts to Compare the Use of Generative AI for Creating Media vs....
Favicon
Introducing the New .NET MAUI Digital Gauge Control
Favicon
Mastering Shopping: Enhancing Your Product Search with the .NET MAUI CheckBox
Favicon
Introducing the 12th Set of New .NET MAUI Controls and Features
Favicon
Microsoft Build 2024: The Syncfusion Experience
Favicon
What’s New in .NET MAUI Charts: 2024 Volume 2
Favicon
Enhance PDF Viewing and Editing with the New Built-in Toolbar in .NET MAUI PDF Viewer
Favicon
Building a .NET TWAIN Document Scanner Application for Windows and macOS using MAUI
Favicon
Chart of the Week: Creating the .NET MAUI Radial Bar to Visualize Apple’s Revenue Breakdown
Favicon
Building .NET MAUI Barcode Scanner with Visual Studio Code on macOS
Favicon
Easily Export .NET MAUI DataGrid to Specific PDF Page
Favicon
Chart of the Week: Creating a .NET MAUI Doughnut Chart to Visualize the World’s Biggest Oil Producers
Favicon
Microsoft Build 2024: Key Takeaways and Insights
Favicon
Chart of the Week: Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights
Favicon
Syncfusion Essential Studio 2024 Volume 2 Is Here!
Favicon
OCR in .NET MAUI
Favicon
Sneak Peek at 2024 Volume 2: .NET MAUI

Featured ones: