How to Use Cloudflare Tunnel to Expose Localhost Without Port Forwarding

Every developer has faced this struggle: You’ve finished a project on your localhost and need to show it to a client, or you need to test webhooks from services like Stripe, Facebook, or Line. However, network issues get in the way. Setting up Port Forwarding on a router is tedious, and most home internet connections today use Private IP (CGNAT), making port opening nearly impossible.

Today, Superdev Academy will introduce you to the best modern solution: Cloudflare Tunnel.

What is Cloudflare Tunnel?

Cloudflare Tunnel (formerly known as Argo Tunnel) is a component of the Cloudflare Zero Trust ecosystem. It creates a secure "pipe" between your local server (whether at home, in an office, or a data center) and Cloudflare’s global network.

The Magic Part: Normally, to access your site, users must travel to your server (Inbound). But with Cloudflare Tunnel, your server reaches out to Cloudflare (Outbound). This means you don't have to open a single port on your router!

Why Choose Cloudflare Tunnel? (vs. ngrok)

Free & Unlimited: Unlike ngrok’s free tier, Cloudflare doesn’t limit your connection time or bandwidth.
Use Your Own Domain: You can instantly connect your local service to any domain managed on Cloudflare.
High Security: Your home Public IP remains hidden. You get Cloudflare’s world-class DDoS protection and WAF for free.
Automatic HTTPS: Say goodbye to SSL certificate headaches. Cloudflare handles the encryption for you.

🔒 Zero Attack Surface: Total Security

Traditional Port Forwarding is like leaving a window cracked open—it's an entry point for hackers to scan for vulnerabilities. Cloudflare Tunnel allows you to keep all your "doors" locked. Since it uses outbound connections and hides your Public IP, your local environment is essentially invisible to the public internet (Zero Attack Surface).

🛠 Prerequisites

To ensure a smooth and speedy Cloudflare Tunnel setup, please have these three essentials ready:

1. Cloudflare Account (Free Account)

Why you need it: You will use the Cloudflare Zero Trust dashboard to create, configure, and manage your tunnels.
Pro Tip: A Free Plan is more than enough for basic Tunnel features. There is no need to upgrade to a paid tier for this. Sign up at dash.cloudflare.com.

2. Domain Name Managed via Cloudflare DNS

This is the heart of the setup; Cloudflare Tunnel won't function without a domain to act as its anchor.

What to check:
- Status: Active: Double-check your Cloudflare Dashboard to ensure your domain is marked with a green "Active" status.
- DNS Migration: If your domain is registered elsewhere (such as GoDaddy or Namecheap), ensure you have successfully pointed your Name Servers to Cloudflare.
Why? The Tunnel will automatically create "shortcuts" (CNAME records) for you within your DNS settings. It’s incredibly convenient!

3. A Service or Application Running on Localhost

Why you need it: The tunnel acts as a bridge; you must have a "destination" ready for the traffic to reach.
Examples:
- Web Apps: If you are running Next.js, React, or Vue locally, identify your port (e.g., http://localhost:3000).
- Backend: If it’s an API written in Go, Python, or Node.js (e.g., http://localhost:8080).
- Docker: If running via a container, ensure the container is active and you know its internal port.

💡 Quick Tip: Before configuring the tunnel, make sure you can actually access your app in your own browser via localhost. This confirms that your service is healthy and ready to go global!

Step-by-Step: Installation & Configuration

We will use the Remote Config method via the Cloudflare Dashboard, which is the easiest way to manage your tunnels.

1. Create a Tunnel in the Dashboard

Go to the Cloudflare Zero Trust Dashboard.
Navigate to Networks > Tunnels.
Click Add a Tunnel, select Cloudflare (Managed), and give it a name (e.g., superdev-local-server).

2. Install the Connector (The Docker Way)

Cloudflare provides commands for various OS, but for the Superdev community, we highly recommend Docker for a clean, isolated setup.

Copy the command with your unique token from the dashboard and run it in your terminal:

Bash
docker run cloudflare/cloudflared:latest tunnel --no-autoupdate run --token <YOUR_TOKEN_HERE>

Once running, the status on your dashboard will turn Healthy.

3. Configure Public Hostname

Tell Cloudflare which domain should point to your local app:

In the Tunnel settings, go to the Public Hostname tab.
Subdomain: e.g., dev
Domain: Select your domain from the dropdown.
Service Type: Select HTTP.
URL: * For Non-Docker apps: Enter localhost:3000.
- If the Tunnel is in Docker (Step 2): Enter host.docker.internal:3000.

💡 Docker Tip: We use host.docker.internal because localhost inside a container refers to the container itself. This special address tells the Cloudflare connector to look at your host machine instead.

Test it Out!

You can now access your local project via https://dev.yourdomain.com from anywhere in the world! Whether you are on hotel Wi-Fi or behind a strict corporate firewall, Cloudflare Tunnel will work seamlessly.

Note: The first load might feel slightly slower than localhost as the data travels through Cloudflare's edge network, but the security and accessibility are well worth it.

Pro Tip: Secure it with Zero Trust Access

If you are sharing this URL only for internal team reviews, you can add an extra layer of security. Go to Access > Applications and create a login gate. You can restrict access to only users with a specific email (e.g., @yourcompany.com). This is FREE for up to 50 users!

Conclusion

Cloudflare Tunnel is a game-changer for developers. It’s secure, convenient, and cost-effective. If you are still struggling with port forwarding or paying for premium tunneling services, it’s time to switch.

Stay tuned for more professional tech tips at Superdev Academy!

Follow Us: