# Fejlesztői szerver előnézete

A Termbridge proxyn keresztül továbbíthatja a helyi fejlesztői szervert, és megjelenítheti egy előnézeti panelen. Ez ideális mobilos teszteléshez vagy az alkalmazás megfigyeléséhez terminálparancsok futtatása közben.

## Gyors kezdés

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

Mostantól a UI felületen válthat a **Terminál** és az **Előnézet** nézet között.

## Működés

A `--proxy <port>` megadásakor:

1. Minden Termbridge útvonal a `/__tb/` alatt marad
2. Minden más kérést a rendszer a fejlesztői szerverhez továbbít
3. A UI felületén megjelenik a **Nézetek** gomb, amellyel válthat a Terminál és az Előnézet között
4. Az előnézet az alkalmazást proxy-n keresztüli iframe-ben tölti be

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

## Váltás a nézetek között

1. Koppintson az alsó sáv **Nézetek** gombjára
2. Válassza a **Váltás a terminálra** vagy a **Váltás az előnézetre** lehetőséget
3. A nézet azonnal frissül

Mindkét nézet kapcsolatban marad; a terminál munkamenete az előnézet megtekintése közben is folytatódik.

## Hot Module Replacement (HMR)

A Vite HMR-funkciója a proxyn keresztül működik. A rendszer a bejelentkezett böngészőből érkező, `/__tb/`-en kívüli összes WebSocket-kapcsolatot továbbítja a fejlesztői szerverhez, az útvonaltól függetlenül, így a HMR-kapcsolat további konfiguráció nélkül létrejön.

Módosítsa a kódot, és nézze meg azonnal a változásokat az Előnézet nézetben – frissítés nélkül.

## Támogatott keretrendszerek

Bármely helyi porton futó fejlesztői szerver használható:

| Keretrendszer | Parancs | Alapértelmezett port |
|-----------|---------|--------------|
| 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 |

Egyeztesse a `--proxy` portját a fejlesztői szerver portjával.

## Felhasználási esetek

### Mobilos tesztelés

Tesztelje az adaptív kialakítást egy valódi telefonon:

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

Olvassa be a QR kódot, és nézze meg, pontosan hogyan jelenik meg az alkalmazása mobilon, a Safari vagy a Chrome rendszerben.

### Teljes veremű fejlesztés

Futtasson parancsokat a terminálban, miközben figyeli az alkalmazást:

1. Figyelje a build kimenetét a Terminál nézetben
2. Tekintse meg az alkalmazást az Előnézet nézetben
3. Koppintással váltson közöttük
4. Folytassa a munkát telefonról vagy táblagépről

### Mutassa be a munkáját

Ossza meg a nyilvános URL hivatkozást, hogy megmutassa másoknak:

- A futó alkalmazását (Előnézet)
- A terminál munkamenetét (Terminál)

Kiváló távoli közös munkához vagy gyors bemutatókhoz.

## Sandboxmód

Daytona sandboxok használatakor állítsa be az előnézeti portot:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Ügyeljen arra, hogy a fejlesztői szerver minden hálózati interfészhez csatlakozzon:

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

A Termbridge a Daytona előnézeti URL értékét a UI-en keresztül továbbítja.

## Hibaelhárítás

### Az előnézet üres oldalt mutat

- Ellenőrizze, hogy fut-e a fejlesztői szerver
- Nézze meg, hogy a port megegyezik-e a `--proxy` értékével
- Sandboxmód esetén használja a `--host 0.0.0.0` értéket, hogy a port elérhető legyen

### Nem működik a HMR

- Ellenőrizze, hogy a fejlesztői szerver támogatja-e a HMR-t
- Keresse meg a WebSocket-hibákat a böngésző konzoljában
- Egyes keretrendszerekhez külön HMR-konfiguráció szükséges

### CORS hibák

A proxy a legtöbb CORS-problémát kezeli, de ha az alkalmazás más eredetű kéréseket küld:

- Állítsa be a fejlesztői szerver CORS-beállításait
- Vagy használjon böngészőbővítményt a CORS megkerülésére (csak fejlesztéshez)