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 is a service which will create a publicly accessible domain which is a tunnel to a port on your local host.
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.
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.
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
You can easily solve this by using relative URLs instead.
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
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.