📱 Pocket Preview
Preview your local dev server instantly on any device with a QR code.
🎬 Demo
Live Preview on Phone
Automatic Live Reload
✨ Features
- 🌐 Public live preview of your local project
- 📱 QR code for instant mobile access
- 🔄 Automatic live reload on file changes
- ⚡ Supports React, Vite, and plain HTML
- 🚀 One-command start
- ⚙️ Automatically detects dev server port
- 🟢 Checks for CloudFlred installation and guide users
📦 Installation
1. From VS Code Marketplace
Search Pocket Preview → click Install
2. Manual Install
code --install-extension pocket-preview-0.0.6.vsix
⚙️ Requirements
- Node.js installed
- Dev server running (
npm run dev)
- Cloudflare Tunnel (
cloudflared) installed & in PATH
if CloudFlared is not found ,the extention will prompt you to download it : download cloudflared
Tunnel generates a public URL for your preview.
🛠 Setup for Vite Projects
To avoid blocked requests, add this to vite.config.js:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
host: true,
cors: true,
allowedHosts: ['.trycloudflare.com'],
hmr: {
protocol: 'wss',
host: '.trycloudflare.com',
clientPort: 443
}
}
})
Restart your dev server after updating.
▶️ How to Use
- Start your project:
npm run dev
- Open VS Code Command Palette:
- Windows/Linux:
Ctrl + Shift + P
- Mac:
Cmd + Shift + P
- Run:
Preview on Phone
Scan the displayed QR code — your live preview opens instantly.
Edit files — changes auto-refresh on phone.
⚠️ Troubleshooting
QR not showing / No public URL
- Ensure
cloudflared is installed and PATH is correct
- Dev server must be running
Blocked request error
- Check
allowedHosts in vite.config.js
- Restart server after changes
Cloudflared not detected
📌 Notes
- URL changes each preview session
- Works best with Vite or React
- Live reload is automatic
🚧 Planned Improvements
- Auto-install Cloudflare Tunnel
- Auto-detect and patch Vite config
- Better device tracking UI
👨💻 Author / Credit
Built by Sam (owsam22)
📜 License
MIT License — see LICENSE
