Podgląd serwera deweloperskiego

Termbridge może pośredniczyć w połączeniu z lokalnym serwerem deweloperskim i wyświetlać go w panelu podglądu. To świetne rozwiązanie do testów na urządzeniach mobilnych lub obserwowania aplikacji podczas wykonywania poleceń w terminalu.

Szybki start

# 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

Możesz teraz przełączać się między widokami Terminal i Podgląd w UI.

Jak to działa

Po przekazaniu --proxy <port>:

1. Wszystkie trasy Termbridge pozostają w obrębie /__tb/
2. Wszystkie pozostałe żądania są przekazywane do serwera deweloperskiego
3. UI wyświetla przycisk Widoki, który pozwala przełączać się między widokami Terminal i Podgląd
4. Podgląd ładuje aplikację w elemencie iframe za pośrednictwem proxy

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

Przełączanie widoków

1. Stuknij przycisk Widoki na dolnym pasku
2. Wybierz Przełącz na terminal lub Przełącz na podgląd
3. Widok zmieni się natychmiast

Oba widoki pozostają połączone — sesja terminala działa dalej podczas wyświetlania podglądu.

Hot Module Replacement (HMR)

HMR w Vite działa za pośrednictwem proxy. Każde połączenie WebSocket spoza /__tb/, nawiązane z przeglądarki po zalogowaniu, jest przekazywane do serwera deweloperskiego niezależnie od ścieżki. Dzięki temu gniazdo HMR łączy się bez dodatkowej konfiguracji.

Edytuj kod i od razu zobacz zmiany w widoku Podgląd — bez odświeżania.

Obsługiwane frameworki

Działa każdy serwer deweloperski uruchomiony na lokalnym porcie:

Dopasuj port --proxy do portu serwera deweloperskiego.

Zastosowania

Testowanie na urządzeniach mobilnych

Przetestuj responsywny projekt na prawdziwym telefonie:

termbridge --proxy 5173

Zeskanuj kod QR i zobacz aplikację dokładnie tak, jak jest wyświetlana na urządzeniu mobilnym Safari lub Chrome.

Tworzenie aplikacji full-stack

Wykonuj polecenia w terminalu, jednocześnie obserwując aplikację:

1. Obserwuj wynik kompilacji w widoku Terminal
2. Zobacz aplikację w widoku Podgląd
3. Przełączaj się między nimi jednym stuknięciem
4. Kontynuuj pracę na telefonie lub tablecie

Pokaż swoją pracę

Udostępnij komuś publiczny URL, aby pokazać:

• Działającą aplikację (Podgląd)
• Sesję terminala (Terminal)

Świetne rozwiązanie do zdalnej współpracy w parach lub szybkich prezentacji.

Tryb sandbox

Korzystając z sandboxów Daytona, ustaw port podglądu:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Upewnij się, że serwer deweloperski nasłuchuje na wszystkich interfejsach:

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

Termbridge pośredniczy w Daytona podglądzie URL za pośrednictwem UI.

Rozwiązywanie problemów

Podgląd wyświetla pustą stronę

• Upewnij się, że serwer deweloperski działa
• Sprawdź, czy port jest zgodny z --proxy
• W trybie sandbox użyj --host 0.0.0.0, aby port był osiągalny

HMR nie działa

• Sprawdź, czy serwer deweloperski obsługuje HMR
• Sprawdź błędy WebSocket w konsoli przeglądarki
• Niektóre frameworki wymagają jawnej konfiguracji HMR

Błędy CORS

Proxy obsługuje większość problemów CORS, ale jeśli aplikacja wysyła żądania do innych źródeł:

• Skonfiguruj ustawienia CORS serwera deweloperskiego
• Lub użyj rozszerzenia przeglądarki, aby ominąć CORS (tylko na potrzeby programowania)