Попередній перегляд сервера розробки
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-код 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 (лише для розробки)