Förhandsvisning av utvecklingsserver

Termbridge kan vidarebefordra trafiken till din lokala utvecklingsserver och visa den i en förhandsvisningspanel. Perfekt för mobila tester eller för att hålla koll på appen medan du kör terminalkommandon.

Snabbstart

# 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

Nu kan du växla mellan vyerna Terminal och Förhandsvisning i UI.

Så fungerar det

När du skickar med --proxy <port>:

1. Alla Termbridge-rutter ligger kvar under /__tb/
2. Alla andra förfrågningar vidarebefordras till din utvecklingsserver
3. UI visar en Vyer-knapp som växlar mellan Terminal och Förhandsvisning
4. Förhandsvisningen läser in din app i en iframe via proxyn

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

Växla vy

1. Tryck på knappen Vyer i fältet längst ned
2. Välj Växla till Terminal eller Växla till Förhandsvisning
3. Vyn uppdateras direkt

Båda vyerna förblir anslutna – terminalsessionen fortsätter medan du visar förhandsvisningen.

Hot Module Replacement (HMR)

Vites HMR fungerar via proxyn. Varje WebSocket-anslutning utanför /__tb/ från en inloggad webbläsare vidarebefordras till din utvecklingsserver, oavsett sökväg, så HMR-uttaget ansluts utan extra konfiguration.

Redigera koden och se ändringarna direkt i vyn Förhandsvisning – du behöver inte uppdatera sidan.

Ramverk som stöds

Alla utvecklingsservrar som körs på en lokal port fungerar:

Ange bara samma port för --proxy som för din utvecklingsserver.

Användningsområden

Testa på mobilen

Testa din responsiva design på en riktig telefon:

termbridge --proxy 5173

Skanna QR-koden och se din app precis som den visas på mobilen i Safari eller Chrome.

Fullstackutveckling

Kör kommandon i terminalen medan du håller koll på appen:

1. Följ byggutdata i terminalvyn
2. Se appen i vyn Förhandsvisning
3. Växla mellan vyerna med ett tryck
4. Fortsätt arbeta från mobilen eller surfplattan

Dela en demo av arbetet

Dela den offentliga URL med någon för att visa:

• Appen som körs (Förhandsvisning)
• Din terminalsession (Terminal)

Perfekt för distansarbete i par eller snabba demonstrationer.

Sandboxläge

När du använder Daytona-sandboxes anger du förhandsvisningsporten:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Se till att utvecklingsservern lyssnar på alla gränssnitt:

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

Termbridge vidarebefordrar förhandsvisningen Daytona via URL UI.

Felsökning

Förhandsvisningen visar en tom sida

• Kontrollera att utvecklingsservern körs
• Kontrollera att porten matchar --proxy
• Använd --host 0.0.0.0 i sandboxläget så att porten går att nå

HMR fungerar inte

• Kontrollera att utvecklingsservern stöder HMR
• Kontrollera webbläsarens konsol efter WebSocket-fel
• Vissa ramverk kräver uttrycklig HMR-konfiguration

CORS-fel

Proxyn hanterar de flesta CORS-problemen, men om appen skickar förfrågningar till andra ursprung:

• Konfigurera utvecklingsserverns CORS-inställningar
• Eller använd ett webbläsartillägg för att kringgå CORS (endast för utveckling)