Test Localhost on Mobile Device

Here's how to test localhost on your mobile device via ngrok.

Scenario

You have a website that you've been developing on your desktop, and it looks great. And you've been using the device toolbar in browser devtools to test on mobile-sized screens. But it's just not the same. You want to flick the glass with your finger. You want to see what horrors mobile Safari has inflicted on your designs.

Conceptually, you want to be able to go to http://localhost:3000 on your phone and see your website.

Solution

To do that, you need a network tunnel, where your localhost is exposed beyond your computer. You can address it from the Internet and thus anything with a web browser.

First, start your local server on your computer as normal:

clj -M:server # or whatever your command is

Now your app is running on localhost:3000.

Next, you need a tunnel tool. Enter, ngrok. Go to the site and sign up for a free account.

Then go to the ngrok /get-started/your-authtoken page. Copy your token value. Let's say it's abc123. Now configure your local ngrok with this token:

npx ngrok config add-authtoken abc123

As the final step, you now run ngrok against the port of your local server:

npx ngrok http 3000

This will take over your terminal window and give you some information output, including a line like this:

Forwarding     https://3159-38-109-229-215.ngrok-free.app -> http://localhost:3000

Now, if you go to that ngrok-free.app address:

xdg-open https://3159-38-109-229-215.ngrok-free.app

You will indicate that, "Yes", you really want to see your site, and then, magically, you'll see localhost on the Internet.