ContextQMD
Back to Uno

Creating an app with VS Code

doc/articles/create-an-app-vscode.md

6.6-release-branch-cut12.0 KB
Original Source
<!-- markdownlint-disable MD025 -->

Creating an app with VS Code

[!NOTE] Make sure to setup your environment first by following our instructions.

Create the App

There are two ways to create your app. You can either use the Live Wizard or the /mcp.uno.new Copilot Agent prompt.

Live Wizard

Creating an Uno Platform project is done using dotnet new and the Uno Platform Live Wizard by following these steps:

  1. Open a browser and navigate to the online <a target="_blank" href="https://aka.platform.uno/app-wizard">Live Wizard</a>

  2. Configure your new project by providing a project name, then click Start

  3. Choose a template to build your application

    [!TIP] For a detailed overview of the Uno Platform project wizard and all its options, see the Wizard guide. [!NOTE] Starting with Uno.Sdk 6.0, Skia rendering is now the default rendering engine in Uno Platform templates for iOS/Android/WebAssembly. If you prefer native rendering instead, you can switch this setting in the Features tab under Renderer.

  4. Click the Create button on the top right corner, then click the Copy button

  5. In your terminal, navigate to the folder that will contain your new app.

  6. Create a new project by pasting and executing the command that was previously generated in the Live Wizard.

[!IMPORTANT] Apple targets are automatically disabled under Linux.

Next, open the project using Visual Studio Code.

  • Let's assume your project is named MyApp and is located inside a Projects folder:

    • Using the Terminal Ensure you are at the parent folder (Projects) level, then run:

      bash
      code ./MyApp

    • Using Visual Studio Code

      1. Open Visual Studio Code.
      2. Go to File > Open Folder.
      3. Navigate to the Projects folder and select the MyApp folder.

  • Visual Studio Code might ask to restore the NuGet packages. Allow it to restore them if asked.

  • Once the solution has been loaded, in the status bar at the bottom left of VS Code, MyApp.sln is selected by default. Select MyApp.csproj to load the project instead.

  • [!IMPORTANT] A notification should appear prompting you to sign in or register with Uno Platform.

    Signing in with your Uno Platform account in Visual Studio Code unlocks powerful tools like Hot Reload, helping you speed up development.

    With a single registration, you also gain early access to new features and the opportunity to connect with the Uno Platform community, where you can share feedback and network.

    Detailed information on registration and sign-in is available <a href="https://aka.platform.uno/account-access" target="_blank">here</a>.

Copilot AI Prompt

Using the /mcp.uno.new agent prompt

  1. Open VS Code in an empty new folder

  2. Add the Uno Platform MCP by creating a file named .vscode/mcp.json:

    json
    {
  "servers": {
    "uno": {
       "url": "https://mcp.platform.uno/v1"
    }
  }
}

  3. Save the file, then on top of the registration for the uno MCP, click the start button.

  4. Open Copilot using the center title bar icon:

  5. Select "Agent" on the bottom-left side:

  6. In the Copilot Window, type the /mcp.uno.new then Enter.

  7. The Agent will ask you for your app's description, write the following:

    text
    I need a desktop app that shows the current date in the middle of the window.

  8. Copilot will proceed for a few minutes until it asks to reload the VS Code window.

  9. Once it does, in the command palette, select Reload Window in order the Uno Platform extension to load

    [!IMPORTANT] This step is required for the uno extension to be loaded properly.

  10. Select a csproj in the VS Code status bar, if there's a red rectangle

  11. Wait a few seconds for the XAML Hot Reload server to become available

Explore the Agent MCP tools

We can now explore the MCP:

  1. If you want to use our MCP tools, make sure to be logged in using your account in Uno Studio by using the command palette:

  2. When clicking on the "double wrench" icon on the right side of Copilot, you should be seeing the Uno Platform MCP tools listed:

Debug the App

Uno Platform provides integrated support for debugging your app on Windows, macOS, and Linux.

WebAssembly

