📱 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

1. Start your project:

npm run dev

2. Open VS Code Command Palette:

• Windows/Linux: Ctrl + Shift + P
• Mac: Cmd + Shift + P

3. Run:

Preview on Phone

4. Scan the displayed QR code — your live preview opens instantly.

5. 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

• install from cloudflared downloads

---

📌 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)

• GitHub: owsam22
• LinkedIn: samarpan22

---

📜 License

MIT License — see LICENSE