🚀 Replacing Ngrok with Cloudflared Tunnel for Local Development

Tired of hitting Ngrok limits or needing to manually refresh tunnels all the time? Enter Cloudflared — a fast, secure, and free tunneling solution by Cloudflare that’s perfect for local development.

This guide will walk you through using cloudflared to expose your local apps (e.g., localhost:3000, localhost:8000, etc.) to the internet using custom subdomains like dev.tunnelhub.xyz, api.tunnelhub.xyz.

🔧 Prerequisites

• A domain registered and managed via Cloudflare DNS
• Cloudflared CLI installed
• Cloudflared authenticated to your Cloudflare account:

cloudflared login

This will open a browser window and connect your local machine to your Cloudflare account.

🛠 Step 1: Create a Tunnel

Choose a name for your tunnel (e.g., dev-tunnel):

cloudflared tunnel create dev-tunnel

This creates a named tunnel and stores a credentials file at:

~/.cloudflared/<TUNNEL_ID>.json

Keep that file safe!

📁 Step 2: Create a Config File

Create the config file at ~/.cloudflared/config.yml:

tunnel: dev-tunnel
credentials-file: /Users/YOUR_USERNAME/.cloudflared/<TUNNEL_ID>.json

ingress:
  - hostname: dev.tunnelhub.xyz
    service: http://localhost:3000
  - hostname: api.tunnelhub.xyz
    service: http://localhost:8000
  - service: http_status:404

Update:

• YOUR_USERNAME with your system username
• <TUNNEL_ID> with the actual tunnel UUID

🌐 Step 3: Create DNS Routes

Now bind each subdomain to your tunnel:

cloudflared tunnel route dns dev-tunnel dev.tunnelhub.xyz
cloudflared tunnel route dns dev-tunnel api.tunnelhub.xyz

This creates CNAME records in Cloudflare, pointing to the tunnel.

⚠️ Important: In Cloudflare DNS, make sure these records are set to DNS only (☁️ gray cloud). Cloudflared tunnels won’t work with the proxy (orange cloud).

🚀 Step 4: Start the Tunnel

Now run your tunnel:

cloudflared tunnel run dev-tunnel

Make sure your local apps are running on the ports you specified (e.g., 3000 or 8000).

✅ Test It!

Open a browser or use curl:

curl https://dev.tunnelhub.xyz
curl https://api.tunnelhub.xyz

If all is well, you’ll see your local apps responding through the public URLs — no port forwarding, no tunnels to refresh!

🧠 Bonus: Dynamic Tunnels via Script

You can even create a dynamic config template like:

tunnel: dev-tunnel
credentials-file: ~/.cloudflared/<TUNNEL_ID>.json

ingress:
  - hostname: ${SUBDOMAIN}.tunnelhub.xyz
    service: http://localhost:${PORT}
  - service: http_status:404

Then run it via a shell script:

SUBDOMAIN=api PORT=8000 envsubst < template.yml > ~/.cloudflared/config.yml
cloudflared tunnel run dev-tunnel