Olivier Bossel
January 2018
M T W T F S S
     
1234567
891011121314
15161718192021
22232425262728
293031  

Categories


Olivier Bossel

Expose our localhost environment to the outside world using ngrok

Olivier BosselOlivier Bossel

When we develop on localhost, we usualy use some kind of simple HTTP server like node ones, MAMP, or whatever.
This is all good and we are all pretty happy about that. We have access to our app using our fancy http://localhost url. We are happy, but alone.

What if you would like to share your app to a collegue that is not on the same network than yours? What if you need to check your app on an SSL connection?

ngrok to the rescue

Ngrok is a simple “free” service that can help you with that. Here’s some of the features that it provide:

  1. Expose your localy hosted app/website to the outside world by providing you a http(s)://{something}.ngrok.io url.
  2. Allows you to have an SSL connection to your localhost environment.
  3. Inspect/replay the requests made to your local environment
  4. Custom subdomain (required a premium account)
  5. Password protect your exposed service
  6. And more…

Installing

To install, you have different options to choose from

  1. The official way : Downloading a zip file and unzip it
  2. Using NPM/Yarn : npm install ngrok -g. Package information here

It’s a good idea here to create a free account in order to increase the connections rate limit from 20 to 40. The process is quick and realy easy.

Get started

To start using ngrok, here’s three quick useful commands:

Expose our localhost:8080 port

ngrok http 8080

This will start up a tunnel to our localhost:8080 webapp and display this output in the terminal

You can see that ngrok gives us now access to 3 urls:

  1. http://d99a8a98.ngrok.io : Our webapp on standard http protocol
  2. https://d99a8a98.ngrok.io : Our webapp on secure https protocol
  3. http://127.0.0.1:4040 : A nice web interface to inspect our tunnel

Password protect our tunnel

Here’s how you can add a username/password authentication to your tunnel

ngrok http 8080 -auth="hello:world"

This will protect your tunnel with the login hello and password world

Exposing SSH server on port 22

Here’s how you can expose your local machine SSH port to the world. Pretty dangerous but do that if you know what you’re doing.

ngrok tcp 22

Keep in mind that as soon as you kill the ngrok process, your tunnel will be killed as well.

Go further

ngrok is way more powerful that what I explained in this blog post. Here’s a non-exhaustive features list that it provide:

  1. Wildcard domains
  2. Wildcard domain rules
  3. Listening on a reserved remote address
  4. Forwarding to servers on a different machine (non-local services)
  5. TLS Tunnels without certificate warnings
  6. Websockets
  7. Rewriting the Host header
  8. And more…

You will find the full documentation on the ngrok website


Also published on Medium.

Passionate interactive web developer from Switzerland. To be always in research of new technologies, improving workflows and contributing to the open source community are my primary motivations. The web community is moving so fast and being up to date is a daily job. THIS is where my passion for this domain come from. I'm an eternal dissatisfied and this is what makes me push each project at the limit and never give up on challenges. The web is an incredible way to communicate and to make the life simpler/better when it's correctly used and built. Be part of it's construction is a chance.

Comments 0
There are currently no comments.