"I have spent hours polishing this WordPress build on my laptop. Now my client wants to test it on their iPhone right this second, and my payment gateway needs a live HTTPS webhook URL. How can I share it without buying another hosting server or wrecking my home network?"
Every web developer and agency engineer has found themselves in this exact spot. Today, we break down how to solve it in under 10 minutes with Cloudflare Tunnel.
Before diving into the terminal commands, our engineering team at VitableTech wants to give a genuine, heartfelt shoutout to the entire team at Cloudflare.
I have personally been relying on Cloudflare services for over 5 years across dozens of production client builds, SaaS platforms, and enterprise infrastructures. In all these years, Cloudflare has never once disappointed us:
Beyond the technical reliability, what stands out most is Cloudflare's **UI and UX design**. It is remarkably clean, intuitive, and understandable by itself. You don't need a PhD in networking to navigate DNS records, manage SSL modes, or spin up edge workers. Cloudflare sets the gold standard for developer experience.
01 The Problem: Localhost is Great Until Someone Else Needs to See It
Local development is paradise. Whether you use Docker, LocalWP, XAMPP, MAMP, or native Nginx/Apache on macOS or Linux, developing WordPress on your laptop gives you instant file access, zero server lag, and lightning-fast debugging.
Your site is humming along smoothly at:
Then reality knocks on your door with common real-world dilemmas:
- Client Demos: A non-technical stakeholder wants a quick walkthrough of your progress on their own tablet or phone before signing off on the milestone.
- Live Webhooks & APIs: You are integrating Stripe, Razorpay, WhatsApp Business API, or OAuth callbacks that demand a verified, public HTTPS endpoint.
- Cross-Device Responsive QA: You need to verify mobile menus, safari gestures, and touch targets across real iPhones and Android devices on different cellular networks.
- Remote Peer Review: A remote colleague on Slack or Teams wants to inspect a specific checkout bug on your local branch without cloning the entire DB.
Why Traditional Solutions Fall Short
| Method | How It Works | The Catch / Pain Point |
|---|---|---|
| Router Port Forwarding | Forward port 80/443 on your home Wi-Fi router directly to your laptop's local IP. | Exposes your home IP and machine directly to internet botnets, scanners, and DDoS. Requires Dynamic DNS and manual SSL certificates. |
| Deploying to a Staging VPS | Spin up an EC2 instance, DigitalOcean droplet, or shared host and migrate files & DB. | Costs extra money. Wastes 30–60 minutes exporting SQL dumps, re-uploading media, and synchronizing code changes back and forth. |
| Free ngrok / LocalTunnel | Run a temporary tunnel CLI tool. | Gives you a random cryptic URL (xyz123.ngrok-free.app), disconnects after a short timeout, displays interstitial browser warnings, and limits bandwidth. |
| Cloudflare Tunnel (Winner) | Outbound lightweight daemon (cloudflared) bridges your laptop directly to Cloudflare's edge network. |
Zero open router ports. Uses your own branded custom domain (demo.yourdomain.com), includes free automatic SSL, DDoS protection, and takes 2 minutes to spin up. |
02 How Cloudflare Tunnel Works Under the Hood
With traditional hosting, incoming traffic travels inward through firewalls to reach a server. Cloudflare Tunnel reverses this model.
When you launch cloudflared on your laptop, it initiates an outbound-only connection to the nearest Cloudflare edge data centers over encrypted QUIC / HTTP/2. Because it's an outbound connection, your home router's NAT firewall allows it without opening a single port.
https://demo.vitabletech.in, Cloudflare terminates SSL at the edge, routes through your encrypted tunnel directly to your laptop, and responds seamlessly.
03 Step-by-Step Developer Implementation
Let's walk through the exact setup. We will assume you have a working local WordPress installation on your laptop and a domain managed on Cloudflare (for example, vitabletech.in).
1 Verify Your Local WordPress URL & Port
First, ensure WordPress is actively running locally. Open your browser or run a quick curl test in your terminal:
# If running on default port 80:
curl -I http://localhost
# Or if running on custom port (e.g. 8080 or 8001):
curl -I http://localhost:8080
# If you're on a Mac and not sure which port is listening:
lsof -iTCP -sTCP:LISTEN -n -P | grep -E "(httpd|nginx|php|docker)"
Note down the exact working URL and port (e.g., http://localhost:8001 or http://localhost:8080).
2 Install the Cloudflare Tunnel Daemon (cloudflared)
Cloudflare provides a lightweight, open-source daemon executable for macOS, Linux, and Windows:
# macOS (using Homebrew):
brew install cloudflared
# Debian / Ubuntu Linux:
sudo mkdir -p --mode=0755 /etc/apt/keyrings
curl -fsSL https://pkg.cloudflare.com/cloudflare-main.gpg | sudo tee /etc/apt/keyrings/cloudflare-main.gpg >/dev/null
echo 'deb [signed-by=/etc/apt/keyrings/cloudflare-main.gpg] https://pkg.cloudflare.com/cloudflared jammy main' | sudo tee /etc/apt/sources.list.d/cloudflared.list
sudo apt update && sudo apt install cloudflared
# Verify installation:
cloudflared --version
3 Authenticate cloudflared with Your Cloudflare Account
Run the login command in your terminal:
cloudflared tunnel login
Your default browser will pop open automatically with the Cloudflare authorization page. Select your domain (e.g. vitabletech.in) and click Authorize.
🔒 Security Note: Cloudflare will download an origin certificate to ~/.cloudflared/cert.pem. Never share this certificate, and never commit it to any public Git repository.
4 Create a Named Tunnel for Your WordPress Site
Give your tunnel a descriptive name. For example, if you are building a site for a client or project named "rento-mojo":
cloudflared tunnel create wordpress-rento-mojoCloudflare creates the tunnel and returns a unique Tunnel UUID:
Credentials written to /Users/mayanksinghkushwah/.cloudflared/a8c81802-7921-4ef1-b73d-597f95ae0aff.json
5
Create the Tunnel Ingress Configuration (config.yml)
You can place your tunnel configuration in your user folder (~/.cloudflared/config.yml) or inside a local project directory (.cloudflared/config.yml).
tunnel: a8c81802-7921-4ef1-b73d-597f95ae0aff
credentials-file: /Users/mayanksinghkushwah/.cloudflared/a8c81802-7921-4ef1-b73d-597f95ae0aff.json
ingress:
# Route traffic for our public demo domain to our local WordPress port:
- hostname: rento-dev.vitabletech.in
service: http://localhost:8001
# Mandatory catch-all 404 rule required by Cloudflare:
- service: http_status:404
Always test your configuration syntax before launching:
6 Bind the Hostname via Cloudflare DNS
You don't need to manually create CNAME records in the web dashboard. Run one single CLI command:
cloudflared tunnel route dns wordpress-rento-mojo rento-dev.vitabletech.in
Cloudflare automatically provisions the proxied CNAME DNS entry pointing directly to your tunnel target (<tunnel-uuid>.cfargotunnel.com).
This is the single most common failure point where 90% of developers get stuck. You start the tunnel, you visit https://rento-dev.vitabletech.in in your browser, and suddenly:
- The browser immediately redirects you back to
http://localhost:8001! - Or the HTML loads, but all CSS, fonts, and images are completely broken (mixed content / 404).
- Or clicking any menu item or the admin login redirects away from your public tunnel URL.
Why does this happen? Because WordPress stores its canonical siteurl and home in the MySQL database (wp_options table). When WordPress receives a request from your public domain, its core routing engine checks if the host matches its stored database setting. If it still says localhost, WordPress triggers a 301 canonical redirect!
The 30-Second Fix in wp-config.php:
Open your local WordPress project's wp-config.php and add these lines right above the line that says /* That's all, stop editing! Happy publishing. */:
// Override WordPress Site URLs dynamically for Cloudflare Tunnel
define('WP_HOME', 'https://rento-dev.vitabletech.in');
define('WP_SITEURL', 'https://rento-dev.vitabletech.in');
// Handle Cloudflare Reverse Proxy SSL termination
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
$_SERVER['HTTPS'] = 'on';
}
💡 Pro Tip: By defining these constants in wp-config.php, you override the database values in memory without permanently mutating your local database entries.
7 Launch the Tunnel & Test Public Access
Now start the tunnel daemon in your terminal:
cloudflared tunnel run wordpress-rento-mojoYou will see real-time connection registration logs:
INF Version 2026.x.x
INF Registered tunnel connection connIndex=0 location=BOM
INF Registered tunnel connection connIndex=1 location=DEL
INF Connection registered successfully
🎉 That's it! Open https://rento-dev.vitabletech.in on your phone, cellular data, or send the link to your client anywhere in the world. Your local WordPress site is live with a verified Cloudflare SSL certificate!
04 Advanced Architecture: Multiple WordPress Sites on One Laptop
Agency developers frequently balance 3 to 5 projects simultaneously. Can you run multiple WordPress sites from your laptop through Cloudflare Tunnel at the same time?
Yes! Cloudflare Tunnel supports multi-ingress routing effortlessly. You assign each local WordPress site its own port and map each to a dedicated subdomain:
tunnel: a8c81802-7921-4ef1-b73d-597f95ae0aff
credentials-file: /Users/mayanksinghkushwah/.cloudflared/a8c81802-7921-4ef1-b73d-597f95ae0aff.json
ingress:
# Client 1: E-commerce Store (LocalWP on Port 8001)
- hostname: store-dev.vitabletech.in
service: http://localhost:8001
# Client 2: Corporate Portal (Docker Nginx on Port 8002)
- hostname: portal-dev.vitabletech.in
service: http://localhost:8002
# Client 3: Headless WP GraphQL (Port 8003)
- hostname: api-dev.vitabletech.in
service: http://localhost:8003
# Catch-all rule
- service: http_status:404
Recommended Team Naming Convention
At VitableTech, we enforce a strict naming standard across our engineering team so that tunnels never collide in DNS:
Subdomain Pattern: <project>-<developer>-<environment>.yourdomain.com
Examples: rento-mayank-dev.vitabletech.in, rento-rahul-qa.vitabletech.in.
05 Security Rules & What This is NOT
While Cloudflare Tunnel feels like pure magic, software engineering requires clear boundaries between development tooling and production hosting.
- Interactive client demos & review calls
- Testing mobile UI on actual handheld devices
- Developing third-party webhooks (Stripe, Twilio)
- Temporary staging environments before QA
- Zero hosting cost during rapid prototyping
- Permanent 24/7 business websites
- Production e-commerce checkouts
- High-traffic production workloads
- Any setup where laptop lid closes or sleeps
- Zero automated backups or failovers
06 Quick Troubleshooting Guide
Fix: Your local WordPress server (Apache/Nginx/Docker) is either not running or listening on a different port than specified in config.yml. Run curl -I http://localhost:<port> to confirm local availability.
Fix: WordPress hasn't had its site URLs updated. Add the WP_HOME and WP_SITEURL constants into wp-config.php as explained in Step 7 above.
Fix: If you want the tunnel running in the background while your laptop is awake, install it as a system service with sudo cloudflared service install.
Need Enterprise DevOps or Custom Cloud Architecture?
From Cloudflare Zero Trust and edge worker architectures to high-scale custom web and AI applications, VitableTech helps engineering teams scale securely across the globe.