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.
The Sample App
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
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:
- Download ngrok for your OS
- Unzip it
- Launch it!
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
