# Предпросмотр сервера разработки

Termbridge может проксировать локальный сервер разработки и показывать его в панели предпросмотра. Это удобно для тестирования на мобильных устройствах или наблюдения за приложением во время работы с командами в терминале.

## Быстрый старт

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

Теперь в UI можно переключаться между представлениями **Терминал** и **Предпросмотр**.

## Как это работает

При передаче `--proxy <port>`:

1. Все маршруты Termbridge остаются в `/__tb/`
2. Все остальные запросы проксируются на сервер разработки
3. В UI появляется кнопка **Представления** для переключения между терминалом и предпросмотром
4. Предпросмотр загружает приложение в iframe через прокси

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

## Переключение представлений

1. Нажмите кнопку **Представления** на нижней панели
2. Выберите **Переключиться на терминал** или **Переключиться на предпросмотр**
3. Представление обновится мгновенно

Оба представления остаются подключёнными — сеанс терминала продолжается, пока вы просматриваете предпросмотр.

## Горячая замена модулей (HMR)

HMR в Vite работает через прокси. Все подключения WebSocket, кроме подключений из авторизованного браузера к `/__tb/`, перенаправляются на сервер разработки независимо от пути, поэтому сокет HMR подключается без дополнительной настройки.

Измените код и сразу увидите результат в режиме предпросмотра — обновлять страницу не нужно.

## Поддерживаемые фреймворки

Подойдёт любой сервер разработки, работающий на локальном порту:

| Фреймворк | Команда | Порт по умолчанию |
|-----------|---------|--------------|
| 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` тот же порт, что и у сервера разработки.

## Сценарии использования

### Тестирование на мобильных устройствах

Проверьте адаптивный дизайн на настоящем телефоне:

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

Отсканируйте код QR и посмотрите, как приложение отображается на мобильном устройстве под управлением Safari или Chrome.

### Полнофункциональная разработка

Выполняйте команды в терминале и одновременно следите за приложением:

1. Следите за выводом сборки в представлении терминала
2. Просматривайте приложение в режиме предпросмотра
3. Переключайтесь между ними одним нажатием
4. Продолжайте работу с телефона или планшета

### Покажите свою работу

Поделитесь публичной ссылкой URL, чтобы показать кому-нибудь:

- Работающее приложение (предпросмотр)
- Сеанс терминала (терминал)

Отлично подходит для удалённой совместной работы или быстрых демонстраций.

## Режим песочницы

При использовании песочниц Daytona задайте порт предпросмотра:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

Убедитесь, что сервер разработки привязан ко всем интерфейсам:

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

Termbridge проксирует предпросмотр Daytona через URL в UI.

## Устранение неполадок

### В предпросмотре отображается пустая страница

- Убедитесь, что сервер разработки запущен
- Проверьте, совпадает ли порт с `--proxy`
- В режиме песочницы используйте `--host 0.0.0.0`, чтобы порт был доступен

### HMR не работает

- Убедитесь, что сервер разработки поддерживает HMR
- Проверьте консоль браузера на наличие ошибок WebSocket
- Для некоторых фреймворков требуется явная настройка HMR

### Ошибки CORS

Прокси обрабатывает большинство проблем CORS, но если приложение отправляет запросы на другие источники:

- Настройте параметры CORS сервера разработки
- Или используйте расширение браузера, чтобы обойти CORS (только для разработки)