Creating an app with VS Code

Note

Make sure to setup your environment first by following our instructions.

Create the App

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

Open a browser and navigate to the online Live Wizard
Configure your new project by providing a project name, then click Start
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.
Click the Create button on the top right corner, then click the Copy button
In your terminal, navigate to the folder that will contain your new app.
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:
```
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 here.

Debug the App

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

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 :

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

VS Code UI

In the status bar :

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

status bar

Finally, press F5 to start the debugging session.

In VS Code :

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

VS Code UI

In the status bar :

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

status bar

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:

Install the WSL extension
In the control palette, select WSL: Connect to WSL
Once connected to WSL, ensure that the Uno Platform extension is installed
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:

In the .vscode/launch.json, find the Uno Platform Desktop (Debug) section
In the env section, add the following:
```
"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.

In VS Code :

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

VS Code UI

In the status bar :

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

status bar

Finally, press F5 to start the debugging session.

Note

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

In VS Code :

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

VS Code UI

In the status bar :

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

status bar

Finally, press F5 to start the debugging session.

Tip

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

Note

Debugging for Mac Catalyst is only possible when running locally (or remotely through Remote SSH) on a macOS machine.

In VS Code :

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

VS Code UI

In the status bar :

Just after the Uno logo ensure the MyApp project is selected - by default MyApp.sln is selected
Next click on the target framework to select net9.0-maccatalyst | Debug
The This Mac device will be pre-selected. On Apple Silicon (arm64) Macs you will have the option to use This Mac using Rosetta to debug x64 applications

status bar

Finally, press F5 to start the debugging session.

Note

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

In VS Code :

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

VS Code UI

In the status bar :

Just after the Uno logo ensure the MyApp project is selected - by default MyApp.sln is selected
Next click on the target framework to select net9.0-windows10.0.xxxxx | Debug
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

status bar

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're Created and Debug the App.

Learn more about:

Uno Platform features and architecture
Hot Reload feature
Uno Platform App solution structure
Troubleshooting
How-tos and Tutorials See real-world examples with working code.
List of views implemented in Uno for the set of available controls and their properties.