# 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

```bash
# 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:

| Framework | Befehl | Standardport |
|-----------|---------|--------------|
| 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 |

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:

```bash
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:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

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

```bash
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)