Test Uno Platform WebAssembly apps on mobile devices using Dev Tunnels

Visual Studio Uno Platform .NET Core

one year ago

Microsoft has launched the first public preview of long-awaited Visual Studio feature Dev Tunnels. This provides port tunneling (enabling connections between machines that cannot directly connect to each other), which helps especially when you want to test your locally running web applications on physical mobile devices. In this post I will show you how to use this feature to test your Uno Platform WebAssembly apps, which makes testing mobile-specific APIs much easier (looking at you, device sensor APIs ? )!

Enabling Dev Tunnels Preview

Dev Tunnels are now included as a preview feature in Visual Studio 2022 17.4 and newer. The feature is disabled by default, so to get started, we need to head to Tools - Options... menu and select Preview Features in the sidebar. On the settings page check Enable dev tunnels for Web Applications.

Enabling Dev Tunnels in the VS dialog

Enabling Dev Tunnels

Configuring Uno Platform app

To use this feature, we need to create an Uno Platform app that includes the ASP.NET host server project. When creating an app via the new Uno Platform App template dialog, we can include it just by checking the ASP.NET Core Hosted option.

Adding ASP.NET Hosted option in new Uno App dialog

Adding ASP.NET Hosted option in new Uno App dialog

If your existing Uno Platform app project was not created with this option, it is quite easy to recreate it by creating a temporary app using this template and copying this specific project to your existing solution. Next, we need to enable Dev Tunnels for our app in the launchSettings.json file we can find in the Properties folder under the YourAppName.Server project in the solution. We just need to add two Dev Tunnels properties for this:

To get further information about the possible devTunnelAccess options, check out the official blogpost. Now it is time to launch your application. Instead of launching a localhost URL, it will open a URL with the format something.devtunnels.ms. On first launch you will be presented with a notice to enable access to the URL, but after you confirm, you will be able to access your application. If we now open the same URL on any mobile device, our Uno Platform app will load there! Happy coding!

Uno Platform WebAssembly app running via Dev Tunnels

Uno Platform WebAssembly app running via Dev Tunnels