Get Started on VS Code
This guide will walk you through the set-up process for building WebAssembly apps with Uno under Windows, Linux, or macOS.
Prerequisites
.NET Core SDK
- .NET Core 3.1 SDK (version 3.1.8 (SDK 3.1.402) or later)
- .NET Core 5.0 SDK (version 5.0 (SDK 5.0.100) or later)
Use
dotnet --version
from the terminal to get the version installed.
Create an Uno Platform project
Install Uno Platform Template
Launch Visual Studio Code and open a new terminal.
In the terminal, type the following to install the Uno Platform templates:
dotnet new -i Uno.ProjectTemplates.Dotnet
Create the project
In the terminal, type the following to create a new project:
dotnet new unoapp -o MyApp -ios=false -android=false -macos=false -uwp=false --vscodeWasm
MyApp
is the name you want to give to your project.
This will create a solution that only contains the WebAssembly platform support.
Prepare the WebAssembly application for debugging
In Visual Studio Code install these extensions:
Configure this extension with the
debug.javascript.usePreview
setting set to true. (File -> Preference -> Settings and search forUse preview
).Open the project using Visual Studio Code. In the terminal type
code ./MyApp
For this command to work you need to previously have configured Visual Studio Code to be launched from the terminal.
Visual Studio Code will ask to restore the NuGet packages.
Modify the template
In
MainPage.xaml
, replace the Grid's content with the following:<StackPanel> <TextBlock x:Name="txt" Text="Hello, world!" Margin="20" FontSize="30" /> <Button Content="click" Click="{x:Bind OnClick}" /> </StackPanel>
In your
MainPage.xaml.cs
, add the following method:private void OnClick() { var dt = DateTime.Now.ToString(); txt.Text = dt; }
Run and Debug the application
Starting the app with the WebAssembly debugger is a two-step process. Move to the Run tab on Visual Studio Code and
Start the app first using the .NET Core Launch (Uno Platform App) launch configuration
Then start the browser using the .NET Core Debug Uno Platform WebAssembly in Chrome launch configuration (requires Chrome).
To use the latest stable release of Edge instead of Chrome, change the type of the launch configuration in
.vscode/launch.json
frompwa-chrome
topwa-msedge
Place a breakpoint inside the
OnClick
methodClick the button in the app, and the breakpoint will hit
Updating an existing application to work with VS Code
If you already have an Uno application, you can add some missing support files for VS Code to recognize your project.
Here's how to do this:
Use the same command line above to create a project with the same name as your current project, in a different location.
Once created, copy the generated
.vscode
folder next to your.sln
fileUpdate the
Uno.UI
package version to the latest stable versionUpdate the
Uno.Wasm.Bootstrap
package to 1.3.4 or later versionAdd a reference to
Uno.Wasm.Bootstrap.DevServer
version 1.3.4 or later.In your Wasm project file, if you had a
<DotNetCliToolReference />
line, remove itRestore your nuget packages
dotnet restore
You should now be in the same configuration as the generated template files.