Cómo funciona la Vista previa de una aplicación en marcha
El túnel a localhost, los puertos permitidos, los objetivos con nombre y qué hacer cuando la Vista previa muestra una versión antigua de la página.
La Vista previa abre en el móvil la aplicación que está corriendo en tu ordenador en localhost. No una copia, no una captura: esa aplicación en marcha. El Agente cambia algo, tocas recargar y lo ves.
Cómo llegan ahí los datos
El navegador de la aplicación habla con el localhost del propio móvil, y el Servidor al otro lado abre una conexión TCP a localhost:port en su lado. Entre ambos está el mismo canal cifrado por el que va todo lo demás.
En el túnel no se reescribe nada: ni cabeceras ni contenido. Gracias a eso funcionan también los WebSockets, así que un servidor de desarrollo con recarga en caliente se comporta como en el ordenador.
No se publica nada en ninguna parte. Una aplicación en localhost se queda en localhost; el túnel existe solo mientras la Vista previa está abierta.
Puertos permitidos
El Servidor deja pasar solo puertos de los rangos permitidos. Por omisión son:
3000–3999, 4000–4999, 5173, 8000–8999Ahí caben los servidores de desarrollo habituales, y no caben las bases de datos ni SSH. Se puede cambiar en la configuración del Servidor:
{
"allowed_ports": [{ "from": 3000, "to": 3999 }, { "from": 9000, "to": 9000 }]
}Un intento en un puerto fuera del rango se escribe en el registro del Servidor. Es el único rastro de que el móvil intentó llegar a donde no debe.
Objetivos con nombre: y por qué valen la pena
En la configuración del Servidor se pueden nombrar aplicaciones completas, es decir, no un puerto sino un grupo:
{
"preview_targets": [
{ "name": "jobino", "port": 3000, "extra_ports": [8000] }
]
}En la Vista previa aparecen entonces como un botón bajo «De la configuración del Servidor» y se abren todos sus puertos a la vez.
Es la solución más frecuente de un problema que parece una aplicación rota: la página carga, pero el inicio de sesión o la carga de datos falla. El frontend corre en 3000, la API en 8000, y cuando solo está abierto el 3000, las peticiones a la API no llevan a ninguna parte desde el móvil. Un objetivo con nombre abre los dos.
Un objetivo con un puerto fuera de los rangos permitidos lo rechaza el Servidor al arrancar. Si lo dejara pasar, la Vista previa se abriría y solo fallaría la petición a la API, y se buscaría en la aplicación, no en el archivo donde realmente está.
Una versión antigua de la página
La confusión más frecuente: el Agente informa de que está listo, pero en la Vista previa sigue lo viejo. Normalmente la culpa es de una de estas tres cosas, en este orden:
- El navegador mantiene la página cargada
- Toca recargar en la barra de la Vista previa. No es una recarga corriente: se carga una ventana nueva, de modo que no se usa nada de lo que el navegador haya guardado aparte. Precisamente por eso está hecho así: lo pulsas en el momento en que has cambiado el código y quieres ver el nuevo.
- El servidor de desarrollo del ordenador no se ha recargado
- Si el Agente cambió algo que no se toma en caliente —configuración, dependencias, el build—, recargar en el móvil no ayuda, porque en el ordenador sigue corriendo el proceso viejo. Deja que el Agente reinicie ese servidor.
- El túnel está colgado en una conexión vieja
- Cierra la Vista previa y ábrela de nuevo. Se crea una conexión nueva a localhost: ese es el paso que ayuda cuando el servidor de desarrollo se ha reiniciado entretanto y la conexión vieja se quedó colgada.
Cuando ni eso ayuda, casi siempre es cosa del ordenador, no del móvil. La comprobación más rápida es abrir esa dirección en el navegador del ordenador.
Otras cosas que se confunden
- En el puerto no escucha nada
- La aplicación del ordenador no está corriendo, o corre en otro puerto. El error la Vista previa lo muestra como un aviso con la opción de reintentar, no como una página de error del navegador.
- Escucha, pero solo en IPv6
- Vite se ata por omisión a
[::1]. El Servidor prueba las dos familias de direcciones, así que esto funciona; y si aun así falla, en el aviso se ve qué dirección lo rechazó. - Una pantalla en blanco sin error
- Normalmente una petición a otro puerto, que desde el móvil no lleva a ninguna parte. La Vista previa atrapa esas peticiones y te avisa de ellas, pero la solución es un objetivo con nombre con todos los puertos, véase arriba.
- La aplicación registra un service worker
- El navegador del móvil no admite service workers sobre HTTP. La Vista previa cuela en su lugar un sustituto inactivo para que la aplicación no se caiga, pero el modo sin conexión no funciona en la Vista previa ni debe funcionar.
- Una maquetación rota
- Cambia el ancho a «Ordenador». Una aplicación escrita para escritorio se comporta de otro modo con el ancho de un móvil, y eso no es culpa de la Vista previa.
¿Se ha atascado en otro sitio distinto de lo que hay aquí? Escribe a support@coden-app.com.