Expose a Local Next.js App to the World with Cloudflare Tunnel | RavChat

Expose a Local Next.js App to the World with Cloudflare Tunnel

TL;DR:

  • Cloudflare Tunnel turns your localhost into a secure public URL without exposing your IP or opening router ports. Cloudflare Tunnel docs
  • Quick Tunnel gives a one-time, temporary URL; for permanent access, point a subdomain at Cloudflare and configure a config.yml. Quick Tunnels docs
  • Install cloudflared via Homebrew, Winget, or the Linux package, then cloudflared tunnel login. Downloads docs
  • Create a tunnel, edit the config file, route DNS, and run. Useful commands docs
  • DNS changes can take minutes to hours; test with TryCloudflare first.

Table of Contents

Why this matters

I’ve been stuck in the same loop: my dev server runs on localhost:3000, I want to show a demo to a client, but port forwarding feels like a chore, the VPN route is fragile, and renting a VPS feels like overkill. Cloudflare Tunnel solves all of that in one go. It gives me a public HTTPS URL, keeps my home IP hidden, and works on any framework – Next.js, Node, Django, Laravel, React, or plain HTML. Cloudflare Tunnel docs

Core concepts

  • What is Cloudflare Tunnel?
    It’s a lightweight daemon (cloudflared) that opens an outbound TLS connection from your machine to Cloudflare’s edge. No port is opened on your router, no public IP is exposed. Cloudflare Tunnel docs
  • Quick Tunnel vs. Permanent Tunnel
    Quick Tunnel (cloudflared tunnel –url http://localhost:3000) gives you a random *.trycloudflare.com URL that changes each time you start it. It’s perfect for quick sharing. Permanent Tunnel requires a Cloudflare-registered domain, DNS records, and a config.yml. Quick Tunnels docs
  • config.yml
    The config lives in ~/.cloudflare/config.yml. It must contain:
    tunnel: 1ed88140
    credentials-file: /home/user/.cloudflare/credentials.json
    ingress:
      - hostname: demo.example.com
        service: https://localhost:3000
      - hostname: "*"
        service: http_status: 404
    
    The file is YAML; the credentials file is JSON. Configuration file docs
  • DNS
    Cloudflare must be the authoritative nameserver for your domain, and the subdomain must point to the tunnel. DNS propagation can take 5–10 min, 1–2 h, or up to 24 h. DNS propagation community post
FeatureQuick TunnelCloudflare TunnelVPS Hosting
Setup TimeInstantMinutesHours
CostFreeFree (free plan)Paid
PersistenceTemporaryPermanentPermanent
SecurityOutbound only, no IP exposedOutbound only, no IP exposedExposes IP, port open
Use CaseQuick sharingDemos, staging, internal toolsProduction workloads
LimitationURL changes on restartRequires Cloudflare account & DNSPort forwarding & cost

How to apply it

  1. Install cloudflared
  2. Authenticate
    cloudflared tunnel login
    
    A browser opens to sign in. Useful commands docs
  3. Create a tunnel
    cloudflared tunnel create my-tunnel
    
    The command outputs a tunnel ID and writes a credentials file to ~/.cloudflare/credentials.json. Useful commands docs
  4. Configure config.yml
    Edit the file to map your domain to the local port, as shown above. The tunnel: line is the hex ID from step 3.
  5. Add DNS record
    cloudflared tunnel route dns my-tunnel demo.example.com
    
    This creates a CNAME that points the subdomain to the tunnel. Useful commands docs
  6. Run the tunnel
    cloudflared tunnel --config ~/.cloudflare/config.yml run my-tunnel
    
    The tunnel stays alive as long as your local server runs. If the machine disconnects, the public URL disappears. Cloudflare Tunnel docs
  7. Verify
    Open https://demo.example.com in a browser. You should see your app. If you change the config, restart the tunnel.

Pitfalls & edge cases

  • Local server stops → tunnel stops – I’ve had to keep my laptop awake during demos.
  • DNS not propagated yet – Use TryCloudflare first to make sure the tunnel works before updating the real domain.
  • Ingress rule typo – A missing hostname: line triggers a 404 for all traffic.
  • Wrong name-servers – If your domain still points to GoDaddy, Cloudflare won’t see the DNS changes.
  • Quick Tunnel not for production – The URL changes each restart, so never point a client’s real device to it.
  • Free plan limits – The free plan supports unlimited tunnels but has rate limits; for high-traffic staging, consider the paid plan.

Quick FAQ

  1. How long does DNS propagation take?
    It can be as quick as 5–10 min, but up to 1–2 h or 24 h in worst cases. DNS propagation community post
  2. Can I use my own subdomain on GoDaddy?
    Yes, but you must change GoDaddy’s nameservers to Cloudflare’s and then add the subdomain in Cloudflare’s DNS panel. Cloudflare Tunnel docs
  3. Does Cloudflare Tunnel reveal my public IP?
    No, it only opens an outbound TLS connection; your IP stays hidden. Cloudflare Tunnel docs
  4. What if my laptop loses power during a demo?
    The tunnel will close and the URL will stop working. Keep the machine on or use a more reliable host.
  5. Can I run the tunnel as a Linux service?
    Yes, see Cloudflare’s guide on configuring cloudflared as a systemd service. Downloads docs

Conclusion

Cloudflare Tunnel is a free, secure, and framework-agnostic way to expose any local web app to the internet without fiddling with routers or paying for a VPS. Follow the steps above, test with TryCloudflare, and you’ll have a permanent, stable URL in minutes. It’s perfect for developers, product teams, and dev-ops who need quick demos, internal staging, or testing environments. If you’re running a production service, consider a dedicated host; but for all other cases, Cloudflare Tunnel is a win.

References