Dev-Server-Vorschau

Termbridge kann deinen lokalen Dev-Server über einen Proxy einbinden und in einem Vorschaufenster anzeigen. Das ist ideal für mobile Tests oder wenn du deine App während der Arbeit im Terminal im Blick behalten möchtest.

Schnellstart

# 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

Jetzt kannst du in der UI zwischen den Ansichten Terminal und Vorschau wechseln.

So funktioniert es

Wenn du --proxy <port> angibst:

1. Alle Termbridge-Routen bleiben unter /__tb/
2. Alle anderen Anfragen werden an deinen Dev-Server weitergeleitet
3. In der UI erscheint eine Schaltfläche Ansichten, über die du zwischen Terminal und Vorschau wechselst
4. Die Vorschau lädt deine App in einem iframe über den Proxy

Browser → Termbridge → Your dev server (localhost:5173)

Zwischen Ansichten wechseln

1. Tippe in der unteren Leiste auf Ansichten
2. Wähle Zu Terminal wechseln oder Zur Vorschau wechseln
3. Die Ansicht wird sofort aktualisiert

Beide Ansichten bleiben verbunden – deine Terminalsitzung läuft weiter, während du die Vorschau ansiehst.

Hot Module Replacement (HMR)

Vites HMR funktioniert über den Proxy. Jede WebSocket-Verbindung von einem angemeldeten Browser, die nicht über /__tb/ läuft, wird unabhängig von ihrem Pfad an deinen Dev-Server weitergeleitet. So wird der HMR-Socket ohne zusätzliche Konfiguration verbunden.

Bearbeite deinen Code und sieh die Änderungen sofort in der Vorschau – ohne Aktualisierung.

Unterstützte Frameworks

Jeder Dev-Server an einem lokalen Port funktioniert:

Stimme einfach den --proxy-Port auf den Port deines Dev-Servers ab.

Anwendungsfälle

Auf Mobilgeräten testen

Teste dein responsives Design auf einem echten Smartphone:

termbridge --proxy 5173

Scanne den QR-Code und sieh deine App genau so, wie sie in Safari oder Chrome auf Mobilgeräten dargestellt wird.

Full-Stack-Entwicklung

Führe Befehle im Terminal aus und behalte dabei deine App im Blick:

1. Verfolge die Build-Ausgabe in der Terminalansicht
2. Sieh dir deine App in der Vorschau an
3. Wechsle mit einem Tippen zwischen den Ansichten
4. Arbeite von deinem Smartphone oder Tablet aus weiter

Zeige deine Arbeit

Teile die öffentliche URL, um anderen Folgendes zu zeigen:

• Deine laufende App (Vorschau)
• Deine Terminalsitzung (Terminal)

Ideal für die Zusammenarbeit aus der Ferne oder schnelle Demos.

Sandbox-Modus

Lege bei Daytona-Sandboxes den Vorschau-Port fest:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Stelle sicher, dass dein Dev-Server an alle Schnittstellen gebunden ist:

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

Termbridge leitet die Daytona-Vorschau URL über den UI weiter.

Fehlerbehebung

Vorschau zeigt eine leere Seite

• Prüfe, ob dein Dev-Server läuft
• Prüfe, ob der Port mit --proxy übereinstimmt
• Verwende im Sandbox-Modus --host 0.0.0.0, damit der Port erreichbar ist

HMR funktioniert nicht

• Prüfe, ob dein Dev-Server HMR unterstützt
• Suche in der Browserkonsole nach WebSocket-Fehlern
• Bei einigen Frameworks muss HMR ausdrücklich konfiguriert werden

CORS-Fehler

Der Proxy behebt die meisten CORS-Probleme. Wenn deine App jedoch Anfragen an andere Ursprünge sendet:

• Konfiguriere die CORS-Einstellungen deines Dev-Servers
• Oder verwende eine Browsererweiterung, um CORS zu umgehen (nur für die Entwicklung)