# Previzualizarea serverului de dezvoltare

Termbridge poate redirecționa serverul local de dezvoltare și îl poate afișa într-un panou de previzualizare. Este ideal pentru testarea pe mobil sau pentru a urmări aplicația în timp ce rulați comenzi în terminal.

## Pornire rapidă

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

Acum puteți comuta între vizualizările **Terminal** și **Previzualizare** în UI.

## Cum funcționează

Când transmiteți `--proxy <port>`:

1. Toate rutele Termbridge rămân sub `/__tb/`
2. Toate celelalte cereri sunt redirecționate către serverul dvs. de dezvoltare
3. UI afișează un buton **Vizualizări** pentru a comuta între Terminal și Previzualizare
4. Previzualizarea încarcă aplicația într-un iframe prin proxy

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

## Comutarea vizualizărilor

1. Atingeți butonul **Vizualizări** din bara de jos
2. Alegeți **Comută la Terminal** sau **Comută la Previzualizare**
3. Vizualizarea se actualizează instantaneu

Ambele vizualizări rămân conectate; sesiunea din terminal continuă în timp ce vizualizați previzualizarea.

## Înlocuire la cald a modulelor (HMR)

HMR-ul pentru Vite funcționează prin proxy. Fiecare conexiune WebSocket din afara `/__tb/`, inițiată de un browser autentificat, este redirecționată către serverul dvs. de dezvoltare, indiferent de cale, astfel încât conexiunea HMR se stabilește fără configurare suplimentară.

Editați codul și vedeți instantaneu modificările în vizualizarea Previzualizare, fără să fie nevoie să reîmprospătați pagina.

## Frameworkuri acceptate

Funcționează orice server de dezvoltare care rulează pe un port local:

| Framework | Comandă | Port implicit |
|-----------|---------|--------------|
| 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 |

Asociați portul `--proxy` cu portul serverului dvs. de dezvoltare.

## Cazuri de utilizare

### Testare pe mobil

Testați designul responsiv pe un telefon real:

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

Scanați codul QR și vedeți aplicația exact așa cum se afișează pe mobil în Safari sau Chrome.

### Dezvoltare full-stack

Rulați comenzi în terminal în timp ce urmăriți aplicația:

1. Urmăriți rezultatul compilării în vizualizarea Terminal
2. Vedeți aplicația în vizualizarea Previzualizare
3. Comutați între ele cu o atingere
4. Continuați să lucrați de pe telefon sau tabletă

### Prezentați-vă munca

Partajați URL public cu cineva pentru a-i arăta:

- Aplicația în funcțiune (Previzualizare)
- Sesiunea din terminal (Terminal)

Ideal pentru colaborare la distanță sau demonstrații rapide.

## Modul sandbox

Când folosiți sandboxuri Daytona, setați portul de previzualizare:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Asigurați-vă că serverul de dezvoltare ascultă pe toate interfețele:

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

Termbridge redirecționează previzualizarea Daytona URL prin UI.

## Depanare

### Previzualizarea afișează o pagină goală

- Asigurați-vă că serverul de dezvoltare rulează
- Verificați ca portul să corespundă cu `--proxy`
- În modul sandbox, folosiți `--host 0.0.0.0` pentru ca portul să poată fi accesat

### HMR nu funcționează

- Verificați dacă serverul de dezvoltare acceptă HMR
- Verificați consola browserului pentru erori WebSocket
- Unele frameworkuri au nevoie de configurare HMR explicită

### Erori CORS

Proxy-ul gestionează majoritatea problemelor CORS, dar dacă aplicația trimite cereri către alte origini:

- Configurați setările CORS ale serverului de dezvoltare
- Sau folosiți o extensie de browser pentru a ocoli CORS (doar pentru dezvoltare)