Siirry sisältöön

Kehityspalvelimen esikatselu

Näytä Markdown-muodossa Muokkaa palvelussa GitHub Dokumentaatio: 1675df8

Termbridge voi välittää paikallisen kehityspalvelimesi ja näyttää sen esikatselupaneelissa. Tämä sopii erityisesti mobiilitestaukseen tai sovelluksen seuraamiseen päätelaitteen komentojen suorittamisen aikana.

Pika-aloitus

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

Nyt voit vaihtaa näkymien Pääte ja Esikatselu välillä UI-ympäristössä.

Näin se toimii

Kun annat parametrin --proxy <port>:

  1. Kaikki Termbridge-reitit pysyvät osoitteessa /__tb/
  2. Kaikki muut pyynnöt välitetään kehityspalvelimellesi
  3. UI näyttää Näkymät-painikkeen, jolla voi vaihtaa Päätteen ja Esikatselun välillä
  4. Esikatselu lataa sovelluksesi välityspalvelimen kautta iframe-kehykseen
Koodi
Browser → Termbridge → Your dev server (localhost:5173)

Näkymien vaihtaminen

  1. Napauta alapalkin Näkymät-painiketta
  2. Valitse Vaihda päätetilaan tai Vaihda esikatseluun
  3. Näkymä vaihtuu heti

Molemmat näkymät pysyvät yhteydessä – päätelaiteistuntosi jatkuu esikatselua katsellessasi.

Hot Module Replacement (HMR)

Vite-palvelun HMR toimii välityspalvelimen kautta. Kaikki kirjautuneen selaimen WebSocket-yhteydet, jotka eivät kuulu osoitteeseen /__tb/, välitetään kehityspalvelimellesi polusta riippumatta, joten HMR-yhteys toimii ilman lisämäärityksiä.

Muokkaa koodiasi ja näe muutokset heti Esikatselu-näkymässä – sivua ei tarvitse ladata uudelleen.

Tuetut kehykset

Kaikki paikallisessa portissa toimivat kehityspalvelimet käyvät:

Kehys Komento Oletusportti
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

Aseta vain --proxy-portin arvoksi kehityspalvelimesi portti.

Käyttötapaukset

Mobiilitestaus

Testaa responsiivista asetteluasi oikealla puhelimella:

Shell
termbridge --proxy 5173

Skannaa QR-koodi ja näe sovelluksesi sellaisena kuin se näkyy mobiililaitteessa Safari tai Chrome-selaimessa.

Full stack -kehitys

Suorita komentoja päätteessä samalla, kun seuraat sovellustasi:

  1. Seuraa koontitulostetta Pääte-näkymässä
  2. Näe sovelluksesi Esikatselu-näkymässä
  3. Vaihda niiden välillä napauttamalla
  4. Jatka työskentelyä puhelimella tai tabletilla

Esittele työsi

Jaa julkinen URL jollekulle, jotta voit näyttää hänelle seuraavat:

  • Käynnissä olevan sovelluksesi (Esikatselu)
  • Päätelaiteistuntosi (Pääte)

Sopii hyvin etätyöskentelyyn parin kanssa tai nopeisiin demoihin.

Hiekkalaatikkotila

Kun käytät Daytona-hiekkalaatikoita, määritä esikatseluportti:

Shell
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Varmista, että kehityspalvelimesi on sidottu kaikkiin verkkoliittymiin:

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

Termbridge välittää Daytona-esikatselun URL-portin UI-palvelimen kautta.

Vianmääritys

Esikatselussa näkyy tyhjä sivu

  • Varmista, että kehityspalvelin on käynnissä
  • Tarkista, että portti vastaa arvoa --proxy
  • Käytä hiekkalaatikkotilassa asetusta --host 0.0.0.0, jotta porttiin pääsee käsiksi

HMR ei toimi

  • Varmista, että kehityspalvelimesi tukee HMR:ää
  • Tarkista WebSocket-virheet selaimen konsolista
  • Jotkin kehykset vaativat HMR:n erillisen määrityksen

CORS-virheet

Välityspalvelin käsittelee useimmat CORS-ongelmat. Jos sovelluksesi kuitenkin lähettää pyyntöjä muihin alkuperiin:

  • Määritä kehityspalvelimesi CORS-asetukset
  • Tai ohita CORS selaimen laajennuksella (vain kehityskäyttöön)