# Pratinjau Server Dev

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

```bash
# 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

```
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:

```bash
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:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Pastikan server dev Anda mengikatnya ke semua antarmuka:

```bash
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)