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

Termbridge може да проксира локалния ви сървър за разработка и да го показва в панел за визуализация. Това е идеално за тестване на мобилни устройства или за наблюдение на приложението ви, докато изпълнявате команди в терминала.

Бърз старт

# 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 се свързва без допълнителна конфигурация.

Редактирайте кода си и вижте промените веднага в изгледа „Визуализация“ — не е необходимо презареждане.

Поддържани рамки

Работи всеки сървър за разработка, който използва локален порт:

Само съгласувайте порта --proxy с порта на сървъра си за разработка.

Случаи на употреба

Тестване на мобилни устройства

Тествайте адаптивния си дизайн на истински телефон:

termbridge --proxy 5173

Сканирайте кода QR и вижте приложението си точно както се визуализира на мобилно Safari или Chrome.

Разработка на цялостни приложения

Изпълнявайте команди в терминала, докато наблюдавате приложението си:

1. Следете изхода от компилацията в изгледа „Терминал“
2. Вижте приложението си в изгледа „Визуализация“
3. Превключвайте между тях с едно докосване
4. Продължете работата си от телефона или таблета

Демонстриране на работата ви

Споделете публичната URL с някого, за да му покажете:

• Работещото ви приложение („Визуализация“)
• Сесията ви в терминала („Терминал“)

Подходящо за съвместна отдалечена работа или кратки демонстрации.

Режим на изолирана среда

Когато използвате среди Daytona, задайте порта за визуализация:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

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

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