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

# 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:

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:

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:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

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

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)