Ngrok is a reverse proxy that allows you to expose your locally running web service to other developers. It’s a timesaver for developers when it comes down to showcasing a project. Follow along and learn how you can put this into your toolbelt of applications!
Howdy everyone! Have you ever wanted to showcase an amazing project that you built at a hackathon; or show a client the progress of the app you’re building without deploying it to some server? A reverse proxy tool like ngrok can solve this. Let’s see how it works.
We’ll need to start with a server running locally. If you don’t have a web app to test you can use a quick Sinatra “Hello, World”:
# app.rb require 'sinatra' get '/' do 'Hello World!' end
We need to make sure to have the Sinatra gem. Install the gem through Terminal using:
$ gem install sinatra
To run our app, go into Terminal and write:
$ ruby app.rb
And BOOOM!! 3-line Hello World app.
Ngrok is a tool made by Alan Shreve, who built it to be as accessible as possible by breaking it down into 3 painless steps:
Ta-dah! You’re a natural!
Here we will launch ngrok through both macOS/Linux and Windows. Let’s move the executable from my Downloads to our Home folder (marked as the tilde or ~) for our macOS/Linux friends. Open up a new terminal and write:
$ mv /your/path/to/ngrok ~
For Windows we are moving the ngrok.exe to my particular User directory. Mine is called Administrator but yours could be your name (i.e. “Prince Wilson”).
$ move \your\path\to\ngrok \Users\<PC_Name>
We are going to execute ngrok straight from our current directory. In macOS you prepend a script with a ‘./’ to make it execute and in Windows you would use ‘.\’. Otherwise your Terminal will look for ngrok in your PATH. ngrok requires at least two fields: 1) the protocol (i.e. HTTP) and 2) the port we want to expose. If you are running your own app pop in the port it’s using otherwise Sinatra defaults to port 4567.
$ ./ngrok http 4567
$ .\ngrok http 4567
It fires up with a bunch of outputs but we only care about the forwarding url right now. Mine is “http://da0dcb04.ngrok.io” or “http://f4fcf6f0.ngrok.io”. Notice that it points to where our sample server is, meaning anyone who hits our link will be forwarded to our sample app!
And with that, you have learned the basics of ngrok. But, there is so much more to learn! Try these to improve your experience:
If you have any questions or want to share your experience with ngrok feel free to send me a note over at email@example.com; I’d love to hear from you!