Predogled razvojnega strežnika

Termbridge lahko posreduje zahteve vašega lokalnega razvojnega strežnika in ga prikaže v podoknu za predogled. To je idealno za preizkušanje na mobilnih napravah ali spremljanje aplikacije med izvajanjem ukazov v terminalu.

Hiter začetek

# 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

Zdaj lahko v UI preklapljate med pogledoma Terminal in Predogled.

Kako deluje

Ko posredujete --proxy <port>:

1. Vse poti Termbridge ostanejo pod /__tb/
2. Vse druge zahteve se posredujejo vašemu razvojnemu strežniku
3. UI prikaže gumb Pogledi za preklapljanje med terminalom in predogledom
4. Predogled naloži vašo aplikacijo v okvirju iframe prek posredniškega strežnika

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

Preklapljanje med pogledi

1. V spodnji vrstici tapnite gumb Pogledi
2. Izberite Preklopi na terminal ali Preklopi na predogled
3. Pogled se takoj posodobi

Oba pogleda ostaneta povezana – vaša terminalska seja se nadaljuje, medtem ko si ogledujete predogled.

Zamenjava modulov v živo (HMR)

HMR za Vite deluje prek posredniškega strežnika. Vsaka povezava WebSocket zunaj /__tb/ iz prijavljenega brskalnika se posreduje vašemu razvojnemu strežniku, ne glede na pot, zato se vtičnica HMR poveže brez dodatne nastavitve.

Uredite kodo in si takoj oglejte spremembe v pogledu Predogled – osvežitev ni potrebna.

Podprta ogrodja

Deluje kateri koli razvojni strežnik, ki uporablja lokalna vrata:

Samo uskladite vrata --proxy z vrati svojega razvojnega strežnika.

Primeri uporabe

Preizkušanje na mobilnih napravah

Oprezno zasnovo preizkusite na pravem telefonu:

termbridge --proxy 5173

Optično preberite kodo QR in si oglejte aplikacijo natanko tako, kot je prikazana na mobilni napravi Safari ali Chrome.

Razvoj celotnega sklada

Izvajajte ukaze v terminalu in hkrati spremljajte aplikacijo:

1. Spremljajte izpis gradnje v pogledu Terminal
2. Oglejte si aplikacijo v pogledu Predogled
3. Med njima preklopite z enim dotikom
4. Nadaljujte delo v telefonu ali tablici

Predstavite svoje delo

Delite javni URL z nekom in mu pokažite:

• Delujočo aplikacijo (Predogled)
• Svojo terminalsko sejo (Terminal)

Odlično za delo v paru na daljavo ali hitre predstavitve.

Način peskovnika

Pri uporabi peskovnikov Daytona nastavite vrata za predogled:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Poskrbite, da bo vaš razvojni strežnik vezan na vse vmesnike:

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

Termbridge posreduje predogled Daytona URL prek UI.

Odpravljanje težav

Predogled prikaže prazno stran

• Preverite, ali vaš razvojni strežnik deluje
• Preverite, ali se vrata ujemajo z --proxy
• V načinu peskovnika uporabite --host 0.0.0.0, da bodo vrata dosegljiva

HMR ne deluje

• Preverite, ali vaš razvojni strežnik podpira HMR
• V konzoli brskalnika preverite napake WebSocket
• Nekatera ogrodja zahtevajo izrecno nastavitev HMR

Napake CORS

Posredniški strežnik obravnava večino težav CORS, če pa vaša aplikacija pošilja zahteve na druga izvorna mesta:

• Nastavite možnosti CORS razvojnega strežnika
• Ali pa uporabite razširitev brskalnika za obhod CORS (samo za razvoj)