# Predogled razvojnega strežnika

Termbridge lahko posreduje zahteve vašega lokalnega razvojnega strežnika in ga prikaže v podoknu za predogled. To je idealno za preizkušanje na mobilnih napravah ali spremljanje aplikacije med izvajanjem ukazov v terminalu.

## Hiter začetek

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

Zdaj lahko v UI preklapljate med pogledoma **Terminal** in **Predogled**.

## Kako deluje

Ko posredujete `--proxy <port>`:

1. Vse poti Termbridge ostanejo pod `/__tb/`
2. Vse druge zahteve se posredujejo vašemu razvojnemu strežniku
3. UI prikaže gumb **Pogledi** za preklapljanje med terminalom in predogledom
4. Predogled naloži vašo aplikacijo v okvirju iframe prek posredniškega strežnika

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

## Preklapljanje med pogledi

1. V spodnji vrstici tapnite gumb **Pogledi**
2. Izberite **Preklopi na terminal** ali **Preklopi na predogled**
3. Pogled se takoj posodobi

Oba pogleda ostaneta povezana – vaša terminalska seja se nadaljuje, medtem ko si ogledujete predogled.

## Zamenjava modulov v živo (HMR)

HMR za Vite deluje prek posredniškega strežnika. Vsaka povezava WebSocket zunaj `/__tb/` iz prijavljenega brskalnika se posreduje vašemu razvojnemu strežniku, ne glede na pot, zato se vtičnica HMR poveže brez dodatne nastavitve.

Uredite kodo in si takoj oglejte spremembe v pogledu Predogled – osvežitev ni potrebna.

## Podprta ogrodja

Deluje kateri koli razvojni strežnik, ki uporablja lokalna vrata:

| Ogrodje | Ukaz | Privzeta vrata |
|-----------|---------|--------------|
| 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 |

Samo uskladite vrata `--proxy` z vrati svojega razvojnega strežnika.

## Primeri uporabe

### Preizkušanje na mobilnih napravah

Oprezno zasnovo preizkusite na pravem telefonu:

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

Optično preberite kodo QR in si oglejte aplikacijo natanko tako, kot je prikazana na mobilni napravi Safari ali Chrome.

### Razvoj celotnega sklada

Izvajajte ukaze v terminalu in hkrati spremljajte aplikacijo:

1. Spremljajte izpis gradnje v pogledu Terminal
2. Oglejte si aplikacijo v pogledu Predogled
3. Med njima preklopite z enim dotikom
4. Nadaljujte delo v telefonu ali tablici

### Predstavite svoje delo

Delite javni URL z nekom in mu pokažite:

- Delujočo aplikacijo (Predogled)
- Svojo terminalsko sejo (Terminal)

Odlično za delo v paru na daljavo ali hitre predstavitve.

## Način peskovnika

Pri uporabi peskovnikov Daytona nastavite vrata za predogled:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Poskrbite, da bo vaš razvojni strežnik vezan na vse vmesnike:

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

Termbridge posreduje predogled Daytona URL prek UI.

## Odpravljanje težav

### Predogled prikaže prazno stran

- Preverite, ali vaš razvojni strežnik deluje
- Preverite, ali se vrata ujemajo z `--proxy`
- V načinu peskovnika uporabite `--host 0.0.0.0`, da bodo vrata dosegljiva

### HMR ne deluje

- Preverite, ali vaš razvojni strežnik podpira HMR
- V konzoli brskalnika preverite napake WebSocket
- Nekatera ogrodja zahtevajo izrecno nastavitev HMR

### Napake CORS

Posredniški strežnik obravnava večino težav CORS, če pa vaša aplikacija pošilja zahteve na druga izvorna mesta:

- Nastavite možnosti CORS razvojnega strežnika
- Ali pa uporabite razširitev brskalnika za obhod CORS (samo za razvoj)