NodeJS

What is Ngrok and How to Set Up Ngrok for Local Development

Ngrok is a technique where developers are able to share their development server over the internet securely. It develops a web address which forwards all traffic to a particular port in your local computer. This is mainly useful when verifying webhooks, APIs or when working on a shared project with friends without having to deploy your project on a separate host server.

Key Features of Ngrok

Secure Tunnels: Uses HTTPS and encrypted connections to promote secure transfer of data between it and the user.
Webhook Testing: Makes testing of services such as Stripe, GitHub, or Twilio for instance easier especially as they require to act like a public URL to handle incoming webhooks.
Custom Subdomains: Presents the ability to setup own URLs for your tunnels (Paid subscription).
Analytics Dashboard: It presents real time traffic conditions that would be useful in debugging and monitoring.

How to Set Up Ngrok for Local Development

Step 1: Install Ngrok

Visit Ngrok's official website, and download the binary for your operative system. Install the downloaded package:

Windows: Save it to a folder, and create a System Environment Variable which will be the path to the ngrok.exe.
macOS/Linux: Extract the archive and move it to /usr/local/bin or a directory of your PATH list.

Alternatively, use a package manager:

On macOS: sudo brew install ngrok h2, ngrok

On Ubuntu: oneclick@oneclick:$ sudo snap install ngrok

Step 2: Authenticate Ngrok

Create an account at the Ngrok website for free.
Once you are logged in, go to Dashboard > Your Authtoken.
Authenticate Ngrok by running the following command in your terminal:

oneclick@oneclick:$ ngrok config add-authtoken YOUR_AUTH_TOKEN

Step 3: Start a Local Server Make sure you already have a web server accessible from your localhost and it is running specifically at a particular port. For example:

Node.Js / React.js

oneclick@oneclick:$ npm run start

Laravel

oneclick@oneclick:$ php artisan serve

Python

oneclick@oneclick:$ python -m http.server 8000

Step 4: Start an Ngrok Tunnel

Make sure you already have a web server accessible from your localhost and it is running specifically at a particular port. For example:

oneclick@oneclick:$ ngrok http SERVER_PORT

oneclick@oneclick:$ ngrok http 8000

http 8000: Command that instructs Ngrok to create a tunnel that forwards all the requests received on port 8000.
After running the command, Ngrok will display output like this: