Live Dev - ve cada cambio guardado en tu teléfono

1Qué es Live Dev#

Live Dev crea una APP DE DESARROLLO para tu propio teléfono. En lugar de empaquetar tus archivos dentro del APK, la app los carga desde el servidor de desarrollo que corre en tu PC, así que cada vez que guardas un archivo, el cambio aparece en el teléfono. Sin recompilar, sin reinstalar, sin copiar ZIPs.

Es el verdadero shell de AppMint, no una pestaña del navegador: la cámara, la ubicación, las notificaciones, los anuncios, el botón atrás, el menú lateral y cada puente de AppMint se comportan exactamente como lo harán en tu app terminada.

La compilas una sola vez. Después solo vuelves a AppMint cuando cambias algo nativo: un permiso, el icono, el splash, los ID de anuncios.

2Compila la app de desarrollo (una sola vez)#

1. En la pantalla de inicio toca 'Live Dev' (o Create APK → el icono 'Live Dev').
2. Elige el puerto de tu servidor de desarrollo. Un toque para las herramientas más comunes: Vite 5173, React / Next 3000, Angular 4200, Vue CLI 8080, Live Server 5500, Python 8000, Astro 4321. Sirve cualquier puerto desde 1024.
3. Opcional: una página de inicio como /admin/index.html y la dirección de tu PC. Deja la dirección vacía: la app encuentra tu PC por sí sola.
4. Dale un nombre de paquete que termine en .dev (por ejemplo com.myshop.dev) para que pueda convivir con tu app real más adelante.
5. En el paso Access marca los permisos que quieras probar (cámara, ubicación, notificaciones…). Son nativos, así que se fijan al compilar.
6. Compila e instala el APK en tu teléfono.

Una compilación Live Dev nunca produce un paquete de Play (AAB): solo funciona junto a tu PC, así que nunca debe publicarse.

3Inicia tu servidor de desarrollo para que el teléfono pueda alcanzarlo#

Por defecto, la mayoría de los servidores de desarrollo solo escuchan al propio PC. Añade el interruptor 'host' para que otros dispositivos de tu Wi-Fi puedan conectarse:

• Vite (React, Vue, Svelte, Astro): npm run dev -- --host
• Next.js: npx next dev -H 0.0.0.0
• Angular: ng serve --host 0.0.0.0
• Create React App / Vue CLI: ya escuchan en la red

¿Solo tienes una carpeta de archivos HTML? Cualquiera de estos la convierte en un servidor; ejecútalo dentro de la carpeta:

• npx serve -l 5500
• python -m http.server 8000
• VS Code: instala 'Live Server' y haz clic en 'Go Live'

Windows pregunta una vez si permites el servidor a través del firewall: marca 'Private networks' y permítelo. Si pulsaste Cancelar, el teléfono no podrá conectarse hasta que permitas Node (o Python) en Seguridad de Windows → Firewall → Permitir una aplicación.

npm run dev -- --host

4Conéctate por Wi-Fi: sin cable, sin nada que instalar#

1. Pon el teléfono en la misma Wi-Fi que el PC.
2. Abre tu app Live Dev.

Eso es todo. La app busca tu servidor de desarrollo en el puerto que elegiste, encuentra tu PC y carga la página. Recuerda el PC para la próxima vez. Si tu servidor está en otro puerto, o responden varios PC, te los muestra y tocas el tuyo.

¿No encuentra nada? La pantalla de conexión sigue intentándolo cada dos segundos y abre la página por sí sola en cuanto tu servidor es accesible: arranca el servidor y observa. 'Find my PC' también revisa los otros puertos comunes. Siempre puedes escribir en 'Enter it yourself' la dirección que Vite imprime bajo 'Network:'.

Por qué esto es mejor que escribir http://192.168.1.5:5173 en una app de sitio web: la página sigue ejecutándose como http://localhost:PORT en el teléfono (la app lo canaliza hacia tu PC). localhost es un CONTEXTO SEGURO, así que funcionan la cámara, el micrófono, la ubicación, el portapapeles, los service workers y las passkeys. En una dirección 192.168… normal, el motor del navegador los bloquea todos.

5Conéctate por USB: funciona sin Wi-Fi#

Úsalo cuando el PC y el teléfono estén en redes distintas, en un Wi-Fi de invitados que impide que los dispositivos se vean entre sí, o sin ninguna red.

1. En el teléfono: Ajustes → Información del teléfono → toca 'Número de compilación' siete veces, luego Opciones de desarrollador → activa 'Depuración por USB'.
2. Conecta el teléfono al PC y acepta el aviso 'Allow USB debugging'.
3. En el PC ejecuta el comando de abajo (usa tu puerto). adb viene con Android Studio, o descarga 'SDK Platform-Tools' de Google: es un ZIP pequeño.
4. Abre tu app Live Dev. Detecta la conexión USB y la usa antes de probar el Wi-Fi.

