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/ngrokbrew <span>install </span>ngrok/ngrok/ngrokbrew 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> ngrokyay <span>-S</span> ngrokyay -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.debwget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-stable-linux-amd64.debwget 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.debsudo 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 onlineAccount your-email@example.com <span>(</span>Plan: Free<span>)</span>Version 3.x.xRegion United States <span>(</span>us<span>)</span>Latency 15msWeb Interface http://127.0.0.1:4040Forwarding https://random-subdomain.ngrok-free.app -> http://127.0.0.1:8000Forwarding http://random-subdomain.ngrok-free.app -> http://127.0.0.1:8000Connections ttl opn rt1 rt5 p50 p900 0 0.00 0.00 0.00 0.00ngrok <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.00ngrok (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.apphttps://random-subdomain.ngrok-free.apphttps://random-subdomain.ngrok-free.app
Enter fullscreen mode Exit fullscreen mode
And you’re set to go
My Setup:
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!
暂无评论内容