Port Forwarding with Ngrok : Quick Guide

Scenario:

You’re building a mobile app solo. The backend is ready, and now you’re working on the UI. You run your server locally and try making requests from the app—nothing works.

Why? Your base URL (http://localhost:<port> or http://127.0.0.1:<port>) points to your local machine, but your mobile device has its own localhost.

Realizing this, you deploy your backend to a free online service, but then:

• The server shuts down after minutes of inactivity.
• Network requests are painfully slow.

Ngrok to the rescue ,

What is Ngrok?: Ngrok, is a tool that allows you expose your local server to the internet securely.

Getting Started

Head on to Ngrok – Signup

• Signup, and…
• Get your auth_token from the dashboard

MacOS:

brew <span>install </span>ngrok/ngrok/ngrok
brew <span>install </span>ngrok/ngrok/ngrok
brew install ngrok/ngrok/ngrok

Enter fullscreen mode Exit fullscreen mode

ngrok config add-authtoken <your_auth_token>
ngrok config add-authtoken <your_auth_token>
ngrok config add-authtoken <your_auth_token>

Enter fullscreen mode Exit fullscreen mode

Arch Linux

yay <span>-S</span> ngrok
yay <span>-S</span> ngrok
yay -S ngrok

Enter fullscreen mode Exit fullscreen mode

ngrok config add-authtoken <your_auth_token>
ngrok config add-authtoken <your_auth_token>
ngrok config add-authtoken <your_auth_token>

Enter fullscreen mode Exit fullscreen mode

Debian

wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-stable-linux-amd64.deb
wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-stable-linux-amd64.deb
wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-stable-linux-amd64.deb

Enter fullscreen mode Exit fullscreen mode

<span>sudo </span>dpkg <span>-i</span> ngrok-stable-linux-amd64.deb
<span>sudo </span>dpkg <span>-i</span> ngrok-stable-linux-amd64.deb
sudo dpkg -i ngrok-stable-linux-amd64.deb

Enter fullscreen mode Exit fullscreen mode

ngrok config add-authtoken <your_auth_token>
ngrok config add-authtoken <your_auth_token>
ngrok config add-authtoken <your_auth_token>

Enter fullscreen mode Exit fullscreen mode

What’s Next

ngrok http http://127.0.0.1:<your-port>
ngrok http http://127.0.0.1:<your-port>
ngrok http http://127.0.0.1:<your-port>

Enter fullscreen mode Exit fullscreen mode

Now ngrok will do it’s thing and give you the following results.

ngrok                                                        <span>(</span>Ctrl+C to quit<span>)</span>
Session Status                online
Account                       your-email@example.com <span>(</span>Plan: Free<span>)</span>
Version                       3.x.x
Region                        United States <span>(</span>us<span>)</span>
Latency                       15ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://random-subdomain.ngrok-free.app -> http://127.0.0.1:8000
Forwarding                    http://random-subdomain.ngrok-free.app  -> http://127.0.0.1:8000
Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
ngrok                                                        <span>(</span>Ctrl+C to quit<span>)</span>

Session Status                online
Account                       your-email@example.com <span>(</span>Plan: Free<span>)</span>
Version                       3.x.x
Region                        United States <span>(</span>us<span>)</span>
Latency                       15ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://random-subdomain.ngrok-free.app -> http://127.0.0.1:8000
Forwarding                    http://random-subdomain.ngrok-free.app  -> http://127.0.0.1:8000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
ngrok                                                        (Ctrl+C to quit)

Session Status                online
Account                       your-email@example.com (Plan: Free)
Version                       3.x.x
Region                        United States (us)
Latency                       15ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://random-subdomain.ngrok-free.app -> http://127.0.0.1:8000
Forwarding                    http://random-subdomain.ngrok-free.app  -> http://127.0.0.1:8000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

Enter fullscreen mode Exit fullscreen mode

Add the following to your apps build configuration.

https://random-subdomain.ngrok-free.app
https://random-subdomain.ngrok-free.app
https://random-subdomain.ngrok-free.app

Enter fullscreen mode Exit fullscreen mode

And you’re set to go

My Setup:

My running Server:

Ngrok Command:

Ngrok in action:

Conclusion

Ngrok is a game-changer when it comes to local development and testing. It eliminates the hassle of exposing your local server to the internet, making it easy to test APIs, webhooks, and mobile applications without deployment delays. With just a few commands, you get a secure, public URL that seamlessly tunnels traffic to your local machine.

Now, instead of struggling with localhost limitations or slow, unreliable free hosting, you can integrate Ngrok into your workflow and focus on building your app.

Give it a try, and happy coding!

原文链接：Port Forwarding with Ngrok : Quick Guide