🛰️ When Localhost Leaves Home: Ngrok and the magic of tunneling to the Internet

Developers know that localhost is a safe place.
It's our sandbox, our little isolated world where everything works (more or less) until we have to show it to someone else.

Then comes the fateful moment:

"Can you show me the project?"
And suddenly we remember that our masterpiece lives only on our laptop.

This is where Ngrok comes in, a little tool that does something very simple but very powerful: makes your local server accessible from the Internet.

🔗 Do you like Techelopment? Check out the site for all the details!

🚀 What is Ngrok (in simple terms)

Ngrok creates a secure tunnel between your computer and a temporary public domain.
Basically, if you're developing a site on localhost:3000, with a single command you can get a public URL like this:

https://magical-tiger.ngrok.io

Anyone who visits that link will see exactly what's running on your machine.
No deployment, no remote server, no network configuration. Just pure magic.

🔧 How to use

Install Ngrok (on macOS, Linux, or Windows):
```
brew install ngrok/ngrok/ngrok
```
or download it from ngrok.com.

Authenticate (first time only):

ngrok config add-authtoken <YOUR_TOKEN>

Start the tunnel to your local server, for example on port 3000:
```
ngrok http 3000
```

Ngrok will show you two URLs: one in http and one in https.
From then on, anyone can access your local site through that address.

🧠 Practical example: Testing a webhook locally

Let's say you're developing an Express app that receives notifications from GitHub.
Here's a minimalist example:

import express from "express";
const app = express();

app.use(express.json());

app.post("/webhook", (req, res) => { 
   console.log("Webhook received:", req.body); 
   res.sendStatus(200);
});

app.listen(5000, () => console.log("Local server at http://localhost:5000"));

Now you want to test it with a GitHub webhook.
The problem: GitHub can't reach localhost.

The solution:

ngrok http 5000

Ngrok will return a URL like this:

https://curious-fox.ngrok.io

In the GitHub dashboard, set the webhook like this:
- Payload URL: https://curious-fox.ngrok.io/webhook
- Content type: application/json

Push, And voilà — your local server receives the event in real time.

🧭 Bonus: The Secret Dashboard

Ngrok also includes a mini debug dashboard at
👉 http://localhost:4040

From there you can:

see all received requests,
analyze headers and bodies,
resend webhooks to test your code.

It's like a little built-in Postman, always ready.

⚙️ Why use it?

✅ Perfect for testing APIs and webhooks
👀 Ideal for showing a project to a client or colleague
🧩 Useful for debugging, demos, or rapid prototypes
🔒 Secure, with automatic HTTPS connections

🧩 Alternatives

Ngrok is the king of tunneling, but there are good open source alternatives:

LocalTunnel – free and super simple
Cloudflare Tunnel – production-oriented
Expose – with an elegant interface and self-hosted management

Or check out this article for paid solutions with free plans:

Expose your localhost online with these tools

4 tools to expose localhost online according to your needs

🏁 Conclusion

Ngrok is one of those tools you don't know you want until you try it.
It instantly transforms your local environment into a window to the web.
It's no replacement for a real deployment, but when you need to "open a temporary hole" between localhost and the world, it does the job with style.

🌍 Because sometimes, even your localhost needs a little online.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog