Skip to content

Dev Server Preview

View as Markdown Edit on GitHub Docs at 1675df8

Termbridge can proxy your local dev server and show it in a preview pane. This is perfect for mobile testing or watching your app while running terminal commands.

Quick start

Shell
# Start your dev server (e.g., Vite on port 5173)
cd my-app && npm run dev

# In another terminal, start Termbridge with proxy
termbridge --proxy 5173

Now you can switch between Terminal and Preview views in the UI.

How it works

When you pass --proxy <port>:

  1. All Termbridge routes stay under /__tb/
  2. All other requests are proxied to your dev server
  3. The UI shows a Views button to toggle between Terminal and Preview
  4. Preview loads your app in an iframe through the proxy
Code
Browser → Termbridge → Your dev server (localhost:5173)

Switching views

  1. Tap the Views button in the bottom bar
  2. Choose Switch to Terminal or Switch to Preview
  3. The view updates instantly

Both views stay connected - your terminal session continues while you're viewing the preview.

Hot Module Replacement (HMR)

Vite's HMR works through the proxy. Every WebSocket connection outside /__tb/ from a signed-in browser is forwarded to your dev server, whatever its path, so the HMR socket connects without extra configuration.

Edit your code and see changes in the Preview view instantly - no refresh needed.

Supported frameworks

Any dev server that runs on a local port works:

Framework Command Default Port
Vite npm run dev 5173
Next.js npm run dev 3000
Create React App npm start 3000
Nuxt npm run dev 3000
SvelteKit npm run dev 5173

Just match the --proxy port to your dev server's port.

Use cases

Mobile testing

Test your responsive design on a real phone:

Shell
termbridge --proxy 5173

Scan the QR code and see your app exactly as it renders on mobile Safari or Chrome.

Full-stack development

Run commands in the terminal while watching your app:

  1. Watch build output in Terminal view
  2. See your app in Preview view
  3. Switch between them with a tap
  4. Keep working from your phone or tablet

Demo your work

Share the public URL with someone to show them:

  • Your running app (Preview)
  • Your terminal session (Terminal)

Great for remote pairing or quick demos.

Sandbox mode

When using Daytona sandboxes, set the preview port:

Shell
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Make sure your dev server binds to all interfaces:

Shell
npm run dev -- --host 0.0.0.0 --port 5173

Termbridge proxies the Daytona preview URL through the UI.

Troubleshooting

Preview shows blank page

  • Make sure your dev server is running
  • Check that the port matches --proxy
  • For sandbox mode, use --host 0.0.0.0 so the port is reachable

HMR not working

  • Verify your dev server supports HMR
  • Check browser console for WebSocket errors
  • Some frameworks need explicit HMR configuration

CORS errors

The proxy handles most CORS issues, but if your app makes requests to other origins:

  • Configure your dev server's CORS settings
  • Or use a browser extension to bypass CORS (for development only)