# Arendusserveri eelvaade

Termbridge saab kohaliku arendusserveri puhverserveri kaudu edastada ja kuvada selle eelvaatepaanil. See sobib suurepäraselt mobiilseadmes testimiseks või rakenduse jälgimiseks terminalikäskude käivitamise ajal.

## Kiire alustamine

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

Nüüd saad UI vaates lülituda **Terminali** ja **Eelvaate** vahel.

## Kuidas see töötab

Kui edastad argumendi `--proxy <port>`:

1. Kõik Termbridge marsruudid jäävad asukohta `/__tb/`
2. Kõik muud päringud edastatakse sinu arendusserverisse
3. UI kuvab nuppu **Vaated**, millega saab lülituda terminali ja eelvaate vahel
4. Eelvaade laadib sinu rakenduse puhverserveri kaudu iframe'is

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

## Vaadete vahetamine

1. Puuduta alumisel ribal nuppu **Vaated**
2. Vali **Lülitu terminalile** või **Lülitu eelvaatele**
3. Vaade uueneb kohe

Mõlemad vaated jäävad ühendatuks – terminaliseanss jätkub ka eelvaate vaatamise ajal.

## Kuum moodulivahetus (HMR)

Vite HMR töötab puhverserveri kaudu. Kõik WebSocket-ühendused, mis tulevad sisselogitud brauserist väljastpoolt `/__tb/`, edastatakse sinu arendusserverisse olenemata nende teest. Seetõttu ühendub HMR-pesa ilma lisaseadistuseta.

Muuda koodi ja näe muudatusi kohe eelvaates – värskendamist pole vaja.

## Toetatud raamistikud

Töötab iga arendusserver, mis kasutab kohalikku porti:

| Raamistik | Käsk | Vaikeport |
|-----------|---------|--------------|
| 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 |

Pane lihtsalt `--proxy` port vastavusse arendusserveri pordiga.

## Kasutusjuhud

### Mobiilitestimine

Testi tundlikku kujundust päris telefonis:

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

Skanni kood QR ja vaata, kuidas rakendus mobiilseadme Safari või Chrome ekraanil täpselt kuvatakse.

### Täislahenduse arendus

Käivita terminalis käske ja jälgi samal ajal rakendust:

1. Jälgi järgu väljundit terminalivaates
2. Vaata rakendust eelvaatevaates
3. Lülitu vaadete vahel ühe puudutusega
4. Jätka tööd telefonis või tahvelarvutis

### Töö demonstreerimine

Jaga avalikku URL-i, et kellelegi näidata järgmist:

- Töötav rakendus (eelvaade)
- Terminaliseanss (terminal)

Sobib suurepäraselt kaugtööks koos või kiireteks demodeks.

## Liivakastirežiim

Liivakastide Daytona kasutamisel määra eelvaate port:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Veendu, et arendusserver on seotud kõigi liidestega:

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

Termbridge vahendab Daytona eelvaadet URL kaudu UI.

## Tõrkeotsing

### Eelvaade kuvab tühja lehe

- Veendu, et arendusserver töötab
- Kontrolli, kas port vastab väärtusele `--proxy`
- Liivakastirežiimis kasuta `--host 0.0.0.0`, et port oleks kättesaadav

### HMR ei tööta

- Veendu, et sinu arendusserver toetab HMR-i
- Otsi brauseri konsoolist WebSocketi vigu
- Mõni raamistik vajab HMR-i selgesõnalist seadistamist

### CORS vead

Puhverserver lahendab enamiku CORS probleemidest, kuid kui rakendus saadab päringuid teistele lähtekohtadele:

- Seadista arendusserveri CORS sätted
- Või kasuta brauserilaiendit, et CORS-st mööda minna (ainult arenduseks)