Ga naar de inhoud

Voorbeeldweergave van ontwikkelserver

Bekijken als Markdown Bewerken op GitHub Documentatie op 1675df8

Termbridge kan je lokale ontwikkelserver via een proxy tonen in een voorbeeldpaneel. Dit is ideaal voor tests op mobiele apparaten of om je app te volgen terwijl je terminalopdrachten uitvoert.

Snel aan de slag

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

Je kunt nu in de UI schakelen tussen de weergaven Terminal en Preview.

Werking

Wanneer je --proxy <port> opgeeft:

  1. Blijven alle Termbridge-routes onder /__tb/
  2. Worden alle andere verzoeken naar je ontwikkelserver geproxied
  3. Toont de UI een knop Views om te schakelen tussen Terminal en Preview
  4. Wordt je app in een iframe via de proxy geladen
Code
Browser → Termbridge → Your dev server (localhost:5173)

Schakelen tussen weergaven

  1. Tik op de knop Views in de onderste balk
  2. Kies Switch to Terminal of Switch to Preview
  3. De weergave wordt meteen bijgewerkt

Beide weergaven blijven verbonden: je terminalsessie loopt door terwijl je de voorbeeldweergave bekijkt.

Hot Module Replacement (HMR)

De HMR van Vite werkt via de proxy. Elke WebSocket-verbinding buiten /__tb/ van een aangemelde browser wordt doorgestuurd naar je ontwikkelserver, ongeacht het pad. Zo maakt de HMR-socket verbinding zonder extra configuratie.

Bewerk je code en zie de wijzigingen meteen in de Preview-weergave, zonder opnieuw te laden.

Ondersteunde frameworks

Elke ontwikkelserver die op een lokale poort draait, werkt:

Framework Opdracht Standaardpoort
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

Stem de poort van --proxy af op die van je ontwikkelserver.

Toepassingen

Testen op mobiele apparaten

Test je responsieve ontwerp op een echte telefoon:

Shell
termbridge --proxy 5173

Scan de QR-code en bekijk je app precies zoals deze wordt weergegeven op Safari of Chrome op mobiel.

Full-stackontwikkeling

Voer opdrachten uit in de terminal terwijl je je app bekijkt:

  1. Bekijk de builduitvoer in de Terminal-weergave
  2. Bekijk je app in de Preview-weergave
  3. Schakel ertussen met één tik
  4. Blijf werken vanaf je telefoon of tablet

Je werk demonstreren

Deel de openbare URL met iemand om het volgende te laten zien:

  • Je actieve app (Preview)
  • Je terminalsessie (Terminal)

Ideaal voor samenwerking op afstand of snelle demo's.

Sandboxmodus

Stel de voorbeeldpoort in wanneer je Daytona-sandboxes gebruikt:

Shell
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Zorg dat je ontwikkelserver aan alle interfaces is gebonden:

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

Termbridge proxyt de Daytona-voorbeeld-URL via de UI.

Problemen oplossen

Voorbeeld toont een lege pagina

  • Controleer of je ontwikkelserver actief is
  • Controleer of de poort overeenkomt met --proxy
  • Gebruik voor de sandboxmodus --host 0.0.0.0 zodat de poort bereikbaar is

HMR werkt niet

  • Controleer of je ontwikkelserver HMR ondersteunt
  • Controleer de browserconsole op WebSocket-fouten
  • Voor sommige frameworks is expliciete HMR-configuratie nodig

CORS-fouten

De proxy lost de meeste CORS-problemen op, maar als je app verzoeken naar andere origins verstuurt:

  • Configureer de CORS-instellingen van je ontwikkelserver
  • Of gebruik een browserextensie om CORS te omzeilen (alleen voor ontwikkeling)