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.

  1. The first and most simple way is to simply extract the zip you just downloaded and run ngrok from there.
  2. 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.

echo $PATH

This should return something like:

usr/local/bin

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

Replace local.website.dev to your own localhost url of the website you would like to create a tunnel to.

All done!

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    

Use the 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.