# Izstrādes servera priekšskatījums

Termbridge var maršrutēt pieprasījumus uz jūsu lokālo izstrādes serveri un parādīt to priekšskatījuma panelī. Tas ir lieliski piemērots testēšanai mobilajās ierīcēs vai lietotnes vērošanai, kamēr izpildāt termināļa komandas.

## Ātrais sākums

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

Tagad varat pārslēgties starp **Termināļa** un **Priekšskatījuma** skatu UI.

## Kā tas darbojas

Nododot `--proxy <port>`:

1. Visi Termbridge maršruti paliek zem `/__tb/`
2. Visi pārējie pieprasījumi tiek pārsūtīti uz jūsu izstrādes serveri
3. UI tiek parādīta poga **Skati**, lai pārslēgtos starp termināli un priekšskatījumu
4. Priekšskatījumā lietotne tiek ielādēta iframe, izmantojot starpniekserveri

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

## Skatu pārslēgšana

1. Apakšējā joslā pieskarieties pogai **Skati**
2. Izvēlieties **Pārslēgties uz termināli** vai **Pārslēgties uz priekšskatījumu**
3. Skats tiek atjaunināts uzreiz

Abi skati paliek savienoti — termināļa sesija turpinās, kamēr skatāties priekšskatījumu.

## Karsto moduļu aizstāšana (HMR)

Vite HMR darbojas, izmantojot starpniekserveri. Katrs WebSocket savienojums no pieteikušās pārlūkprogrammas, kas nav `/__tb/`, tiek pārsūtīts uz jūsu izstrādes serveri neatkarīgi no tā ceļa, tāpēc HMR ligzda savienojas bez papildu konfigurācijas.

Rediģējiet kodu un uzreiz skatiet izmaiņas priekšskatījuma skatā — nav nepieciešama atsvaidzināšana.

## Atbalstītie ietvari

Der jebkurš izstrādes serveris, kas darbojas lokālajā portā:

| Ietvars | Komanda | Noklusējuma ports |
|-----------|---------|--------------|
| 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 |

Vienkārši iestatiet `--proxy` portu tādu pašu kā izstrādes servera portu.

## Lietojuma gadījumi

### Testēšana mobilajās ierīcēs

Pārbaudiet adaptīvo dizainu īstā tālrunī:

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

Skenējiet QR kodu un skatiet savu lietotni tieši tā, kā tā tiek attēlota mobilajā Safari vai Chrome.

### Pilna steka izstrāde

Izpildiet komandas terminālī, vienlaikus vērojot lietotni:

1. Skatiet būvēšanas izvadi termināļa skatā
2. Skatiet lietotni priekšskatījuma skatā
3. Pārslēdzieties starp tiem ar vienu pieskārienu
4. Turpiniet darbu tālrunī vai planšetdatorā

### Demonstrējiet savu darbu

Kopīgojiet publisko URL ar kādu, lai parādītu:

- Jūsu palaisto lietotni (priekšskatījums)
- Jūsu termināļa sesiju (terminālis)

Lieliski noder attālinātam kopdarbam vai ātrām demonstrācijām.

## Smilškastes režīms

Izmantojot Daytona smilškastes, iestatiet priekšskatījuma portu:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Pārliecinieties, ka jūsu izstrādes serveris pieņem savienojumus visās saskarnēs:

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

Termbridge maršrutē Daytona priekšskatījumu URL caur UI.

## Problēmu novēršana

### Priekšskatījumā redzama tukša lapa

- Pārliecinieties, ka izstrādes serveris darbojas
- Pārbaudiet, vai ports atbilst `--proxy`
- Smilškastes režīmā izmantojiet `--host 0.0.0.0`, lai ports būtu sasniedzams

### HMR nedarbojas

- Pārbaudiet, vai izstrādes serveris atbalsta HMR
- Pārbaudiet, vai pārlūkprogrammas konsolē nav WebSocket kļūdu
- Dažiem ietvariem nepieciešama īpaša HMR konfigurācija

### CORS kļūdas

Starpniekserveris novērš lielāko daļu CORS problēmu, taču, ja lietotne veic pieprasījumus uz citām izcelsmēm:

- Konfigurējiet izstrādes servera CORS iestatījumus
- Vai izmantojiet pārlūkprogrammas paplašinājumu, lai apietu CORS (tikai izstrādei)