Let’s expose a local webserver to the internet with ngrok.

Anjula Shanaka
Dec 31, 2020 · 3 min read

Have you ever wanted to expose your local webserver to the internet? Probably the answer is yes. I faced the same problem when I wanted to expose my webapp. Today I’m going to talk about one of the solutions that I found. First of all, let me explain my problem briefly.

As a volunteer at the Sustainable Education Foundation — SEF. I was working on a Github leaderboard which is a leaderboard for the contributors of SEF. As you can see I need to use Github webhook to get the data. The problem was when I’m working on the project locally, the webhook can’t access the local server. That’s when I had to use ngrok to expose my local webserver to the internet so that I can get the Github payload via the webhook.

What is ngrok?

Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.

Installation

All you have to do is download ngrok base on your OS using this link.

Expose a local webserver to the internet

ngrok allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on.

Let me demonstrate how it works,

I started my web server on port 9090.

localhost:9090

Then I ran the ngrok http 9090 command to inform ngrok to expose the webserver that hosted on 9090 port.

As you can see ngrok has exposed the given port to the internet as https://88da17f166f6.ngrok.io/.

ngrok console

Once you are done with your work you can quit the console and it will stop exposing your server. Isn’t that cool. The amazing thing is that ngrok gives us more than that. For example,

you can use ngrok to,

  • Run personal cloud services from your home
  • Demo websites without deploying
  • Build webhook consumers on your dev machine
  • Test mobile apps connected to your locally running backend
  • Stable addresses for your connected devices that are deployed in the field

As you can see ngrok is a great service that gives us better solutions to our problems.

This is a small introduction about the ngrok. Don’t forget to go through the documentation to get a better idea. I hope you liked it don’t forget to read my previous blog articles. Until the next one, Stay safe! ✌️

References:

[1]. ngrok.[2020] Docs [Online]. Available at: https://ngrok.com/docs [Accessed 31 December 2020]

Weekly Webtips

Explore the world of web technologies through a series of tutorials