Přejít k obsahu

Náhled vývojového serveru

Zobrazit jako Markdown Upravit na GitHub Dokumentace na 1675df8

Termbridge může přesměrovat požadavky na váš místní vývojový server a zobrazit jeho náhled v samostatném panelu. Hodí se to pro testování na mobilu nebo sledování aplikace při práci s příkazy v terminálu.

Rychlý začátek

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

V UI teď můžete přepínat mezi zobrazením Terminál a Náhled.

Jak to funguje

Když předáte --proxy <port>:

  1. Všechny trasy Termbridge zůstávají pod /__tb/
  2. Všechny ostatní požadavky se přesměrovávají na váš vývojový server
  3. V UI se zobrazí tlačítko Zobrazení pro přepínání mezi terminálem a náhledem
  4. Aplikace se načte v prvku iframe přes proxy
Kód
Browser → Termbridge → Your dev server (localhost:5173)

Přepínání zobrazení

  1. Klepněte na tlačítko Zobrazení ve spodní liště
  2. Vyberte Přepnout na terminál nebo Přepnout na náhled
  3. Zobrazení se okamžitě změní

Obě zobrazení zůstávají připojená – relace terminálu pokračuje i při prohlížení náhledu.

Hot Module Replacement (HMR)

HMR v Vite funguje přes proxy. Každé připojení WebSocketu mimo /__tb/ z přihlášeného prohlížeče se přesměruje na váš vývojový server bez ohledu na cestu, takže se soket HMR připojí bez další konfigurace.

Upravte kód a sledujte změny v zobrazení Náhled okamžitě, bez obnovení stránky.

Podporované frameworky

Funguje jakýkoli vývojový server běžící na místním portu:

Framework Příkaz Výchozí port
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

Stačí nastavit port --proxy na port vašeho vývojového serveru.

Příklady použití

Testování na mobilu

Otestujte responzivní návrh na skutečném telefonu:

Shell
termbridge --proxy 5173

Naskenujte kód QR a podívejte se na aplikaci přesně tak, jak se zobrazuje v mobilním prohlížeči Safari nebo Chrome.

Vývoj celé aplikace

Spouštějte příkazy v terminálu a současně sledujte aplikaci:

  1. Sledujte výstup sestavení v zobrazení Terminál
  2. Prohlížejte si aplikaci v zobrazení Náhled
  3. Přepínejte mezi nimi klepnutím
  4. Pokračujte v práci z telefonu nebo tabletu

Předveďte svou práci

Sdílejte veřejný odkaz URL a ukažte někomu:

  • Spuštěnou aplikaci (Náhled)
  • Relaci terminálu (Terminál)

Ideální pro spolupráci na dálku nebo rychlé ukázky.

Režim sandboxu

Při použití sandboxů Daytona nastavte port náhledu:

Shell
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Ujistěte se, že vývojový server naslouchá na všech rozhraních:

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

Termbridge přesměrovává náhled Daytona přes URL v UI.

Řešení problémů

Náhled zobrazuje prázdnou stránku

  • Ujistěte se, že vývojový server běží
  • Zkontrolujte, zda port odpovídá portu --proxy
  • V režimu sandboxu použijte --host 0.0.0.0, aby byl port dostupný

HMR nefunguje

  • Ověřte, zda váš vývojový server podporuje HMR
  • Zkontrolujte chyby WebSocketu v konzoli prohlížeče
  • Některé frameworky vyžadují výslovnou konfiguraci HMR

Chyby CORS

Proxy řeší většinu problémů CORS, ale pokud vaše aplikace odesílá požadavky na jiné domény:

  • Nakonfigurujte nastavení CORS vývojového serveru
  • Nebo použijte rozšíření prohlížeče k obejití CORS (pouze pro vývoj)