# Forhåndsvisning af udviklingsserver

Termbridge kan fungere som proxy for din lokale udviklingsserver og vise den i et forhåndsvisningspanel. Det er ideelt til mobiltest eller til at holde øje med din app, mens du kører terminalkommandoer.

## Hurtig start

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

Nu kan du skifte mellem visningerne **Terminal** og **Forhåndsvisning** i UI.

## Sådan fungerer det

Når du angiver `--proxy <port>`:

1. Alle Termbridge-ruter forbliver under `/__tb/`
2. Alle andre anmodninger sendes videre til din udviklingsserver via en proxy
3. UI viser en knap med teksten **Visninger**, som skifter mellem Terminal og Forhåndsvisning
4. Forhåndsvisningen indlæser din app i en iframe via proxien

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

## Skift visning

1. Tryk på knappen **Visninger** i den nederste bjælke
2. Vælg **Skift til terminal** eller **Skift til forhåndsvisning**
3. Visningen opdateres med det samme

Begge visninger forbliver forbundet – din terminalsession fortsætter, mens du ser forhåndsvisningen.

## Hot Module Replacement (HMR)

Vites HMR fungerer via proxien. Hver WebSocket-forbindelse fra en browser, der er logget ind, og som ligger uden for `/__tb/`, videresendes til din udviklingsserver, uanset stien, så HMR-socketen opretter forbindelse uden ekstra konfiguration.

Redigér din kode, og se ændringerne med det samme i forhåndsvisningen – uden at opdatere siden.

## Understøttede frameworks

Alle udviklingsservere, der kører på en lokal port, fungerer:

| Framework | Kommando | 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 |

Match blot porten `--proxy` med din udviklingsservers port.

## Anvendelsesområder

### Test på mobil

Test dit responsive design på en rigtig telefon:

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

Scan QR-koden, og se din app præcis, som den vises på mobil Safari eller Chrome.

### Fullstackudvikling

Kør kommandoer i terminalen, mens du holder øje med din app:

1. Følg byggeoutputtet i terminalvisningen
2. Se din app i forhåndsvisningen
3. Skift mellem dem med et tryk
4. Fortsæt arbejdet fra din telefon eller tablet

### Vis dit arbejde

Del den offentlige URL med nogen for at vise:

- Din app, der kører (forhåndsvisning)
- Din terminalsession (terminal)

Velegnet til fjernsamarbejde eller hurtige demoer.

## Sandkassetilstand

Når du bruger Daytona-sandkasser, skal du angive forhåndsvisningens port:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Sørg for, at din udviklingsserver lytter på alle grænseflader:

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

Termbridge fungerer som proxy for Daytona forhåndsvisning URL gennem UI.

## Fejlfinding

### Forhåndsvisningen viser en tom side

- Sørg for, at din udviklingsserver kører
- Kontrollér, at porten stemmer overens med `--proxy`
- Brug `--host 0.0.0.0` i sandkassetilstand, så porten er tilgængelig

### HMR fungerer ikke

- Kontrollér, at din udviklingsserver understøtter HMR
- Se efter WebSocket-fejl i browserkonsollen
- Nogle frameworks kræver eksplicit HMR-konfiguration

### CORS-fejl

Proxien håndterer de fleste CORS-problemer, men hvis din app sender anmodninger til andre oprindelser:

- Konfigurér din udviklingsservers CORS-indstillinger
- Eller brug en browserudvidelse til at omgå CORS (kun til udvikling)