# 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

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

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:

| Framework | Polecenie | Domyślny port |
|-----------|---------|--------------|
| 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 |

Dopasuj port `--proxy` do portu serwera deweloperskiego.

## Zastosowania

### Testowanie na urządzeniach mobilnych

Przetestuj responsywny projekt na prawdziwym telefonie:

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

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

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

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