Kūrimo serverio peržiūra

Termbridge gali perduoti jūsų vietinio kūrimo serverio užklausas ir rodyti jį peržiūros srityje. Tai puikiai tinka bandant mobiliajame įrenginyje arba stebint programą vykdant terminalo komandas.

Greita pradžia

# 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

Dabar UI galite perjungti Terminalo ir Peržiūros rodinius.

Kaip tai veikia

Kai nurodote --proxy <port>:

1. Visi Termbridge maršrutai lieka po /__tb/
2. Visos kitos užklausos perduodamos jūsų kūrimo serveriui
3. UI rodomas mygtukas Rodiniai, kuriuo galima perjungti terminalo ir peržiūros rodinius
4. Peržiūra įkelia jūsų programą į iframe per tarpinį serverį

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

Rodinių perjungimas

1. Apatinėje juostoje bakstelėkite mygtuką Rodiniai
2. Pasirinkite Perjungti į terminalą arba Perjungti į peržiūrą
3. Rodinys atnaujinamas akimirksniu

Abu rodiniai lieka prijungti – terminalo sesija veikia toliau, kol peržiūrite programą.

Karštasis modulių keitimas (HMR)

Vite HMR veikia per tarpinį serverį. Kiekvienas WebSocket ryšys iš prisijungusios naršyklės, išskyrus /__tb/, perduodamas jūsų kūrimo serveriui, kad ir koks būtų jo kelias, todėl HMR lizdas prisijungia be papildomos konfigūracijos.

Redaguokite kodą ir iškart matykite pakeitimus peržiūros rodinyje – nereikia atnaujinti puslapio.

Palaikomos sistemos

Tinka bet kuris kūrimo serveris, veikiantis vietiniame prievade:

Tiesiog nurodykite tą patį --proxy prievadą kaip ir kūrimo serveryje.

Naudojimo atvejai

Testavimas mobiliuosiuose įrenginiuose

Išbandykite adaptyvųjį dizainą tikrame telefone:

termbridge --proxy 5173

Nuskaitykite QR kodą ir pamatykite programą tiksliai taip, kaip ji rodoma mobiliajame įrenginyje – Safari arba Chrome.

Visos sistemos kūrimas

Vykdykite komandas terminale ir stebėkite savo programą:

1. Stebėkite kūrimo išvestį terminalo rodinyje
2. Peržiūrėkite programą peržiūros rodinyje
3. Perjunkite rodinius bakstelėję
4. Dirbkite toliau telefonu arba planšetiniu kompiuteriu

Pademonstruokite savo darbą

Bendrinkite viešą URL, kad parodytumėte kitiems:

• Veikiančią programą (peržiūra)
• Terminalo sesiją (terminalas)

Puikiai tinka nuotoliniam darbui poroje arba greitoms demonstracijoms.

Smėlio dėžės režimas

Naudodami Daytona smėlio dėžes, nustatykite peržiūros prievadą:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Įsitikinkite, kad jūsų kūrimo serveris susietas su visomis sąsajomis:

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

Termbridge per UI perduoda Daytona peržiūros URL.

Trikčių šalinimas

Peržiūra rodo tuščią puslapį

• Įsitikinkite, kad kūrimo serveris veikia
• Patikrinkite, ar prievadas sutampa su --proxy
• Smėlio dėžės režimu naudokite --host 0.0.0.0, kad prievadas būtų pasiekiamas

HMR neveikia

• Patikrinkite, ar jūsų kūrimo serveris palaiko HMR
• Naršyklės konsolėje ieškokite WebSocket klaidų
• Kai kurias sistemas reikia aiškiai sukonfigūruoti HMR

CORS klaidos

Tarpinis serveris išsprendžia daugumą CORS problemų, tačiau jei programa siunčia užklausas į kitus šaltinius:

• Sukonfigūruokite kūrimo serverio CORS nustatymus
• Arba naudokite naršyklės plėtinį, kad apeitumėte CORS (tik kūrimo metu)