Ejecuta el comando de nuevo después de desconectar el cable o reiniciar el teléfono. Con USB NO necesitas el interruptor 'host' del paso 3.

Si la pantalla de conexión dice 'USB link is up, but nothing answers on your PC's port': la parte del cable funciona y tu servidor de desarrollo simplemente no está en marcha.

adb reverse tcp:5173 tcp:5173

Descarga SDK Platform-Tools (adb) →

6El botón DEV#

Un pequeño botón DEV flota en el borde de la app: arrástralo adonde quieras. Se pone rojo con un número cuando tu página registra un error. Tócalo para:

• Recargar: siempre obtiene una copia nueva de cada archivo, nunca una en caché.
• Console - todo lo que registra tu página, con errores y avisos coloreados, con el archivo y la línea (src/App.tsx:42). 'Errors' filtra, 'Copy' pone todo el registro en el portapapeles: pégalo en un chat o en un informe de error.
• Run JavaScript - una línea en la parte inferior de la consola. Escribe cualquier expresión y ve el resultado, ahí mismo en el teléfono. Las promesas se esperan y se registran.
• Refresh on save - mira el paso siguiente.
• Cambiar servidor: otro PC u otro puerto, sin volver a compilar.
• Borrar datos del sitio y recargar: limpia las cookies, localStorage e IndexedDB para una prueba limpia de primer uso.
• Información de conexión: la dirección, USB o Wi-Fi, y la IP de este teléfono.

Para DevTools completo (elementos, red, puntos de interrupción) conecta el cable, abre chrome://inspect en Chrome en el PC y elige tu app.

7Recarga al guardar, incluso con HTML simple#

Vite, Next, Angular y webpack aplican tus cambios en la página por sí solos (recarga en caliente). La app lo detecta y no interfiere.

Una carpeta simple servida con python, 'npx serve' o cualquier servidor estático no tiene recarga en caliente: normalmente tendrías que guardar y luego tirar para refrescar, cada vez. Live Dev lo hace por ti: recuerda qué archivos cargó la página, pregunta a tu servidor una vez por segundo si alguno cambió y recarga cuando uno cambia. Un archivo .css modificado se reemplaza en el sitio sin recargar, así que conservas la posición de desplazamiento y lo escrito en formularios mientras das estilo.

No hay nada que instalar en el PC. Desactívalo desde el botón DEV si alguna vez quieres control manual. La pantalla también se mantiene encendida mientras una app Live Dev está abierta.

8Cuando termines: compila la app real#

Una app Live Dev solo funciona junto a tu PC: nunca se la des a los usuarios. Cuando el proyecto esté listo:

• Proyecto con framework (Vite, React, Vue…): ejecuta 'npm run build', comprime la carpeta dist (o comprime todo el proyecto fuente) y compílalo en Create APK → Offline ZIP.
• Carpeta HTML simple: comprímela en ZIP con index.html en la raíz → ZIP sin conexión. ¿Un solo archivo? Usa la opción HTML.
• Ya desplegado en una dirección https:// real: Create APK → Website.

Usa tu nombre de paquete real para esa compilación. Como el paquete de la app de desarrollo termina en .dev, ambas pueden quedar instaladas lado a lado.

9Si no conecta#

• Wi-Fi: 'Waiting for your dev server' para siempre → el servidor solo escucha al PC. Reinícialo con el interruptor de host del paso 3 (Vite imprime una línea 'Network:' cuando es correcto).

• Wi-Fi: sigue sin pasar nada → el firewall de Windows lo está bloqueando (paso 3), o el router aísla los dispositivos (común en Wi-Fi de invitados, oficinas y hoteles). Usa USB, o activa el punto de acceso del teléfono y conecta el PC a él.

• USB: 'adb' no se reconoce → instala Platform-Tools y ejecuta el comando desde esa carpeta. 'no devices' → acepta el aviso de depuración por USB en el teléfono, o prueba otro cable (muchos cables son solo de carga).

• 'Port … is busy on this phone' → otra app del teléfono usa ese puerto. Ejecuta tu servidor de desarrollo en otro puerto y escríbelo en 'Enter it yourself'.

• Vite muestra 'Blocked request. This host is not allowed' → abriste la dirección del PC en un navegador normal o en una app de sitio web. La app Live Dev nunca provoca esto, porque siempre pide localhost.

• La página carga pero tus llamadas a la API fallan → la lista CORS de tu backend debe permitir http://localhost:PORT (la mayoría de las configuraciones de desarrollo ya lo hacen), y una URL de API escrita como http://localhost:4000 se refiere al TELÉFONO. Redirige también ese puerto (adb reverse tcp:4000 tcp:4000) o usa la dirección del PC para la API.

• Una página en blanco al cambiar de proyecto en el mismo puerto → DEV → Borrar datos del sitio y recargar (responde un service worker antiguo).