Náhľad vývojového servera

Termbridge dokáže sprostredkovať prístup k vášmu lokálnemu vývojovému serveru a zobraziť ho na paneli náhľadu. Je to ideálne na testovanie na mobile alebo sledovanie aplikácie počas spúšťania príkazov v termináli.

Rýchly začiatok

# 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

Teraz môžete v UI prepínať medzi zobrazeniami Terminál a Náhľad.

Ako to funguje

Keď zadáte --proxy <port>:

1. Všetky trasy Termbridge zostanú pod adresou /__tb/
2. Všetky ostatné požiadavky sa presmerujú na váš vývojový server
3. V UI sa zobrazí tlačidlo Zobrazenia na prepínanie medzi terminálom a náhľadom
4. Náhľad načíta vašu aplikáciu v rámci iframe cez proxy

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

Prepínanie zobrazení

1. Ťuknite na tlačidlo Zobrazenia na spodnom paneli
2. Vyberte Prepnúť na terminál alebo Prepnúť na náhľad
3. Zobrazenie sa okamžite zmení

Obe zobrazenia zostanú pripojené – relácia terminálu pokračuje, aj keď si prezeráte náhľad.

Hot Module Replacement (HMR)

HMR nástroja Vite funguje cez proxy. Každé pripojenie WebSocket mimo /__tb/ z prihláseného prehliadača sa presmeruje na váš vývojový server bez ohľadu na jeho cestu, takže soket HMR sa pripojí bez ďalšej konfigurácie.

Upravte kód a okamžite uvidíte zmeny v zobrazení náhľadu – bez obnovenia stránky.

Podporované frameworky

Funguje akýkoľvek vývojový server spustený na lokálnom porte:

Stačí nastaviť port --proxy rovnako ako port vášho vývojového servera.

Prípady použitia

Testovanie na mobile

Otestujte responzívny dizajn na skutočnom telefóne:

termbridge --proxy 5173

Naskenujte kód QR a uvidíte svoju aplikáciu presne tak, ako sa zobrazuje na mobile Safari alebo Chrome.

Vývoj full-stack aplikácií

Spúšťajte príkazy v termináli a zároveň sledujte svoju aplikáciu:

1. Sledujte výstup zostavenia v zobrazení terminálu
2. Pozrite si aplikáciu v zobrazení náhľadu
3. Prepínajte medzi nimi ťuknutím
4. Pokračujte v práci z telefónu alebo tabletu

Predveďte svoju prácu

Zdieľajte verejný URL, aby ste niekomu ukázali:

• Spustenú aplikáciu (náhľad)
• Reláciu terminálu (terminál)

Skvelé na vzdialenú spoluprácu vo dvojici alebo rýchle ukážky.

Režim sandboxu

Pri používaní sandboxov Daytona nastavte port náhľadu:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Skontrolujte, či je váš vývojový server nastavený na počúvanie na všetkých rozhraniach:

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

Termbridge sprostredkúva náhľad Daytona URL cez UI.

Riešenie problémov

V náhľade sa zobrazuje prázdna stránka

• Skontrolujte, či váš vývojový server beží
• Skontrolujte, či sa port zhoduje s hodnotou --proxy
• V režime sandboxu použite --host 0.0.0.0, aby bol port dostupný

HMR nefunguje

• Overte, či váš vývojový server podporuje HMR
• V konzole prehliadača skontrolujte chyby WebSocket
• Niektoré frameworky vyžadujú výslovnú konfiguráciu HMR

Chyby CORS

Proxy rieši väčšinu problémov s CORS, no ak vaša aplikácia posiela požiadavky na iné zdroje:

• Nakonfigurujte nastavenia CORS vývojového servera
• Alebo použite rozšírenie prehliadača na obídenie CORS (iba na vývoj)