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.
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.
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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!
1 thought on “Test Uno Platform WebAssembly apps on mobile devices using Dev Tunnels”