[!NOTE] VS Code's built-in JavaScript debugger currently only supports:

  • Google Chrome
  • Microsoft Edge (Chromium-based)

To debug WebAssembly with VS Code, one of these browsers must be installed.

Safari, Firefox, and other browsers are not directly supported via VS Code at the moment.

In VS Code :

  1. In the activity bar select the debugger
  2. Set the debugger launch to Uno Platform WebAssembly Debug (Chrome) or Uno Platform WebAssembly Debug (Edge)

In the status bar :

  1. Just after the Uno logo, ensure the MyApp project is selected - by default MyApp.sln is selected
  2. Next, click on the target framework to select net10.0-browserwasm | Debug

Finally, press F5 to start the debugging session.

Desktop

In VS Code :

  1. In the activity bar select the debugger
  2. Set the debugger launch to Uno Platform Mobile or Uno Platform Desktop (Debug)

In the status bar :

  1. Just after the Uno logo, ensure the MyApp project is selected - by default MyApp.sln is selected
  2. Next click on the target framework to select net10.0-desktop | Debug

Finally, press F5 to start the debugging session.

Debugging using WSL 2 on Windows

VS Code supports debugging Uno Platform Desktop apps through the WSL Extension:

  1. Install the WSL extension
  2. In the control palette, select WSL: Connect to WSL
  3. Once connected to WSL, ensure that the Uno Platform extension is installed
  4. Once the extension is installed, follow the same steps as the section above

Debugging on Linux Remotely

When connecting to a remote Linux machine using the SSH Extension, in order for the user interface to show, it is required to specify the DISPLAY environment variable:

  1. In the .vscode/launch.json, find the Uno Platform Desktop (Debug) section

  2. In the env section, add the following:

    json
    "env": {
    "DISPLAY": ":0"
},

This will allow the application to build on the remote machine and then show on the main display.

Considerations for Hot Reload

Note that C# Hot Reload is not available when running with the debugger. See this section for more information on Hot Reload.

Android

In VS Code :

  1. In the activity bar select the debugger
  2. Set the debugger launch to Uno Platform Mobile

In the status bar :

  1. Just after the Uno logo ensure the MyApp project is selected - by default MyApp.sln is selected
  2. Next click on the target framework to select net10.0-android | Debug
  3. Then select the device to debug with. You will need to connect an Android device or create an Android emulator.

Finally, press F5 to start the debugging session.

iOS

[!NOTE] Debugging for iOS is only possible when running locally (or remotely through Remote SSH) on a macOS machine.

In VS Code :

  1. In the activity bar select the debugger
  2. Set the debugger launch to Uno Platform Mobile

In the status bar :

  1. Just after the Uno logo ensure the MyApp project is selected - by default MyApp.sln is selected
  2. Next click on the target framework to select net10.0-ios | Debug
  3. Then select the device to debug with. You will need to connect an iOS device or use an installed iOS simulator.

Finally, press F5 to start the debugging session.

[!TIP] When deploying to an iOS device, you may encounter the following error: errSecInternalComponent. In such a case, you'll need to unlock your keychain from a terminal inside VS Code by running the following command: security unlock-keychain

Windows

[!NOTE] Debugging for Windows is only possible when running locally (or remotely through Remote SSH) on a Windows computer.

In VS Code :

  1. In the activity bar select the debugger
  2. Set the debugger launch to Uno Platform Mobile

In the status bar :

  1. Just after the Uno logo ensure the MyApp project is selected - by default MyApp.sln is selected
  2. Next click on the target framework to select net10.0-windows10.0.xxxxx | Debug
  3. The This Computer device will be pre-selected. On ARM64-based computers, you will have the option to use This Computer using emulation to debug x64 applications

Finally press F5 to start the debugging session.

You're all set!

You can also find additional VS Code topics, such as using snippets, updating existing apps to use VS Code.

Next Steps

Now that you've created and debugged your app, you can continue development or you can use Copilot to accelerate your workflow.

You can also learn more about: