OpenTunnel
Expose Localhost to the Internet — Powered by Cloudflare Tunnel
Features •
Installation •
Usage •
How It Works •
Contributing
OpenTunnel is a free and open-source VS Code extension that turns your local development server into a public HTTPS URL — instantly. Powered by Cloudflare's free Quick Tunnels.
- ✅ No accounts — no sign-up, no API keys
- ✅ No relay server — direct Cloudflare tunnel, nothing to deploy
- ✅ Free HTTPS — every URL is
https://
- ✅ Works with ALL frameworks — React, Vite, Next.js, Django, Flask, Express, anything
- ✅ Zero configuration — just click and share
Features
| Feature |
Description |
| 🖱️ One-click tunneling |
Start a tunnel directly from VS Code |
| 🌍 Public HTTPS URLs |
Get a URL like https://random-words.trycloudflare.com |
| 🔍 Auto-detects servers |
Finds your running dev servers automatically |
| 📁 Static file serving |
Serve any folder as a website with one click |
| 📊 Live request monitor |
See incoming HTTP requests in real-time |
| 📋 Dashboard |
Full overview of all active tunnels |
| 🔌 Works with everything |
React, Vue, Vite, Next.js, Express, Django, Flask, Rails, PHP... |
Installation
From VSIX
code --install-extension opentunnel-2.0.0.vsix
From Source
git clone https://github.com/CodeWithMishu/OpenTunnel
cd OpenTunnel
npm install
npm run compile
# Press F5 in VS Code to launch Extension Development Host
Usage
Starting a Tunnel
- Command Palette: Press
Ctrl+Shift+P / Cmd+Shift+P and type "OpenTunnel: Start Tunnel"
- Activity Bar: Click the OpenTunnel icon in the sidebar and use the "Start Tunnel" button
- Status Bar: Click the "OpenTunnel" item
The extension will:
- Auto-detect running servers on your machine
- Let you pick which port to expose
- Download
cloudflared automatically (one-time, ~30MB)
- Give you a public HTTPS URL
Static File Serving
Want to share a folder of HTML/CSS/JS files?
- Run "OpenTunnel: Start Tunnel (Static Files)"
- Pick a folder
- Choose Regular or SPA mode
- Get your public URL!
Managing Tunnels
- Copy URL: Click the copy icon or use "OpenTunnel: Copy URL"
- Open in Browser: Click the browser icon
- Stop Tunnel: Use the stop button in the sidebar
- Dashboard: Run "OpenTunnel: Show Dashboard" for a full overview
Configuration
| Setting |
Default |
Description |
opentunnel.defaultPort |
3000 |
Default port when no server is auto-detected |
opentunnel.showNotifications |
true |
Show notifications when tunnel starts |
opentunnel.logRequests |
true |
Log incoming requests in the sidebar |
How It Works
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ Any Browser │ ───▶ │ Cloudflare │ ───▶ │ VS Code + │
│ (any device) │ │ Edge Network │ │ cloudflared │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│
▼
┌─────────────────┐
│ localhost:3000 │
│ (your app) │
└─────────────────┘
- The extension starts
cloudflared tunnel --url http://localhost:PORT
- Cloudflare assigns a free public URL (e.g.,
https://happy-cat-abc123.trycloudflare.com)
- All traffic flows through Cloudflare's edge network → your machine
- No relay server, no middleman, no data stored
Why Cloudflare Quick Tunnels?
- Free forever — Cloudflare's Quick Tunnels require no account and are completely free
- Subdomain-based — Your app runs at the root
/, so ALL frameworks work perfectly
- HTTPS included — Every tunnel gets automatic TLS
- Fast — Traffic goes through Cloudflare's global edge network
- Reliable — Backed by Cloudflare's infrastructure
Commands
| Command |
Description |
OpenTunnel: Start Tunnel |
Expose a running server |
OpenTunnel: Start Tunnel (Static Files) |
Serve a folder as a website |
OpenTunnel: Stop Tunnel |
Stop a specific tunnel |
OpenTunnel: Stop All Tunnels |
Stop all active tunnels |
OpenTunnel: Copy URL |
Copy tunnel URL to clipboard |
OpenTunnel: Open in Browser |
Open tunnel URL in browser |
OpenTunnel: Show Status |
Show current tunnel status |
OpenTunnel: Show Dashboard |
Open the dashboard webview |
Security
- Temporary URLs: Each tunnel gets a random URL, discarded when stopped
- No data logging: Traffic flows directly through Cloudflare — OpenTunnel stores nothing
- Open source: Audit the entire codebase
- Local only:
cloudflared runs on your machine, no cloud servers to manage
⚠️ Only expose development servers. Never tunnel production databases or sensitive services.
Troubleshooting
"Connection refused" error
Make sure your local dev server is running on the specified port before starting the tunnel.
Tunnel takes long to start
The first run downloads cloudflared (~30MB). After that, it's cached and starts in seconds.
cloudflared download fails
You can install cloudflared manually: https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/
URL not working
Cloudflare Quick Tunnel URLs are temporary. If the tunnel process stops, the URL stops working. Just start a new tunnel.
Contributing
We welcome contributions! 🎉
git clone https://github.com/CodeWithMishu/OpenTunnel
cd OpenTunnel
npm install
npm run compile
# Press F5 to launch Extension Development Host
Ideas for contributions
- 🔍 Better dev server auto-detection
- 📱 Mobile testing optimizations
- 🎨 UI/UX improvements
- 📚 Documentation & tutorials
License
MIT License — See LICENSE file.
Made with ❤️ by CodeWithMishu
⭐ Star this repo if you find it helpful!
