Skip to main content

Device Testing

WEFA is a mobile-first PWA. Testing on real iPhones and iPads is essential for camera access, touch interactions, AR, and PWA install behavior. The dev tunnel is embedded directly into the dev server — no separate command needed.

Quick Start​

# Starts Vite + auto-opens a cloudflared tunnel
bun dev:app

Open localhost:5173 on your desktop browser. The landing page shows a QR code pointing to the tunnel URL — scan it on any device to test the app.

If cloudflared is not installed, the dev server starts normally without a tunnel. Install it with:

brew install cloudflared

How It Works​

When bun dev:app starts, the Vite dev tunnel plugin:

  1. Checks if cloudflared is installed
  2. Spawns cloudflared tunnel --url http://localhost:5173 as a child process
  3. Parses the tunnel URL from cloudflared's output
  4. Serves it at GET /__dev/tunnel for the in-app QR code
  5. Kills cloudflared when the dev server stops

What you get​

  • HTTPS — Service workers, camera (getUserMedia), and WebXR all require a secure context. The tunnel provides this automatically.
  • Any device, any network — Share the URL with testers. No same-WiFi requirement.
  • Live reload — Vite HMR works through the tunnel. Edit code and see changes on-device instantly.
  • Full PWA install — "Add to Home Screen" works from the tunnel URL.
  • In-app QR code — Desktop visitors see a hero page with a QR code. Mobile visitors go straight to login.

QR Code Behavior​

ContextQR code points to
Dev server with cloudflaredTunnel URL (auto-detected)
Dev server without cloudflaredhttps://wefa.app (fallback)
Productionhttps://wefa.app

The QR code updates automatically — no manual URL pasting needed.

Prerequisites​

Install cloudflared​

# macOS
brew install cloudflared

# Linux
curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64 -o cloudflared
chmod +x cloudflared
sudo mv cloudflared /usr/local/bin/

# Verify
cloudflared --version

No Cloudflare account is needed for quick tunnels (random URLs). For a stable subdomain, see Named Tunnels below.

Testing Scenarios​

Camera & Plant Care​

Camera access requires HTTPS. The tunnel provides this, so getUserMedia permission prompts work normally on iOS Safari and Android Chrome.

AR / WebXR​

WebXR is supported on Android Chrome only. The tunnel URL works for AR testing on Android devices. iPad and desktop use the non-AR 3D canvas fallback — verify both paths.

Multiplayer / P2P Sync​

To test Yjs P2P sync between devices, both the app and the API server (which includes WebSocket signaling) need to be reachable:

# Terminal 1: App + API (includes tunnel automatically)
bun dev

# Terminal 2: API tunnel (for signaling on other devices)
cloudflared tunnel --url http://localhost:4444

Then set VITE_SIGNALING_URLS to the API tunnel URL (with wss:// scheme) before starting the app, or update .env.local.

PWA Install​

From the tunnel URL, test "Add to Home Screen" on iOS Safari and Chrome. Verify:

  • The app installs with the correct name and icon
  • It launches in standalone mode (no browser chrome)
  • Offline mode works after install (service worker caches assets)

Debugging on Device​

iOS Safari (via USB)​

  1. Connect iPhone/iPad to your Mac via USB
  2. On the device: Settings > Safari > Advanced > Web Inspector (enable)
  3. On your Mac: Safari > Develop > [device name] > [page]
  4. Full DOM inspector, console, network tab, and JS debugger

Android Chrome (via USB)​

  1. Connect Android device via USB
  2. Enable USB Debugging in Developer Options
  3. On your Mac: open chrome://inspect in Chrome
  4. Click Inspect next to your page

Named Tunnels​

Quick tunnels generate a random URL each session. For a stable URL (useful for repeat testing sessions):

# One-time setup (requires free Cloudflare account)
cloudflared tunnel login
cloudflared tunnel create wefa-dev

# Each session
cloudflared tunnel run --url http://localhost:5173 wefa-dev

This gives you a consistent https://wefa-dev.<your-tunnel-id>.cfargotunnel.com URL. You can also add a CNAME record to use a custom subdomain like dev.wefa.app.

Tips​

  • The URL changes each run with quick tunnels. The in-app QR code updates automatically.
  • iOS Safari IndexedDB has a ~50MB quota per origin. Each tunnel URL is a new origin, so test data doesn't persist across sessions.
  • Vite HMR occasionally drops the WebSocket connection through the tunnel. A page refresh reconnects it.
  • Multiple testers can use the same tunnel URL simultaneously — useful for multiplayer testing.