# Kehityspalvelimen esikatselu

Termbridge voi välittää paikallisen kehityspalvelimesi ja näyttää sen esikatselupaneelissa. Tämä sopii erityisesti mobiilitestaukseen tai sovelluksen seuraamiseen päätelaitteen komentojen suorittamisen aikana.

## Pika-aloitus

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

Nyt voit vaihtaa näkymien **Pääte** ja **Esikatselu** välillä UI-ympäristössä.

## Näin se toimii

Kun annat parametrin `--proxy <port>`:

1. Kaikki Termbridge-reitit pysyvät osoitteessa `/__tb/`
2. Kaikki muut pyynnöt välitetään kehityspalvelimellesi
3. UI näyttää **Näkymät**-painikkeen, jolla voi vaihtaa Päätteen ja Esikatselun välillä
4. Esikatselu lataa sovelluksesi välityspalvelimen kautta iframe-kehykseen

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

## Näkymien vaihtaminen

1. Napauta alapalkin **Näkymät**-painiketta
2. Valitse **Vaihda päätetilaan** tai **Vaihda esikatseluun**
3. Näkymä vaihtuu heti

Molemmat näkymät pysyvät yhteydessä – päätelaiteistuntosi jatkuu esikatselua katsellessasi.

## Hot Module Replacement (HMR)

Vite-palvelun HMR toimii välityspalvelimen kautta. Kaikki kirjautuneen selaimen WebSocket-yhteydet, jotka eivät kuulu osoitteeseen `/__tb/`, välitetään kehityspalvelimellesi polusta riippumatta, joten HMR-yhteys toimii ilman lisämäärityksiä.

Muokkaa koodiasi ja näe muutokset heti Esikatselu-näkymässä – sivua ei tarvitse ladata uudelleen.

## Tuetut kehykset

Kaikki paikallisessa portissa toimivat kehityspalvelimet käyvät:

| Kehys | Komento | Oletusportti |
|-----------|---------|--------------|
| 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 |

Aseta vain `--proxy`-portin arvoksi kehityspalvelimesi portti.

## Käyttötapaukset

### Mobiilitestaus

Testaa responsiivista asetteluasi oikealla puhelimella:

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

Skannaa QR-koodi ja näe sovelluksesi sellaisena kuin se näkyy mobiililaitteessa Safari tai Chrome-selaimessa.

### Full stack -kehitys

Suorita komentoja päätteessä samalla, kun seuraat sovellustasi:

1. Seuraa koontitulostetta Pääte-näkymässä
2. Näe sovelluksesi Esikatselu-näkymässä
3. Vaihda niiden välillä napauttamalla
4. Jatka työskentelyä puhelimella tai tabletilla

### Esittele työsi

Jaa julkinen URL jollekulle, jotta voit näyttää hänelle seuraavat:

- Käynnissä olevan sovelluksesi (Esikatselu)
- Päätelaiteistuntosi (Pääte)

Sopii hyvin etätyöskentelyyn parin kanssa tai nopeisiin demoihin.

## Hiekkalaatikkotila

Kun käytät Daytona-hiekkalaatikoita, määritä esikatseluportti:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Varmista, että kehityspalvelimesi on sidottu kaikkiin verkkoliittymiin:

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

Termbridge välittää Daytona-esikatselun URL-portin UI-palvelimen kautta.

## Vianmääritys

### Esikatselussa näkyy tyhjä sivu

- Varmista, että kehityspalvelin on käynnissä
- Tarkista, että portti vastaa arvoa `--proxy`
- Käytä hiekkalaatikkotilassa asetusta `--host 0.0.0.0`, jotta porttiin pääsee käsiksi

### HMR ei toimi

- Varmista, että kehityspalvelimesi tukee HMR:ää
- Tarkista WebSocket-virheet selaimen konsolista
- Jotkin kehykset vaativat HMR:n erillisen määrityksen

### CORS-virheet

Välityspalvelin käsittelee useimmat CORS-ongelmat. Jos sovelluksesi kuitenkin lähettää pyyntöjä muihin alkuperiin:

- Määritä kehityspalvelimesi CORS-asetukset
- Tai ohita CORS selaimen laajennuksella (vain kehityskäyttöön)