How to Test JavaScript Web Applications on Mobile Without Deploying (in 1 minute!)

It’s difficult to get a real sense of how our JavaScript web applications will look and behave on mobile devices (the device toolbar in browser Developer Tools can only go so far).

Suppose we have applications written in React (Next), Vue, Svelte, or any JavaScript framework that runs on a local server.

How can we quickly test all of these on mobile devices without deploying our site live?

The easiest and fastest way to test is to expose our local server ports to the internet.

This means that we can share anything running on localhost with our mobile devices (live reloading will even be reflected on mobile!).

Two very popular options are ngrok and localtunnel, both of which are super easy to set up in one minute.

1. Install the npm package

First things first. We need to install either localtunnel or ngrok globally.

Install localtunnel

I personally use localtunnel.

npm install -g localtunnel

Install ngrok

Feel free to try out ngrok.

npm install -g ngrok

2. Start our development server locally

We’ll want to run the command to spin up our local development server.

Maybe it’s npm start or npm run dev, or some custom command.

Let’s say we’re using React’s boilerplate package.json.

npm start

Suppose our application is running on port 3000: http://localhost:3000.

3. Connect to tunnel server

Lastly, we’ll want to open up a new terminal to setup and connect to the tunnel server.

Connect with localtunnel

For localtunnel, we’ll want to use the lt command and --port flag to specify the port for our development server.

lt --port 3000

localtunnel will output our URL like so:

your url is: https://short-emu-9.loca.lt

We can head over to that URL (https://short-emu-9.loca.lt) on mobile to see our site running from our development server.

Connect with ngrok

For ngrok, we’ll need to first authenticate our ngrok agent, which requires obtaining our personal Authtoken in our ngrok dashboard.

We only need to authenticate once, so if we’ve already done this once, we won’t need to do it again on this machine.

Let’s need to sign up for an ngrok account and go to the Your Authtoken page.

Once we obtain the token, we can authenticate our agent using ngrok authtoken.

This example uses a random token.

ngrok authtoken FtZBSpF32LKITt6huguK92AieM2_xAt7plmpJvGNPfR8XZnvp
# Authtoken saved to configuration file: /path/to/ngrok.yml

Finally, we can use the ngrok command and http to specify the port.

ngrok http 3000

The output is slightly more verbose than the localtunnel output.

ngrok by @inconshreveable                                     (Ctrl+C to quit)

Session Status     online
Session Expires    1 hour, 59 minutes
Version            2.3.40
Region             United States (us)
Web Interface      http://127.0.0.1:4040
Forwarding         http://3af8-74-111-108-171.ngrok.io -> http://localhost:3000      
Forwarding         https://3af8-74-111-108-171.ngrok.io -> http://localhost:3000     

Connections        ttl     opn     rt1     rt5     p50     p90     
                   0       0       0.00    0.00    0.00    0.00    

We can head over to the Forwarding URL (http://3af8-74-111-108-171.ngrok.io) on mobile to see our site running from our development server.

The hardest part of this process is copying that URL into the browser on our mobile device.