# Kūrimo serverio peržiūra

Termbridge gali perduoti jūsų vietinio kūrimo serverio užklausas ir rodyti jį peržiūros srityje. Tai puikiai tinka bandant mobiliajame įrenginyje arba stebint programą vykdant terminalo komandas.

## Greita pradžia

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

Dabar UI galite perjungti **Terminalo** ir **Peržiūros** rodinius.

## Kaip tai veikia

Kai nurodote `--proxy <port>`:

1. Visi Termbridge maršrutai lieka po `/__tb/`
2. Visos kitos užklausos perduodamos jūsų kūrimo serveriui
3. UI rodomas mygtukas **Rodiniai**, kuriuo galima perjungti terminalo ir peržiūros rodinius
4. Peržiūra įkelia jūsų programą į iframe per tarpinį serverį

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

## Rodinių perjungimas

1. Apatinėje juostoje bakstelėkite mygtuką **Rodiniai**
2. Pasirinkite **Perjungti į terminalą** arba **Perjungti į peržiūrą**
3. Rodinys atnaujinamas akimirksniu

Abu rodiniai lieka prijungti – terminalo sesija veikia toliau, kol peržiūrite programą.

## Karštasis modulių keitimas (HMR)

Vite HMR veikia per tarpinį serverį. Kiekvienas WebSocket ryšys iš prisijungusios naršyklės, išskyrus `/__tb/`, perduodamas jūsų kūrimo serveriui, kad ir koks būtų jo kelias, todėl HMR lizdas prisijungia be papildomos konfigūracijos.

Redaguokite kodą ir iškart matykite pakeitimus peržiūros rodinyje – nereikia atnaujinti puslapio.

## Palaikomos sistemos

Tinka bet kuris kūrimo serveris, veikiantis vietiniame prievade:

| Sistema | Komanda | Numatytasis prievadas |
|-----------|---------|--------------|
| 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 |

Tiesiog nurodykite tą patį `--proxy` prievadą kaip ir kūrimo serveryje.

## Naudojimo atvejai

### Testavimas mobiliuosiuose įrenginiuose

Išbandykite adaptyvųjį dizainą tikrame telefone:

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

Nuskaitykite QR kodą ir pamatykite programą tiksliai taip, kaip ji rodoma mobiliajame įrenginyje – Safari arba Chrome.

### Visos sistemos kūrimas

Vykdykite komandas terminale ir stebėkite savo programą:

1. Stebėkite kūrimo išvestį terminalo rodinyje
2. Peržiūrėkite programą peržiūros rodinyje
3. Perjunkite rodinius bakstelėję
4. Dirbkite toliau telefonu arba planšetiniu kompiuteriu

### Pademonstruokite savo darbą

Bendrinkite viešą URL, kad parodytumėte kitiems:

- Veikiančią programą (peržiūra)
- Terminalo sesiją (terminalas)

Puikiai tinka nuotoliniam darbui poroje arba greitoms demonstracijoms.

## Smėlio dėžės režimas

Naudodami Daytona smėlio dėžes, nustatykite peržiūros prievadą:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Įsitikinkite, kad jūsų kūrimo serveris susietas su visomis sąsajomis:

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

Termbridge per UI perduoda Daytona peržiūros URL.

## Trikčių šalinimas

### Peržiūra rodo tuščią puslapį

- Įsitikinkite, kad kūrimo serveris veikia
- Patikrinkite, ar prievadas sutampa su `--proxy`
- Smėlio dėžės režimu naudokite `--host 0.0.0.0`, kad prievadas būtų pasiekiamas

### HMR neveikia

- Patikrinkite, ar jūsų kūrimo serveris palaiko HMR
- Naršyklės konsolėje ieškokite WebSocket klaidų
- Kai kurias sistemas reikia aiškiai sukonfigūruoti HMR

### CORS klaidos

Tarpinis serveris išsprendžia daugumą CORS problemų, tačiau jei programa siunčia užklausas į kitus šaltinius:

- Sukonfigūruokite kūrimo serverio CORS nustatymus
- Arba naudokite naršyklės plėtinį, kad apeitumėte CORS (tik kūrimo metu)