Using Ngrok for Multiple Ports

Ngrok is a useful and easy way to expose your development machine to the internet. It’s primarily used for demonstrating your work to clients.

Basic Usage

At the simplest level, you would expose your localhost (port 80), and the client would access it via a domain. For example:

ngrok http http://localhost

This automatically provides you with an external domain, like:

https://69156866a3b1.ngrok.app -> http://localhost:80

You can then direct your client to visit https://69156866a3b1.ngrok.app.

Static Domains

For webhook testing, you typically need a static domain, which Ngrok provides for free. Here’s how to set it up:

1. Go to the Ngrok dashboard
2. Navigate to “Domains”
3. Add a domain (e.g., pleasantly-flowing-dig.ngrok-free.app)

You can then use your static domain like this:

ngrok http --url=pleasantly-flowing-dig.ngrok-free.app 80

Handling Multiple Ports

Let’s say you have a client/server app running on your development machine:

• Frontend running on localhost:3000 (e.g., a Vite build)
• API server on localhost:8080 (receiving webhooks)

To expose both services, you need to:

• Map port 8080 to the static domain
• Map port 3000 to a dynamic domain

You might think running multiple Ngrok instances would work:

ngrok http --url=pleasantly-flowing-dig.ngrok-free.app 8080
ngrok http http://localhost:3000

However, this won’t work as Ngrok doesn’t support running multiple instances. Instead, use a configuration file approach.

Configuration File Solution

Create a ngrok.yml file:

version: "3"
agent:
  authtoken: your-token
endpoints:
  - name: api
    url: https://your-static-domain.ngrok-free.app
    upstream:
      url: 8080
  - name: frontend
    upstream:
      url: 3000

Then start Ngrok with:

ngrok start --config=ngrok.yml --all

This configuration allows you to expose multiple ports through a single Ngrok instance.