« Back to Blog

Behind the Scenes at Jungle Disk - Testing Local Services Outside Your Network

By Ryan Veazey
Nov 28, 2016

Hi, my name is Ryan Veazey and I’m a developer at Jungle Disk focusing on our websites and services. I wanted to walk you through a few best practices and tips for when you are developing a website or service as you’ll often run into situations where you need to run a test on your computer from outside your network. A few examples are:

Going through a process of packaging and deploying your work to a public server can be a huge drain on productivity. Trying to figure out how to route a public-facing endpoint to your local machine through firewalls and port restrictions is also not a solution for most people. That’s where tunneling and Ngrok come in.

Ngrok

Ngrok is a service which will create a publicly accessible domain which is a tunnel to a port on your local host.

Installation

The program can be downloaded and installed for free without creating an account. There are some features which are only available to users with accounts. Paid accounts receive even more features, such as the ability to specify custom domains.

You can download the client here for Mac, Windows and Linux. It’s a command-line program so you’ll need to run it from a Terminal/Command Prompt.

Mac users who use homebrew can alternatively install it by running brew cask install ngrok.

Usage

The basic usage is ngrok <protocol> <port>. For example, if you’re running a local web server on port 4000, you can run the following.

ngrok http 4000

That’s it! You’ve made yourself a tunnel. The output will look something like this:

ngrok by @inconshreveable


Session Status                online
Version                       2.1.18
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://6c741fec.ngrok.io -> localhost:4000
Forwarding                    https://6c741fec.ngrok.io -> localhost:4000


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

The most important lines here are the Forwarding lines. These tell you the URL where you can reach your site. These URLs are randomly generated each time you run ngrok (though this can be changed on a paid plan). If you visit these URLs in your browser, you should see the same site you see locally at http://localhost:4000. More importantly, any other person or service will see the same site!

If you visit the address at the line labeled Web Interface, which should generally be http://127.0.0.1:4040, you can see a web page showing you a list of the web requests including HTTP header information.

Example

Here’s a simple screencast showing a test version of the Jungle Disk website being reached via ngrok. When the site is visited in a browser (not shown), the program lists the resources requested and the HTTP status codes.

Here’s a view of the Web Interface

Common Problems

If your website generates URLs that include the domain for links or resources inside your site (stylesheets or javascript) these will not work because they will be pointed at a domain which is not the same as your tunnel endpoint.

You can easily solve this by using relative URLs instead.

You can’t Run Ngrok on the Server

If you don’t have access to run ngrok on a server or you’re running it inside of a virtual machine or container on your computer, you can still expose it via ngrok by specifying the address of the server in the command:

ngrok http 192.168.1.100:4000

Documentation

Alternatives

If for some reason ngrok doesn’t work for your needs, here two alternatives:

Exposing your in-development version of a service via tunneling is a fast and easy solution to getting quick feedback on what you’re working on, shortening development cycles and making your job just a little bit easier.