# Voorbeeldweergave van ontwikkelserver

Termbridge kan je lokale ontwikkelserver via een proxy tonen in een voorbeeldpaneel. Dit is ideaal voor tests op mobiele apparaten of om je app te volgen terwijl je terminalopdrachten uitvoert.

## Snel aan de slag

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

Je kunt nu in de UI schakelen tussen de weergaven **Terminal** en **Preview**.

## Werking

Wanneer je `--proxy <port>` opgeeft:

1. Blijven alle Termbridge-routes onder `/__tb/`
2. Worden alle andere verzoeken naar je ontwikkelserver geproxied
3. Toont de UI een knop **Views** om te schakelen tussen Terminal en Preview
4. Wordt je app in een iframe via de proxy geladen

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

## Schakelen tussen weergaven

1. Tik op de knop **Views** in de onderste balk
2. Kies **Switch to Terminal** of **Switch to Preview**
3. De weergave wordt meteen bijgewerkt

Beide weergaven blijven verbonden: je terminalsessie loopt door terwijl je de voorbeeldweergave bekijkt.

## Hot Module Replacement (HMR)

De HMR van Vite werkt via de proxy. Elke WebSocket-verbinding buiten `/__tb/` van een aangemelde browser wordt doorgestuurd naar je ontwikkelserver, ongeacht het pad. Zo maakt de HMR-socket verbinding zonder extra configuratie.

Bewerk je code en zie de wijzigingen meteen in de Preview-weergave, zonder opnieuw te laden.

## Ondersteunde frameworks

Elke ontwikkelserver die op een lokale poort draait, werkt:

| Framework | Opdracht | Standaardpoort |
|-----------|---------|--------------|
| 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 |

Stem de poort van `--proxy` af op die van je ontwikkelserver.

## Toepassingen

### Testen op mobiele apparaten

Test je responsieve ontwerp op een echte telefoon:

```bash
termbridge --proxy 5173
```

Scan de QR-code en bekijk je app precies zoals deze wordt weergegeven op Safari of Chrome op mobiel.

### Full-stackontwikkeling

Voer opdrachten uit in de terminal terwijl je je app bekijkt:

1. Bekijk de builduitvoer in de Terminal-weergave
2. Bekijk je app in de Preview-weergave
3. Schakel ertussen met één tik
4. Blijf werken vanaf je telefoon of tablet

### Je werk demonstreren

Deel de openbare URL met iemand om het volgende te laten zien:

- Je actieve app (Preview)
- Je terminalsessie (Terminal)

Ideaal voor samenwerking op afstand of snelle demo's.

## Sandboxmodus

Stel de voorbeeldpoort in wanneer je Daytona-sandboxes gebruikt:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Zorg dat je ontwikkelserver aan alle interfaces is gebonden:

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

Termbridge proxyt de Daytona-voorbeeld-URL via de UI.

## Problemen oplossen

### Voorbeeld toont een lege pagina

- Controleer of je ontwikkelserver actief is
- Controleer of de poort overeenkomt met `--proxy`
- Gebruik voor de sandboxmodus `--host 0.0.0.0` zodat de poort bereikbaar is

### HMR werkt niet

- Controleer of je ontwikkelserver HMR ondersteunt
- Controleer de browserconsole op WebSocket-fouten
- Voor sommige frameworks is expliciete HMR-configuratie nodig

### CORS-fouten

De proxy lost de meeste CORS-problemen op, maar als je app verzoeken naar andere origins verstuurt:

- Configureer de CORS-instellingen van je ontwikkelserver
- Of gebruik een browserextensie om CORS te omzeilen (alleen voor ontwikkeling)