Although it's improved in recent times, one of the painful aspects of web development can be testing that your site works well on mobile devices.
This particularly applies when you're developing on your local laptop with wireless network connection, and want to view the site on a mobile device, without first having to deploy to a staging server.
One tool that takes much of this pain away is ngrok, which is described on the site thusly:
“I want to securely expose a local web server to the internet and capture all traffic for detailed inspection and replay.”
ngrok creates a tunnel from the public internet (http://subdomain.ngrok.com) to a port on your local machine. You can give this URL to anyone to allow them to try out a web site you're developing without doing any deployment.
What this means is that, when we're webserving a site such as
http://mebooks.localhost on our laptop, within a couple of minutes we can be visiting a URL such as http://mebooks.ngrok.com in a mobile browser and seeing the same site; as long as the mobile browser has a connection to the internet, it should be able to load our page.
wget https://api.equinox.io/1/Applications/ap_pJSFC5wQYkAyI0FIVwKYs9h1hW/Updates/Asset/ngrok.zip?os=darwin&arch=amd64&channel=stable cd ~/workspace && mkdir ngrok && mv ngrok.zip ngrok && cd ngrok
Once installed, usage is as simple as:
# Serve all port 80 traffic via ngrok ./ngrok 80
Once connected, we'll see something like the following:
ngrok (Ctrl+C to quit) Tunnel Status online Version 1.7/1.6 Forwarding http://2ebd2fe0.ngrok.com -> 127.0.0.1:80 Forwarding https://2ebd2fe0.ngrok.com -> 127.0.0.1:80 Web Interface 127.0.0.1:4040 # Conn 41 Avg Conn Time 260.80ms HTTP Requests ------------- GET /assets/images/141207361_ 200 OK GET /assets/images/144566138_ 200 OK GET /assets/images/142808332_ 200 OK GET /assets/images/83691787_t 200 OK
Ngrok has opened up a tunnel from our local machine to the ngrok site, and we can then visit http://2ebd2fe0.ngrok.com in our mobile device browser to see our locally-served site.
You'll probably need to add the following directive to your vhost conf (presuming you're using apache):
# This goes, say, below 'ServerName mebooks.localhost' ServerAlias 2ebd2fe0.ngrok.com
The subdomain assigned by ngrok is not guaranteed to last from one session to the next, so ideally we want to use a custom subdomain such as
We can easily specify a custom subdomain when starting ngrok:
./ngrok -subdomain mebooks 80
However, while we don't have to pay to be able to use a custom domain, unless we've paid a donation to ngrok these subdomains are on a first-come basis; if someone else has paid to reserve our subdomain or is currently using ngrok with the specified subdomain, then we won't be able to use it.
Once logged in, we'll find a auth token on our dashboard that allows us to identify ourselves. This auth token only needs to be specified once, as it then gets saved in
Typically, on our local webserver we'll be serving our site using a name-based virtual host, expecting to see our site at http://mebooks.localhost, and having the following in our
To ensure that our webserver can correctly capture requests from http://mebooks.ngrok.com, we need to ensure that our vhost has the
ServerAlias mebooks.ngrok.com set, and our webserver has been restarted.
Note that we can also see a nice page showing our traffic served at http://localhost:4040/http/in