# Geliştirme Sunucusu Önizlemesi

Termbridge yerel geliştirme sunucunuzu vekil olarak iletip bir önizleme bölmesinde gösterebilir. Mobil testler veya terminal komutlarını çalıştırırken uygulamanızı izlemek için idealdir.

## Hızlı başlangıç

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

Artık UI içinde **Terminal** ve **Önizleme** görünümleri arasında geçiş yapabilirsiniz.

## Nasıl çalışır

`--proxy <port>` parametresini ilettiğinizde:

1. Tüm Termbridge yolları `/__tb/` altında kalır
2. Diğer tüm istekler geliştirme sunucunuza vekil olarak iletilir
3. UI, Terminal ve Önizleme arasında geçiş yapmak için bir **Görünümler** düğmesi gösterir
4. Önizleme, uygulamanızı vekil üzerinden bir iframe içinde yükler

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

## Görünümler arasında geçiş

1. Alt çubuktaki **Görünümler** düğmesine dokunun
2. **Terminale geç** veya **Önizlemeye geç** seçeneğini belirleyin
3. Görünüm anında güncellenir

Her iki görünüm de bağlı kalır; önizlemeyi görüntülerken terminal oturumunuz devam eder.

## Sıcak Modül Değiştirme (HMR)

Vite HMR'ı vekil üzerinden çalışır. Oturum açmış bir tarayıcıdan gelen ve `/__tb/` dışında kalan her WebSocket bağlantısı, yolu ne olursa olsun geliştirme sunucunuza iletilir; böylece HMR soketi ek yapılandırma gerektirmeden bağlanır.

Kodunuzu düzenleyin ve Önizleme görünümünde değişiklikleri anında görün; yenileme gerekmez.

## Desteklenen çatı sistemleri

Yerel bir bağlantı noktasında çalışan her geliştirme sunucusu kullanılabilir:

| Çatı sistemi | Komut | Varsayılan bağlantı noktası |
|-----------|---------|--------------|
| 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 |

`--proxy` bağlantı noktasını geliştirme sunucunuzun bağlantı noktasıyla eşleştirmeniz yeterlidir.

## Kullanım alanları

### Mobil testler

Duyarlı tasarımınızı gerçek bir telefonda test edin:

```bash
termbridge --proxy 5173
```

QR kodunu tarayın ve uygulamanızın mobil Safari veya Chrome üzerinde nasıl göründüğünü aynen görün.

### Tam yığın geliştirme

Uygulamanızı izlerken terminalde komutlar çalıştırın:

1. Derleme çıktısını Terminal görünümünde izleyin
2. Uygulamanızı Önizleme görünümünde görün
3. Tek dokunuşla ikisi arasında geçiş yapın
4. Telefonunuzdan veya tabletinizden çalışmaya devam edin

### Çalışmanızı tanıtın

Birine göstermek için herkese açık URL bağlantısını paylaşın:

- Çalışan uygulamanız (Önizleme)
- Terminal oturumunuz (Terminal)

Uzaktan eşli çalışma veya hızlı demolar için idealdir.

## Sandbox modu

Daytona sandbox'larını kullanırken önizleme bağlantı noktasını ayarlayın:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Geliştirme sunucunuzun tüm arayüzlere bağlandığından emin olun:

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

Termbridge, Daytona önizleme URL değerini UI üzerinden vekil olarak iletir.

## Sorun giderme

### Önizleme boş sayfa gösteriyor

- Geliştirme sunucunuzun çalıştığından emin olun
- Bağlantı noktasının `--proxy` ile eşleştiğini kontrol edin
- Sandbox modunda, bağlantı noktasına erişilebilmesi için `--host 0.0.0.0` kullanın

### HMR çalışmıyor

- Geliştirme sunucunuzun HMR'ı desteklediğini doğrulayın
- Tarayıcı konsolunda WebSocket hatalarını kontrol edin
- Bazı çatı sistemlerinde HMR'ın açıkça yapılandırılması gerekir

### CORS hataları

Proxy çoğu CORS sorununu halleder; ancak uygulamanız başka kaynaklara istek gönderiyorsa:

- Geliştirme sunucunuzun CORS ayarlarını yapılandırın
- Ya da CORS denetimini atlamak için bir tarayıcı uzantısı kullanın (yalnızca geliştirme amaçlı)