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

Story Time

When I went through a Coding Bootcamp years ago, we would present our projects in front of the class and talk through our code and show off a little to our peers or even take in constructive criticism so we could learn and improve. This brought back memories of “Show-n-Tell’ from high school.

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

There are a few options out there:

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

even the ngrok.zip is a little misleading. When I downloaded the file it was named ngrok-stable-darwin-amd64.zip. So I corrected the text in my terminal

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

No matter which IDE you use (IntelliJ, Visual Studio, Visual Studio Code, etc.) you can now run your local dev server which typically will be 127.0.0.1:3000 or some other port number. The key here is to identify the port number we are using.

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)