Forhåndsvisning af udviklingsserver

Termbridge kan fungere som proxy for din lokale udviklingsserver og vise den i et forhåndsvisningspanel. Det er ideelt til mobiltest eller til at holde øje med din app, mens du kører terminalkommandoer.

Hurtig start

# 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 skifte mellem visningerne Terminal og Forhåndsvisning i UI.

Sådan fungerer det

Når du angiver --proxy <port>:

1. Alle Termbridge-ruter forbliver under /__tb/
2. Alle andre anmodninger sendes videre til din udviklingsserver via en proxy
3. UI viser en knap med teksten Visninger, som skifter mellem Terminal og Forhåndsvisning
4. Forhåndsvisningen indlæser din app i en iframe via proxien

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

Skift visning

1. Tryk på knappen Visninger i den nederste bjælke
2. Vælg Skift til terminal eller Skift til forhåndsvisning
3. Visningen opdateres med det samme

Begge visninger forbliver forbundet – din terminalsession fortsætter, mens du ser forhåndsvisningen.

Hot Module Replacement (HMR)

Vites HMR fungerer via proxien. Hver WebSocket-forbindelse fra en browser, der er logget ind, og som ligger uden for /__tb/, videresendes til din udviklingsserver, uanset stien, så HMR-socketen opretter forbindelse uden ekstra konfiguration.

Redigér din kode, og se ændringerne med det samme i forhåndsvisningen – uden at opdatere siden.

Understøttede frameworks

Alle udviklingsservere, der kører på en lokal port, fungerer:

Match blot porten --proxy med din udviklingsservers port.

Anvendelsesområder

Test på mobil

Test dit responsive design på en rigtig telefon:

termbridge --proxy 5173

Scan QR-koden, og se din app præcis, som den vises på mobil Safari eller Chrome.

Fullstackudvikling

Kør kommandoer i terminalen, mens du holder øje med din app:

1. Følg byggeoutputtet i terminalvisningen
2. Se din app i forhåndsvisningen
3. Skift mellem dem med et tryk
4. Fortsæt arbejdet fra din telefon eller tablet

Vis dit arbejde

Del den offentlige URL med nogen for at vise:

• Din app, der kører (forhåndsvisning)
• Din terminalsession (terminal)

Velegnet til fjernsamarbejde eller hurtige demoer.

Sandkassetilstand

Når du bruger Daytona-sandkasser, skal du angive forhåndsvisningens port:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Sørg for, at din udviklingsserver lytter på alle grænseflader:

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

Termbridge fungerer som proxy for Daytona forhåndsvisning URL gennem UI.

Fejlfinding

Forhåndsvisningen viser en tom side

• Sørg for, at din udviklingsserver kører
• Kontrollér, at porten stemmer overens med --proxy
• Brug --host 0.0.0.0 i sandkassetilstand, så porten er tilgængelig

HMR fungerer ikke

• Kontrollér, at din udviklingsserver understøtter HMR
• Se efter WebSocket-fejl i browserkonsollen
• Nogle frameworks kræver eksplicit HMR-konfiguration

CORS-fejl

Proxien håndterer de fleste CORS-problemer, men hvis din app sender anmodninger til andre oprindelser:

• Konfigurér din udviklingsservers CORS-indstillinger
• Eller brug en browserudvidelse til at omgå CORS (kun til udvikling)