Izstrādes servera priekšskatījums

Termbridge var maršrutēt pieprasījumus uz jūsu lokālo izstrādes serveri un parādīt to priekšskatījuma panelī. Tas ir lieliski piemērots testēšanai mobilajās ierīcēs vai lietotnes vērošanai, kamēr izpildāt termināļa komandas.

Ātrais sākums

# 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

Tagad varat pārslēgties starp Termināļa un Priekšskatījuma skatu UI.

Kā tas darbojas

Nododot --proxy <port>:

1. Visi Termbridge maršruti paliek zem /__tb/
2. Visi pārējie pieprasījumi tiek pārsūtīti uz jūsu izstrādes serveri
3. UI tiek parādīta poga Skati, lai pārslēgtos starp termināli un priekšskatījumu
4. Priekšskatījumā lietotne tiek ielādēta iframe, izmantojot starpniekserveri

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

Skatu pārslēgšana

1. Apakšējā joslā pieskarieties pogai Skati
2. Izvēlieties Pārslēgties uz termināli vai Pārslēgties uz priekšskatījumu
3. Skats tiek atjaunināts uzreiz

Abi skati paliek savienoti — termināļa sesija turpinās, kamēr skatāties priekšskatījumu.

Karsto moduļu aizstāšana (HMR)

Vite HMR darbojas, izmantojot starpniekserveri. Katrs WebSocket savienojums no pieteikušās pārlūkprogrammas, kas nav /__tb/, tiek pārsūtīts uz jūsu izstrādes serveri neatkarīgi no tā ceļa, tāpēc HMR ligzda savienojas bez papildu konfigurācijas.

Rediģējiet kodu un uzreiz skatiet izmaiņas priekšskatījuma skatā — nav nepieciešama atsvaidzināšana.

Atbalstītie ietvari

Der jebkurš izstrādes serveris, kas darbojas lokālajā portā:

Vienkārši iestatiet --proxy portu tādu pašu kā izstrādes servera portu.

Lietojuma gadījumi

Testēšana mobilajās ierīcēs

Pārbaudiet adaptīvo dizainu īstā tālrunī:

termbridge --proxy 5173

Skenējiet QR kodu un skatiet savu lietotni tieši tā, kā tā tiek attēlota mobilajā Safari vai Chrome.

Pilna steka izstrāde

Izpildiet komandas terminālī, vienlaikus vērojot lietotni:

1. Skatiet būvēšanas izvadi termināļa skatā
2. Skatiet lietotni priekšskatījuma skatā
3. Pārslēdzieties starp tiem ar vienu pieskārienu
4. Turpiniet darbu tālrunī vai planšetdatorā

Demonstrējiet savu darbu

Kopīgojiet publisko URL ar kādu, lai parādītu:

• Jūsu palaisto lietotni (priekšskatījums)
• Jūsu termināļa sesiju (terminālis)

Lieliski noder attālinātam kopdarbam vai ātrām demonstrācijām.

Smilškastes režīms

Izmantojot Daytona smilškastes, iestatiet priekšskatījuma portu:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Pārliecinieties, ka jūsu izstrādes serveris pieņem savienojumus visās saskarnēs:

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

Termbridge maršrutē Daytona priekšskatījumu URL caur UI.

Problēmu novēršana

Priekšskatījumā redzama tukša lapa

• Pārliecinieties, ka izstrādes serveris darbojas
• Pārbaudiet, vai ports atbilst --proxy
• Smilškastes režīmā izmantojiet --host 0.0.0.0, lai ports būtu sasniedzams

HMR nedarbojas

• Pārbaudiet, vai izstrādes serveris atbalsta HMR
• Pārbaudiet, vai pārlūkprogrammas konsolē nav WebSocket kļūdu
• Dažiem ietvariem nepieciešama īpaša HMR konfigurācija

CORS kļūdas

Starpniekserveris novērš lielāko daļu CORS problēmu, taču, ja lietotne veic pieprasījumus uz citām izcelsmēm:

• Konfigurējiet izstrādes servera CORS iestatījumus
• Vai izmantojiet pārlūkprogrammas paplašinājumu, lai apietu CORS (tikai izstrādei)