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ă

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

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

Cazuri de utilizare

Testare pe mobil

Testați designul responsiv pe un telefon real:

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:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

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

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)