Vista previa del servidor de desarrollo

Termbridge puede redirigir su servidor de desarrollo local y mostrarlo en un panel de vista previa. Es ideal para probar en móviles o ver la aplicación mientras ejecuta comandos en la terminal.

Inicio rápido

# 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

Ahora puede alternar entre las vistas de Terminal y Vista previa en UI.

Cómo funciona

Al indicar --proxy <port>:

1. Todas las rutas de Termbridge permanecen en /__tb/
2. El resto de las solicitudes se redirige al servidor de desarrollo
3. UI muestra un botón Vistas para alternar entre Terminal y Vista previa
4. La vista previa carga su aplicación en un iframe a través del proxy

Browser → Termbridge → Your dev server (localhost:5173)

Cambiar de vista

1. Toque el botón Vistas de la barra inferior
2. Elija Cambiar a Terminal o Cambiar a Vista previa
3. La vista se actualiza al instante

Ambas vistas permanecen conectadas: la sesión de terminal continúa mientras consulta la vista previa.

Reemplazo de módulos en caliente (HMR)

El HMR de Vite funciona a través del proxy. Todas las conexiones WebSocket, excepto /__tb/, de un navegador con sesión iniciada se reenvían al servidor de desarrollo, cualquiera que sea su ruta, para que el socket HMR se conecte sin configuración adicional.

Edite el código y vea los cambios al instante en la vista previa, sin necesidad de actualizar la página.

Frameworks compatibles

Funciona cualquier servidor de desarrollo que se ejecute en un puerto local:

Basta con hacer coincidir el puerto --proxy con el del servidor de desarrollo.

Casos de uso

Pruebas en móviles

Pruebe el diseño adaptable en un teléfono real:

termbridge --proxy 5173

Escanee el código QR y vea su aplicación tal como se muestra en móviles con Safari o Chrome.

Desarrollo de pila completa

Ejecute comandos en la terminal mientras observa su aplicación:

1. Observe el resultado de la compilación en la vista Terminal
2. Vea su aplicación en la vista Vista previa
3. Alterne entre ambas con un toque
4. Siga trabajando desde el teléfono o la tableta

Muestre su trabajo

Comparta el enlace público URL para mostrar a otras personas:

• Su aplicación en ejecución (Vista previa)
• Su sesión de terminal (Terminal)

Ideal para colaborar a distancia o hacer demostraciones rápidas.

Modo sandbox

Al usar sandboxes Daytona, establezca el puerto de vista previa:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Asegúrese de que el servidor de desarrollo esté enlazado a todas las interfaces:

npm run dev -- --host 0.0.0.0 --port 5173

Termbridge redirige la vista previa Daytona a través de URL hacia UI.

Solución de problemas

La vista previa muestra una página en blanco

• Compruebe que el servidor de desarrollo esté en ejecución
• Compruebe que el puerto coincida con --proxy
• En modo sandbox, use --host 0.0.0.0 para que se pueda acceder al puerto

HMR no funciona

• Compruebe que su servidor de desarrollo sea compatible con HMR
• Busque errores de WebSocket en la consola del navegador
• Algunos frameworks necesitan una configuración explícita de HMR

Errores de CORS

El proxy gestiona la mayoría de los problemas de CORS, pero si su aplicación realiza solicitudes a otros orígenes:

• Configure los ajustes de CORS de su servidor de desarrollo
• O use una extensión del navegador para omitir CORS (solo durante el desarrollo)