Fejlesztői szerver előnézete

A Termbridge proxyn keresztül továbbíthatja a helyi fejlesztői szervert, és megjelenítheti egy előnézeti panelen. Ez ideális mobilos teszteléshez vagy az alkalmazás megfigyeléséhez terminálparancsok futtatása közben.

Gyors kezdés

# 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

Mostantól a UI felületen válthat a Terminál és az Előnézet nézet között.

Működés

A --proxy <port> megadásakor:

1. Minden Termbridge útvonal a /__tb/ alatt marad
2. Minden más kérést a rendszer a fejlesztői szerverhez továbbít
3. A UI felületén megjelenik a Nézetek gomb, amellyel válthat a Terminál és az Előnézet között
4. Az előnézet az alkalmazást proxy-n keresztüli iframe-ben tölti be

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

Váltás a nézetek között

1. Koppintson az alsó sáv Nézetek gombjára
2. Válassza a Váltás a terminálra vagy a Váltás az előnézetre lehetőséget
3. A nézet azonnal frissül

Mindkét nézet kapcsolatban marad; a terminál munkamenete az előnézet megtekintése közben is folytatódik.

Hot Module Replacement (HMR)

A Vite HMR-funkciója a proxyn keresztül működik. A rendszer a bejelentkezett böngészőből érkező, /__tb/-en kívüli összes WebSocket-kapcsolatot továbbítja a fejlesztői szerverhez, az útvonaltól függetlenül, így a HMR-kapcsolat további konfiguráció nélkül létrejön.

Módosítsa a kódot, és nézze meg azonnal a változásokat az Előnézet nézetben – frissítés nélkül.

Támogatott keretrendszerek

Bármely helyi porton futó fejlesztői szerver használható:

Egyeztesse a --proxy portját a fejlesztői szerver portjával.

Felhasználási esetek

Mobilos tesztelés

Tesztelje az adaptív kialakítást egy valódi telefonon:

termbridge --proxy 5173

Olvassa be a QR kódot, és nézze meg, pontosan hogyan jelenik meg az alkalmazása mobilon, a Safari vagy a Chrome rendszerben.

Teljes veremű fejlesztés

Futtasson parancsokat a terminálban, miközben figyeli az alkalmazást:

1. Figyelje a build kimenetét a Terminál nézetben
2. Tekintse meg az alkalmazást az Előnézet nézetben
3. Koppintással váltson közöttük
4. Folytassa a munkát telefonról vagy táblagépről

Mutassa be a munkáját

Ossza meg a nyilvános URL hivatkozást, hogy megmutassa másoknak:

• A futó alkalmazását (Előnézet)
• A terminál munkamenetét (Terminál)

Kiváló távoli közös munkához vagy gyors bemutatókhoz.

Sandboxmód

Daytona sandboxok használatakor állítsa be az előnézeti portot:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Ügyeljen arra, hogy a fejlesztői szerver minden hálózati interfészhez csatlakozzon:

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

A Termbridge a Daytona előnézeti URL értékét a UI-en keresztül továbbítja.

Hibaelhárítás

Az előnézet üres oldalt mutat

• Ellenőrizze, hogy fut-e a fejlesztői szerver
• Nézze meg, hogy a port megegyezik-e a --proxy értékével
• Sandboxmód esetén használja a --host 0.0.0.0 értéket, hogy a port elérhető legyen

Nem működik a HMR

• Ellenőrizze, hogy a fejlesztői szerver támogatja-e a HMR-t
• Keresse meg a WebSocket-hibákat a böngésző konzoljában
• Egyes keretrendszerekhez külön HMR-konfiguráció szükséges

CORS hibák

A proxy a legtöbb CORS-problémát kezeli, de ha az alkalmazás más eredetű kéréseket küld:

• Állítsa be a fejlesztői szerver CORS-beállításait
• Vagy használjon böngészőbővítményt a CORS megkerülésére (csak fejlesztéshez)