# Попередній перегляд сервера розробки

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-код 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 (лише для розробки)