# 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

```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
```

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:

| Framework | Comando | Puerto predeterminado |
|-----------|---------|--------------|
| 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 |

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:

```bash
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:

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

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

```bash
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)