November 5, 2016
Test local web environments with ngrok
You developed a website or application and you now want to test it within a certain version of Internet Explorer or Microsoft Edge. If you are on a Mac, most likely you would use RemoteIE or download a VM (Virtual Machine) from this Microsoft website. Or maybe you just want a quick way to test your work on a different device and do not have a staging / test environment in place.
These are some scenarios you’d wish you could just share that localhost url you have been developing on so that you can quickly make adjustments and instantly see the result. Well, this is possible with a lightweight tool called ngrok. In this short tutorial I will show you how.
What is ngrok?
With ngrok you can create a secure tunnel to your localhost. It generates a public URL you can use to access that local url from somewhere else.
Step 1. Download ngrok
Go to the ngrok website and download a version that corresponds to your platform. Running on Windows? Installing should be as easy as extracting the folder. Continue to step 3.
Step 2. Installing ngrok
There are several ways to install ngrok. Below I will discuss two ways that don’t require you to have anything extra installed. However, if you are a Homebrew user, you could also install ngrok by
brew install ngrok.
- The first and most simple way is to simply extract the zip you just downloaded and run ngrok from there.
- The second and recommended way is to extract ngrok on a directory that is in your
$PATH. The advantage of going this way is that you’ll be able to run ngrok from anywhere on the command line.
To find out your
$PATH type the following in your terminal and hit enter.
This should return something like:
If you get a longer, colon separated result, it means you have multiple directories in your path. Any of these directories should suffice.
Step 3. Running ngrok
Now that we have everything in place, it’s time to run ngrok.
If you placed ngrok into a folder, navigate to that folder with your console/terminal and type:
./ngrok http -host-header=rewrite local.website.dev:80
If you have ngrok installed in your
$PATH you can run it by typing:
ngrok http -host-header=rewrite local.website.dev:80
local.website.dev to your own localhost url of the website you would like to create a tunnel to.
If everything went OK you should see something like this:
ngrok by @inconshreveable Session Status online Update update available (version 2.1.18, Ctrl-U to update) Version 2.1.14 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://906994d2.ngrok.io -> local.website.dev:80 Forwarding https://906994d2.ngrok.io -> local.website.dev:80 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00
HTTP / HTTPS urls at
Forwarding to access your tunnel. Note that these urls change everytime you start a new session. Aside from showing some connection info, ngrok will also log any HTTP requests made during its uptime:
HTTP Requests ------------- GET /favicon.ico 200 OK GET /img/placeholder.png 200 OK GET / 200 OK
Exit ngrok by pressing
CRTL + C.
Max amount of connections
ngrok can only handle a certain amount of connections. If it reaches its limit it will disconnect the tunnel. You would then have to restart ngrok.