Blazor Server Development: Viewing on a phone


When running a Blazor (server) app when developing, it is a simple matter to run it on the development machine. But what about accessing it locally on another device such as a phone. ngrok can facilitate that.

When a Blazor app is launched om a desktop when developing it, the launch web site is by default not accessible from a local device on the same network, let alone one remote from it. Whilst there a suggested “fiddles” that can be attempted with the firewall etc. to facilitate local network access, ngrok provides a tunneling option to resolve this, especially when it has previously been used on the development machine

Ngrok has been used here for a sports Blazor server app that sends SMS confirmation messages where volunteers elect to perform an assisting task on competition day. So it was Ngrok already installed on the dev machine.

In the Properties/launchsettings.json file under the profiles section there will be an entry such as:

  "profiles": {
    "BlazorApp12": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7137;http://localhost:5214",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },

When the app launches a browser will launch with the URL:

https://localhost:7137

With ngrok installed (with it defined in the OS Path) at a command line just enter:

ngrok http https://localhost:7137

It will then respond including something like:

Forwarding                    http://26e6-49-188-173-102.ngrok-free.app -> https://localhost:7137
Forwarding                    https://26e6-49-188-173-102.ngrok-free.app -> https://localhost:7137

This means that the site can now be accessed “remotely” using the URL:

https://26e6-49-188-173-102.ngrok-free.app

Usage

  1. Install and setup ngrok (See Getting Started)
  2. Get the https PORT from launchSettings.json
  3. Run the Blazor app
  4. At a cmd prompt enter ngrok http https://localhost:PORT 1.Get the https forwarding URL similar to above.
  5. In a browser on a local device, such as a phone enter the https forwarding URL to access to the app.

Notes

  • Each time the Blazor is run a new ngrok generated URL is required. If developing the Blazor app in Visual Studio there is option to install via the Tools-Extension menu ngrok Extensions 2022 which then facilitates launching ngrok from the menu at Tools>Start ngrok Tunnel
  • The ngrok generated URL is accessible world wide. So it is probably a good idea to require some authentication, as discuss in Getting Started. Though that might not be necessary if repeatedly editing and restarting the app which will require a new ngrok generated URL.
 TopicSubtopic
<  Prev:   Wilderness Labs
   
 This Category Links 
Category:Web Sites Index:Web Sites
  Next: > GPS
<  Prev:   Jekyll