Blazor Server Development: Viewing on a phone
web blazor ngrok
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.
Links
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
- Install and setup ngrok (See Getting Started)
- Get the https PORT from launchSettings.json
- Run the Blazor app
- At a cmd prompt enter
ngrok http https://localhost:PORT
1.Get the https forwarding URL similar to above. - 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.
Topic | Subtopic | |
< Prev: | Wilderness Labs | About Project Lab V3 |
This Category Links | ||
Category: | Web Sites Index: | Web Sites |
Next: > | GPS | IOT Hub Mapping App |
< Prev: | Jekyll | New post and Clone PS scripts |