How to setup a temporary public URL for localhost (Ngrok)

Story Time

In light of current events (circa 2020 Corona Virus), I noticed that the boot camps have switched to “remote” only and being able to present “in front” of the class no longer exists. I imagined that, students would still present their projects but now it would be done via Zoom screen share. I thought to myself, “Self, we are developers and we should have a better way to do this”. Years ago an old friend of mine introduced me to Ngrok and I have never looked back.

So I thought I would share how I installed and run Ngrok for my developer needs.

The Setup

  1. Open a terminal on (MacOS) and run the following brew command (assuming you have Homebrew installed)
brew cask install ngrok

2. Download the zipped file from Ngrok

Follow the 3 steps below.

Where I initially had a problem was I assumed that on Step 1

unzip /path/to/ngrok.zip 

was the actual command I had to type into the terminal 🤦‍♂️

I later realized that the /path/to/ was a suggestion and since the file was in my Downloads directory the following is what I had to enter in my terminal

unzip ~/Downloads/ngrok.zip

Note

unzip ~/Downloads/ngrok-stable-darwin-amd64.zip

Great! we have ngrok installed in our computer. So now we need to create a FREE account and get an auth_token (Step 2) and paste it into the terminal, like so:

./ngrok authtoken [paste your auth token]

The last setup item was being able to run the ngrok command from any directory while in the terminal.

# If you installed ngrok under your user directory
# we need to move it into the Applications directory
# There is a space between ngrok and /Applications
mv ~/ngrok /Applications/
# cd into your local bin directory
cd /usr/local/bin
# create a symlink
ln -s /Applications/ngrok ngrok

Done! Now we can call Ngrok GLOBALLY

Usage

now we open a terminal and type in the command

# make sure to match the port number from your localhost
ngrok http 5500

if you made the correct incantation (sorry i’ve been learning D & D) then we should see a similar success screen in our terminal.

So now anyone, a coding bootcamp student or developer presenting a prototype to client can share their project with just a URL.

Ngrok even has a real-time inspector UI that can be view by the developer at

http://127.0.0.1:4040

Ngrok has many other helpful features and even more creative uses and their documentation is very clean and easy to read.

Thanks for the read and I hope this has helped out some other developer. (Maybe I’ll get reached out by Ngrok for writing a wonderful article and be rewarded with an upgraded plan)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jason Gutierrez

.NET developer with a focus in functional programming. Oh yea, and I'm a foodie!