How to Make Your Localhost Port Accessible By Others

Photo by Anna Shvets: https://www.pexels.com/photo/people-on-a-video-call-4226140/

So I think we can agree that localhost should be yours and yours alone! And making it accessible by other exposes you to security risks. But there’s a trick to make some port in your localhost to be accessible by anyone in the internet, and it is by using a tunneling service, one of the most popular of which is ngrok.

What is Ngrok?

To put it simply ngrok is a port-forwarding service that allows you to share services/apps running in your pc to others. This process is really easy and simple to do and I often use it to when I want to test my APIs in development or staging environment.

How To Use Ngrok?

In this showcase, I’m gonna be using a minimal nodejs app (https://github.com/margunwa123/express-hello-world) you can clone it on your own. This is nodejs app, which means that if you don’t have npm installed, download nodejs because it’s bundled with npm. You can also use your app if you have one already.

First, let’s run this command in the express-hello-world directory:

npm install
npm run dev

If the app is running, open your http://localhost:3000 and see that it prints hello world to the screen

Yay! Hello world

Now, let’s setup ngrok, open https://ngrok.com/ and click “sign up”, now I’m gonna wait until you finished the authentication process.

.

.

If you’re done, let’s install ngrok. Run one of these commands:

# in mac
brew install ngrok
# in linux
sudo tar xvzf ~/Downloads/ngrok-v3-stable-linux-amd64.tgz -C /usr/local/bin
# in windows
choco install ngrok

Or alternatively, just go to https://ngrok.com/download and download the file based on your operating system.

Now, let’s authenticate your ngrok from your terminal. Open up your terminal and type up this line:

ngrok config add-authtoken <your-token>

You can get your auth token here.

After adding your authtoken, you’re set up to run ngrok on the terminal! Run this command to start sharing your local app everywhere:

ngrok http <port>

Where the <port> is on what port your app is running. If you’re using the hello-world repository, the port is 3000. After running the command, your terminal should look like this:

Now, copy the highlighted part (the Forwarding part) and open up the browser on your computer, or anywhere! Voila, your app is now online with just a simple command

Now you can access it anywhere!

My usecase of using ngrok / port-forwarding tool are:

• sharing an app to friend to test
• testing an api callback from a 3rd-service application

But obviously, you can do it for more, and ngrok even supports setup-ing a production support & managing certificates, which, really helps in a production setting (and a lot more)! Beware, some of the tools are paid though so you might want to consider some alternative or just learn devops (shrugs).

Afterthoughts

While writing this article, I searched for some alternatives to ngrok, and here I can list some of their pro/cons compared with ngrok:

• LocalTunnel
  + no auth, open source & highly maintained, command is pretty intuitive
  - must use npm to download it, doesn’t support tls connection as of now
• Serveo
  + no auth, can be used with ssh
  - command is less intuitive, doesn’t support tls connection

So yeah, you can use any of them if you want to, since all of them all free (with localtunnel being the most free one). Depending on your usecase you can use one or another.

Hope this article helps you. Thankyou for reading