Exposing your local environment for mobile testing | ngrok Setup

ngrok.md

Exposing your local environment for mobile testing | ngrok Setup

This guide describes the setup process to expose your local (e.g. https://localhost:3000) to the outside web.

This is helpful, for example, when attempting to test and inspect local code changes on a mobile device.

Install

Visit ngrok's website, setup an account & grab the exe

Setup

Follow the steps outlined at the installer page.

Add the path to ngrok to your system's environment variables >> path

If you have a command prompt open, run refreshenv in order to update the enviroment variables within this terminal.

Run the command to setup your auth token, it will look like:-

ngrok authtoken 1WRE7FjLaaP5YtRVnGHwJRPiZWHP_3A8nVBN5Yab3PTp1FVMP

The simply run:- ngrok http https://custom.localhost:3000 (replacing the URL with your local URL)

You may now visit the URL provided in the ngrok output, which should look like the below:-

Session Status                online
Account                       dr.crazyhost@theinterweb.com (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://c568b5724410.ngrok.io -> https://custom.localhost:3000
Forwarding                    https://c568b5724410.ngrok.io -> https://custom.localhost:3000

In this instance, our URL would be https://c568b5724410.ngrok.io

Known Issues

Your mileage may vary, for instance, you may need to manually override any local nginx path directives that point back to your local url.

Port forwarding in Chrome Inspect can also be helpful too!

:)