# Náhled vývojového serveru

Termbridge může přesměrovat požadavky na váš místní vývojový server a zobrazit jeho náhled v samostatném panelu. Hodí se to pro testování na mobilu nebo sledování aplikace při práci s příkazy v terminálu.

## Rychlý začátek

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

V UI teď můžete přepínat mezi zobrazením **Terminál** a **Náhled**.

## Jak to funguje

Když předáte `--proxy <port>`:

1. Všechny trasy Termbridge zůstávají pod `/__tb/`
2. Všechny ostatní požadavky se přesměrovávají na váš vývojový server
3. V UI se zobrazí tlačítko **Zobrazení** pro přepínání mezi terminálem a náhledem
4. Aplikace se načte v prvku iframe přes proxy

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

## Přepínání zobrazení

1. Klepněte na tlačítko **Zobrazení** ve spodní liště
2. Vyberte **Přepnout na terminál** nebo **Přepnout na náhled**
3. Zobrazení se okamžitě změní

Obě zobrazení zůstávají připojená – relace terminálu pokračuje i při prohlížení náhledu.

## Hot Module Replacement (HMR)

HMR v Vite funguje přes proxy. Každé připojení WebSocketu mimo `/__tb/` z přihlášeného prohlížeče se přesměruje na váš vývojový server bez ohledu na cestu, takže se soket HMR připojí bez další konfigurace.

Upravte kód a sledujte změny v zobrazení Náhled okamžitě, bez obnovení stránky.

## Podporované frameworky

Funguje jakýkoli vývojový server běžící na místním portu:

| Framework | Příkaz | Výchozí port |
|-----------|---------|--------------|
| 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 |

Stačí nastavit port `--proxy` na port vašeho vývojového serveru.

## Příklady použití

### Testování na mobilu

Otestujte responzivní návrh na skutečném telefonu:

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

Naskenujte kód QR a podívejte se na aplikaci přesně tak, jak se zobrazuje v mobilním prohlížeči Safari nebo Chrome.

### Vývoj celé aplikace

Spouštějte příkazy v terminálu a současně sledujte aplikaci:

1. Sledujte výstup sestavení v zobrazení Terminál
2. Prohlížejte si aplikaci v zobrazení Náhled
3. Přepínejte mezi nimi klepnutím
4. Pokračujte v práci z telefonu nebo tabletu

### Předveďte svou práci

Sdílejte veřejný odkaz URL a ukažte někomu:

- Spuštěnou aplikaci (Náhled)
- Relaci terminálu (Terminál)

Ideální pro spolupráci na dálku nebo rychlé ukázky.

## Režim sandboxu

Při použití sandboxů Daytona nastavte port náhledu:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Ujistěte se, že vývojový server naslouchá na všech rozhraních:

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

Termbridge přesměrovává náhled Daytona přes URL v UI.

## Řešení problémů

### Náhled zobrazuje prázdnou stránku

- Ujistěte se, že vývojový server běží
- Zkontrolujte, zda port odpovídá portu `--proxy`
- V režimu sandboxu použijte `--host 0.0.0.0`, aby byl port dostupný

### HMR nefunguje

- Ověřte, zda váš vývojový server podporuje HMR
- Zkontrolujte chyby WebSocketu v konzoli prohlížeče
- Některé frameworky vyžadují výslovnou konfiguraci HMR

### Chyby CORS

Proxy řeší většinu problémů CORS, ale pokud vaše aplikace odesílá požadavky na jiné domény:

- Nakonfigurujte nastavení CORS vývojového serveru
- Nebo použijte rozšíření prohlížeče k obejití CORS (pouze pro vývoj)