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ıç

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

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

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:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

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

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ı)