Liigu sisu juurde

Arendusserveri eelvaade

Vaata Markdownina Muuda teenuses GitHub Dokumentatsioon: 1675df8

Termbridge saab kohaliku arendusserveri puhverserveri kaudu edastada ja kuvada selle eelvaatepaanil. See sobib suurepäraselt mobiilseadmes testimiseks või rakenduse jälgimiseks terminalikäskude käivitamise ajal.

Kiire alustamine

Shell
# 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

Nüüd saad UI vaates lülituda Terminali ja Eelvaate vahel.

Kuidas see töötab

Kui edastad argumendi --proxy <port>:

  1. Kõik Termbridge marsruudid jäävad asukohta /__tb/
  2. Kõik muud päringud edastatakse sinu arendusserverisse
  3. UI kuvab nuppu Vaated, millega saab lülituda terminali ja eelvaate vahel
  4. Eelvaade laadib sinu rakenduse puhverserveri kaudu iframe'is
Kood
Browser → Termbridge → Your dev server (localhost:5173)

Vaadete vahetamine

  1. Puuduta alumisel ribal nuppu Vaated
  2. Vali Lülitu terminalile või Lülitu eelvaatele
  3. Vaade uueneb kohe

Mõlemad vaated jäävad ühendatuks – terminaliseanss jätkub ka eelvaate vaatamise ajal.

Kuum moodulivahetus (HMR)

Vite HMR töötab puhverserveri kaudu. Kõik WebSocket-ühendused, mis tulevad sisselogitud brauserist väljastpoolt /__tb/, edastatakse sinu arendusserverisse olenemata nende teest. Seetõttu ühendub HMR-pesa ilma lisaseadistuseta.

Muuda koodi ja näe muudatusi kohe eelvaates – värskendamist pole vaja.

Toetatud raamistikud

Töötab iga arendusserver, mis kasutab kohalikku porti:

Raamistik Käsk Vaikeport
Vite npm run dev 5173
Next.js npm run dev 3000
Create React App npm start 3000
Nuxt npm run dev 3000
SvelteKit npm run dev 5173

Pane lihtsalt --proxy port vastavusse arendusserveri pordiga.

Kasutusjuhud

Mobiilitestimine

Testi tundlikku kujundust päris telefonis:

Shell
termbridge --proxy 5173

Skanni kood QR ja vaata, kuidas rakendus mobiilseadme Safari või Chrome ekraanil täpselt kuvatakse.

Täislahenduse arendus

Käivita terminalis käske ja jälgi samal ajal rakendust:

  1. Jälgi järgu väljundit terminalivaates
  2. Vaata rakendust eelvaatevaates
  3. Lülitu vaadete vahel ühe puudutusega
  4. Jätka tööd telefonis või tahvelarvutis

Töö demonstreerimine

Jaga avalikku URL-i, et kellelegi näidata järgmist:

  • Töötav rakendus (eelvaade)
  • Terminaliseanss (terminal)

Sobib suurepäraselt kaugtööks koos või kiireteks demodeks.

Liivakastirežiim

Liivakastide Daytona kasutamisel määra eelvaate port:

Shell
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Veendu, et arendusserver on seotud kõigi liidestega:

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

Termbridge vahendab Daytona eelvaadet URL kaudu UI.

Tõrkeotsing

Eelvaade kuvab tühja lehe

  • Veendu, et arendusserver töötab
  • Kontrolli, kas port vastab väärtusele --proxy
  • Liivakastirežiimis kasuta --host 0.0.0.0, et port oleks kättesaadav

HMR ei tööta

  • Veendu, et sinu arendusserver toetab HMR-i
  • Otsi brauseri konsoolist WebSocketi vigu
  • Mõni raamistik vajab HMR-i selgesõnalist seadistamist

CORS vead

Puhverserver lahendab enamiku CORS probleemidest, kuid kui rakendus saadab päringuid teistele lähtekohtadele:

  • Seadista arendusserveri CORS sätted
  • Või kasuta brauserilaiendit, et CORS-st mööda minna (ainult arenduseks)