From Localhost to the World: Using ngrok with Your Flask Application

If you have ever built a Flask application, you are probably familiar with the traditional http://localhost:5000 URL that greets you during development. It works great for testing on your own machine, but what happens when you need to share your work, test a webhook, or simulate real-world conditions? That’s where ngrok comes in.

What is ngrok?

ngrok is a tool that creates a secure tunnel from a public URL to your local machine. In simple terms, it takes your locally running application and makes it accessible to anyone on the internet through a generated URL.

Setting Up a Simple Flask App

Let’s start with a basic Flask application:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run(debug=True)

Run this with python app.py (or with flask run), and you will see your app running at http://localhost:5000

Using ngrok

To expose your Flask app to the world, first install ngrok from ngrok.com. After creating a free account and authenticating with your token, simply run:

ngrok http 5000

You’ll see output like this:

Session Status                online
Account                       your-email@example.com (Plan: Free)
Version                       3.x.x
Region                        United States (us)
Forwarding                    https://a1b2c3d4.ngrok-free.app -> http://localhost:5000

That https://a1b2c3d4.ngrok-free.app URL is now publicly accessible and points directly to your local Flask application.

Why Use ngrok Instead of Localhost?

Why use ngrok when localhost works perfectly fine? Here are the scenarios where ngrok becomes invaluable:

Webhook Testing

Services like Stripe, GitHub, Twilio, and Slack need to send data to your server via webhooks. These services can’t reach localhost because it only exists on your machine. With ngrok, you get a real URL that these services can actually hit.

Sharing Work-in-Progress

Need to show a client or colleague what you’ve been working on? Instead of deploying to a staging server, just share your ngrok URL. They can see your latest changes in real-time as you make them, and it looks much better than just showing them a localhost address

Mobile Device Testing

Testing a responsive design on an actual phone? Your phone cannot access your computer’s localhost, but it can access an ngrok URL! Connect to the same network and open the ngrok URL on the device.

CORS and Cross-Origin Testing

Browsers treat localhost differently than real domains. If you are building an API that will be called from a different origin, testing with ngrok gives you more realistic CORS behavior. Some browser security features are relaxed for localhost, which can mask issues that will appear in production.

HTTPS Out of the Box

ngrok provides HTTPS automatically. This is crucial for testing features that require secure contexts, like geolocation APIs, service workers, or payment integrations. No need to set up SSL certificates locally.

Important: Free Tier Limitations

One thing to keep in mind is that the free tier of ngrok generates a random URL each time you start it. If you run ngrok http 5000 today, you might get https://a1b2c3d4.ngrok-free.app. Tomorrow, it will be a completely different URL like https://x9y8z7w6.ngrok-free.app.

This means:

• You will need to update webhook configurations each session
• Shared links will stop working when you restart ngrok
• Bookmarks will not persist between sessions

If you need a static URL, ngrok offers paid plans with custom domains and reserved subdomains.

Useful ngrok Commands

Here are some commands you’ll find helpful:

# Basic tunnel to port 5000
ngrok http 5000

# Tunnel with a specific region (for lower latency)
ngrok http 5000 --region eu

# View your active tunnels and request history
# Open http://localhost:4040 in your browser

# Replay a previous request (useful for webhook debugging)
# Available through the localhost:4040 interface

The ngrok Web Interface

One of ngrok’s best features is its local web interface at http://localhost:4040. This dashboard shows you:

• All incoming requests to your tunnel
• Request and response headers
• Body content
• Response times
• The ability to replay requests

This is incredibly useful for debugging webhooks. Instead of triggering the same event over and over, you can simply replay the request from the dashboard.

Best Practices for Development

Here’s a workflow that works well:

1. Use localhost for regular development It is faster and does not require any setup.

2. Switch to ngrok when you need external access Webhook testing, sharing with others, or testing on mobile devices.

3. Keep the ngrok inspector open — The localhost:4040 dashboard helps you understand exactly what is hitting your server.

4. Remember to update webhook URLs Since free tier URLs change, make it part of your routine to update any webhook configurations when you start a new ngrok session.

Conclusion

ngrok bridges the gap between local development and the real world. While localhost remains your go-to for everyday coding, ngrok is the tool you reach for when you need your local server to interact with the outside world. Whether it is testing webhooks, sharing progress, or ensuring your CORS configuration works correctly, ngrok makes these tasks simple.

Run ngrok http 5000 and see your local app go global in seconds.