# Anteprima del server di sviluppo

Termbridge può inoltrare il server di sviluppo locale e mostrarlo in un riquadro di anteprima. È perfetto per i test su dispositivi mobili o per seguire l'app mentre eseguite comandi nel terminale.

## Avvio rapido

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

Ora potete passare dalle viste **Terminale** e **Anteprima** in UI.

## Come funziona

Quando specificate `--proxy <port>`:

1. Tutte le route di Termbridge restano sotto `/__tb/`
2. Tutte le altre richieste vengono inoltrate al server di sviluppo
3. UI mostra un pulsante **Viste** per passare da Terminale ad Anteprima
4. L'anteprima carica l'app in un iframe tramite il proxy

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

## Passare da una vista all'altra

1. Toccate il pulsante **Viste** nella barra inferiore
2. Scegliete **Passa al terminale** o **Passa all'anteprima**
3. La vista si aggiorna subito

Entrambe le viste restano connesse: la sessione del terminale continua mentre visualizzate l'anteprima.

## Hot Module Replacement (HMR)

L'HMR di Vite funziona tramite il proxy. Ogni connessione WebSocket proveniente da un browser autenticato e diretta a un indirizzo diverso da `/__tb/` viene inoltrata al server di sviluppo, qualunque sia il percorso, così il socket HMR si connette senza configurazioni aggiuntive.

Modificate il codice e vedete subito le modifiche nella vista Anteprima, senza aggiornare la pagina.

## Framework supportati

Funziona con qualsiasi server di sviluppo in esecuzione su una porta locale:

| Framework | Comando | Porta predefinita |
|-----------|---------|--------------|
| 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 |

Impostate semplicemente la porta `--proxy` uguale a quella del server di sviluppo.

## Casi d'uso

### Test su dispositivi mobili

Testate il design responsive su un telefono reale:

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

Scansionate il codice QR e vedete l'app esattamente come viene visualizzata su un dispositivo mobile con Safari o Chrome.

### Sviluppo full stack

Eseguite comandi nel terminale mentre osservate l'app:

1. Seguite l'output della build nella vista Terminale
2. Visualizzate l'app nella vista Anteprima
3. Passate da una vista all'altra con un tocco
4. Continuate a lavorare dal telefono o dal tablet

### Mostrate il vostro lavoro

Condividete il link pubblico URL per mostrare:

- La vostra app in esecuzione (Anteprima)
- La vostra sessione del terminale (Terminale)

Ideale per collaborare da remoto o fare dimostrazioni rapide.

## Modalità sandbox

Quando usate le sandbox Daytona, impostate la porta di anteprima:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Assicuratevi che il server di sviluppo sia associato a tutte le interfacce:

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

Termbridge inoltra l'anteprima Daytona tramite URL UI.

## Risoluzione dei problemi

### La pagina di anteprima è vuota

- Assicuratevi che il server di sviluppo sia in esecuzione
- Verificate che la porta corrisponda a `--proxy`
- In modalità sandbox, usate `--host 0.0.0.0` per rendere raggiungibile la porta

### HMR non funziona

- Verificate che il server di sviluppo supporti HMR
- Controllate la console del browser per individuare errori WebSocket
- Alcuni framework richiedono una configurazione HMR esplicita

### Errori CORS

Il proxy gestisce la maggior parte dei problemi CORS, ma se l'app invia richieste ad altre origini:

- Configurate le impostazioni CORS del server di sviluppo
- Oppure usate un'estensione del browser per aggirare CORS (solo per lo sviluppo)