Lewati ke konten

Pratinjau Server Dev

Lihat sebagai Markdown Edit di GitHub Dokumentasi di 1675df8

Termbridge dapat memproksi server dev lokal Anda dan menampilkannya di panel pratinjau. Fitur ini cocok untuk pengujian seluler atau memantau aplikasi saat menjalankan perintah terminal.

Mulai cepat

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

Kini Anda dapat beralih antara tampilan Terminal dan Pratinjau di UI.

Cara kerjanya

Saat Anda meneruskan --proxy <port>:

  1. Semua rute Termbridge tetap berada di bawah /__tb/
  2. Permintaan lainnya diteruskan ke server dev Anda
  3. UI menampilkan tombol Tampilan untuk beralih antara Terminal dan Pratinjau
  4. Pratinjau memuat aplikasi Anda di iframe melalui proxy
Kode
Browser → Termbridge → Your dev server (localhost:5173)

Beralih tampilan

  1. Ketuk tombol Tampilan di bilah bawah
  2. Pilih Beralih ke Terminal atau Beralih ke Pratinjau
  3. Tampilan langsung diperbarui

Kedua tampilan tetap terhubung; sesi terminal Anda terus berjalan saat Anda melihat pratinjau.

Penggantian Modul Panas (HMR)

HMR Vite berfungsi melalui proxy. Setiap koneksi WebSocket dari browser yang sudah masuk, kecuali /__tb/, diteruskan ke server dev Anda tanpa memandang path-nya, sehingga soket HMR terhubung tanpa konfigurasi tambahan.

Edit kode Anda dan lihat perubahannya langsung di tampilan Pratinjau tanpa perlu memuat ulang.

Framework yang didukung

Server dev apa pun yang berjalan pada port lokal dapat digunakan:

Framework Perintah Port Bawaan
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

Cukup sesuaikan port --proxy dengan port server dev Anda.

Kasus penggunaan

Pengujian seluler

Uji desain responsif Anda di ponsel sungguhan:

Shell
termbridge --proxy 5173

Pindai kode QR dan lihat aplikasi Anda persis seperti tampilannya di Safari seluler atau Chrome.

Pengembangan full-stack

Jalankan perintah di terminal sambil memantau aplikasi Anda:

  1. Pantau keluaran build di tampilan Terminal
  2. Lihat aplikasi Anda di tampilan Pratinjau
  3. Beralih di antara keduanya dengan satu ketukan
  4. Lanjutkan bekerja dari ponsel atau tablet

Demo pekerjaan Anda

Bagikan URL publik kepada seseorang untuk menunjukkan:

  • Aplikasi Anda yang sedang berjalan (Pratinjau)
  • Sesi terminal Anda (Terminal)

Cocok untuk berkolaborasi jarak jauh atau demo singkat.

Mode sandbox

Saat menggunakan sandbox Daytona, atur port pratinjau:

Shell
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Pastikan server dev Anda mengikatnya ke semua antarmuka:

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

Termbridge memproksi Daytona pratinjau URL melalui UI.

Pemecahan masalah

Pratinjau menampilkan halaman kosong

  • Pastikan server dev Anda berjalan
  • Periksa apakah port cocok dengan --proxy
  • Untuk mode sandbox, gunakan --host 0.0.0.0 agar port dapat dijangkau

HMR tidak berfungsi

  • Pastikan server dev Anda mendukung HMR
  • Periksa konsol browser untuk kesalahan WebSocket
  • Beberapa framework memerlukan konfigurasi HMR eksplisit

Kesalahan CORS

Proxy menangani sebagian besar masalah CORS, tetapi jika aplikasi Anda mengirim permintaan ke origin lain:

  • Konfigurasikan pengaturan CORS server dev Anda
  • Atau gunakan ekstensi browser untuk melewati CORS (hanya untuk pengembangan)