# Визуализация на сървъра за разработка

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 (само за разработка)