# Náhľad vývojového servera

Termbridge dokáže sprostredkovať prístup k vášmu lokálnemu vývojovému serveru a zobraziť ho na paneli náhľadu. Je to ideálne na testovanie na mobile alebo sledovanie aplikácie počas spúšťania príkazov v termináli.

## Rýchly začiatok

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

Teraz môžete v UI prepínať medzi zobrazeniami **Terminál** a **Náhľad**.

## Ako to funguje

Keď zadáte `--proxy <port>`:

1. Všetky trasy Termbridge zostanú pod adresou `/__tb/`
2. Všetky ostatné požiadavky sa presmerujú na váš vývojový server
3. V UI sa zobrazí tlačidlo **Zobrazenia** na prepínanie medzi terminálom a náhľadom
4. Náhľad načíta vašu aplikáciu v rámci iframe cez proxy

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

## Prepínanie zobrazení

1. Ťuknite na tlačidlo **Zobrazenia** na spodnom paneli
2. Vyberte **Prepnúť na terminál** alebo **Prepnúť na náhľad**
3. Zobrazenie sa okamžite zmení

Obe zobrazenia zostanú pripojené – relácia terminálu pokračuje, aj keď si prezeráte náhľad.

## Hot Module Replacement (HMR)

HMR nástroja Vite funguje cez proxy. Každé pripojenie WebSocket mimo `/__tb/` z prihláseného prehliadača sa presmeruje na váš vývojový server bez ohľadu na jeho cestu, takže soket HMR sa pripojí bez ďalšej konfigurácie.

Upravte kód a okamžite uvidíte zmeny v zobrazení náhľadu – bez obnovenia stránky.

## Podporované frameworky

Funguje akýkoľvek vývojový server spustený na lokálnom porte:

| Framework | Príkaz | Predvolený 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čí nastaviť port `--proxy` rovnako ako port vášho vývojového servera.

## Prípady použitia

### Testovanie na mobile

Otestujte responzívny dizajn na skutočnom telefóne:

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

Naskenujte kód QR a uvidíte svoju aplikáciu presne tak, ako sa zobrazuje na mobile Safari alebo Chrome.

### Vývoj full-stack aplikácií

Spúšťajte príkazy v termináli a zároveň sledujte svoju aplikáciu:

1. Sledujte výstup zostavenia v zobrazení terminálu
2. Pozrite si aplikáciu v zobrazení náhľadu
3. Prepínajte medzi nimi ťuknutím
4. Pokračujte v práci z telefónu alebo tabletu

### Predveďte svoju prácu

Zdieľajte verejný URL, aby ste niekomu ukázali:

- Spustenú aplikáciu (náhľad)
- Reláciu terminálu (terminál)

Skvelé na vzdialenú spoluprácu vo dvojici alebo rýchle ukážky.

## Režim sandboxu

Pri používaní sandboxov Daytona nastavte port náhľadu:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Skontrolujte, či je váš vývojový server nastavený na počúvanie na všetkých rozhraniach:

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

Termbridge sprostredkúva náhľad Daytona URL cez UI.

## Riešenie problémov

### V náhľade sa zobrazuje prázdna stránka

- Skontrolujte, či váš vývojový server beží
- Skontrolujte, či sa port zhoduje s hodnotou `--proxy`
- V režime sandboxu použite `--host 0.0.0.0`, aby bol port dostupný

### HMR nefunguje

- Overte, či váš vývojový server podporuje HMR
- V konzole prehliadača skontrolujte chyby WebSocket
- Niektoré frameworky vyžadujú výslovnú konfiguráciu HMR

### Chyby CORS

Proxy rieši väčšinu problémov s CORS, no ak vaša aplikácia posiela požiadavky na iné zdroje:

- Nakonfigurujte nastavenia CORS vývojového servera
- Alebo použite rozšírenie prehliadača na obídenie CORS (iba na vývoj)