Предпросмотр сервера разработки
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>:
- Все маршруты Termbridge остаются в
/__tb/ - Все остальные запросы проксируются на сервер разработки
- В UI появляется кнопка Представления для переключения между терминалом и предпросмотром
- Предпросмотр загружает приложение в iframe через прокси
Browser → Termbridge → Your dev server (localhost:5173)
Переключение представлений
- Нажмите кнопку Представления на нижней панели
- Выберите Переключиться на терминал или Переключиться на предпросмотр
- Представление обновится мгновенно
Оба представления остаются подключёнными — сеанс терминала продолжается, пока вы просматриваете предпросмотр.
Горячая замена модулей (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 тот же порт, что и у сервера разработки.
Сценарии использования
Тестирование на мобильных устройствах
Проверьте адаптивный дизайн на настоящем телефоне:
termbridge --proxy 5173
Отсканируйте код QR и посмотрите, как приложение отображается на мобильном устройстве под управлением Safari или Chrome.
Полнофункциональная разработка
Выполняйте команды в терминале и одновременно следите за приложением:
- Следите за выводом сборки в представлении терминала
- Просматривайте приложение в режиме предпросмотра
- Переключайтесь между ними одним нажатием
- Продолжайте работу с телефона или планшета
Покажите свою работу
Поделитесь публичной ссылкой 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 (только для разработки)