Test Uno Platform WebAssembly apps on mobile devices using Dev Tunnels

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:


{
"profiles": {
"MyUnoApp.Server": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:51042;http://localhost:51043",
"devTunnelEnabled": true,
"devTunnelAccess": "public"
}
}
}

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

 

Buy me a coffeeBuy me a coffee

1 thought on “Test Uno Platform WebAssembly apps on mobile devices using Dev Tunnels”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.