Ngrok Intro

In developing an app where I needed to have a public URL on the web, I came across Ngrok. Ngrok is a useful utility, which provides a publicly accessible web URL to any locally hosted application. In my case, a nodejs web app. It also has authentication for secure tunnel access.

As the official site states, you can:

• 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

How it Works

1. Run the local app, so that it can be accessed at your localhost. Example: http://localhost:3000

2. Now with ngrok executable (available for different platforms like Mac, Windows, etc.) initiate a tunnel to the localhost on the desired port. We will see this detail in the upcoming sections.

3. Once ngrok sets up the tunnel, it provides a web-accessible URL.

4. Now share the publicly accessible url with the end-users who would hit the locally hosted application.
   End users hit the web URL on the internet.

5. When the request arrives at the ngrok server (As the URL is in a subdomain of ngrok.com the requests will initially land to ngrok server), and it will resolve the URL to the app that it needs to tunnel to.

6. Ngrok forwards the request to the tunnel created in Step 2.

7. The forwarded request connects to the locally hosted app.

Installation

1. Create a free account on Ngrok to get an auth token for your account.

2. Download client library depending on your operating system.

3. Unzip the downloaded package.

4. Update the ngrok configuration file with your auth token by running ./ngrok authtoken {your-auth-token} command on the terminal/command prompt.

5. After auth token gets updated, start the tunnel for your locally hosted applications.

6. Run ./ngrok http 80 command to start the tunnel on port 80 for localhost. An application running on this port is accessible through the tunneled https URL.

There are more features that you can do with Ngrok that you can read about on their official site.

References

• https://ngrok.com/docs
• https://www.softwaretestinghelp.com/ngrok-introduction/
• https://www.npmjs.com/package/ngrok