# Förhandsvisning av utvecklingsserver

Termbridge kan vidarebefordra trafiken till din lokala utvecklingsserver och visa den i en förhandsvisningspanel. Perfekt för mobila tester eller för att hålla koll på appen medan du kör terminalkommandon.

## Snabbstart

```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 växla mellan vyerna **Terminal** och **Förhandsvisning** i UI.

## Så fungerar det

När du skickar med `--proxy <port>`:

1. Alla Termbridge-rutter ligger kvar under `/__tb/`
2. Alla andra förfrågningar vidarebefordras till din utvecklingsserver
3. UI visar en **Vyer**-knapp som växlar mellan Terminal och Förhandsvisning
4. Förhandsvisningen läser in din app i en iframe via proxyn

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

## Växla vy

1. Tryck på knappen **Vyer** i fältet längst ned
2. Välj **Växla till Terminal** eller **Växla till Förhandsvisning**
3. Vyn uppdateras direkt

Båda vyerna förblir anslutna – terminalsessionen fortsätter medan du visar förhandsvisningen.

## Hot Module Replacement (HMR)

Vites HMR fungerar via proxyn. Varje WebSocket-anslutning utanför `/__tb/` från en inloggad webbläsare vidarebefordras till din utvecklingsserver, oavsett sökväg, så HMR-uttaget ansluts utan extra konfiguration.

Redigera koden och se ändringarna direkt i vyn Förhandsvisning – du behöver inte uppdatera sidan.

## Ramverk som stöds

Alla utvecklingsservrar som körs på en lokal port fungerar:

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

Ange bara samma port för `--proxy` som för din utvecklingsserver.

## Användningsområden

### Testa på mobilen

Testa din responsiva design på en riktig telefon:

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

Skanna QR-koden och se din app precis som den visas på mobilen i Safari eller Chrome.

### Fullstackutveckling

Kör kommandon i terminalen medan du håller koll på appen:

1. Följ byggutdata i terminalvyn
2. Se appen i vyn Förhandsvisning
3. Växla mellan vyerna med ett tryck
4. Fortsätt arbeta från mobilen eller surfplattan

### Dela en demo av arbetet

Dela den offentliga URL med någon för att visa:

- Appen som körs (Förhandsvisning)
- Din terminalsession (Terminal)

Perfekt för distansarbete i par eller snabba demonstrationer.

## Sandboxläge

När du använder Daytona-sandboxes anger du förhandsvisningsporten:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Se till att utvecklingsservern lyssnar på alla gränssnitt:

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

Termbridge vidarebefordrar förhandsvisningen Daytona via URL UI.

## Felsökning

### Förhandsvisningen visar en tom sida

- Kontrollera att utvecklingsservern körs
- Kontrollera att porten matchar `--proxy`
- Använd `--host 0.0.0.0` i sandboxläget så att porten går att nå

### HMR fungerar inte

- Kontrollera att utvecklingsservern stöder HMR
- Kontrollera webbläsarens konsol efter WebSocket-fel
- Vissa ramverk kräver uttrycklig HMR-konfiguration

### CORS-fel

Proxyn hanterar de flesta CORS-problemen, men om appen skickar förfrågningar till andra ursprung:

- Konfigurera utvecklingsserverns CORS-inställningar
- Eller använd ett webbläsartillägg för att kringgå CORS (endast för utveckling)