Saltar al contenido principal

Mobile Development Guide

Desarrollo Local con Live Reload (Estilo Expo)​

Inicio Rápido​

# Android con configuración por defecto
npm run dev:mobile -- --platform=android

# iOS con configuración por defecto
npm run dev:mobile -- --platform=ios

# Con configuración específica
npm run dev:mobile -- --platform=android --config=auravantbeta

# Con dispositivo específico
npm run dev:mobile -- --platform=android --device=emulator-5554
npm run dev:mobile -- --platform=ios --device="iPhone 15 Pro"

Parámetros​

  • --platform=<android|ios> - Plataforma a ejecutar (requerido)
  • --config=<folder> - Carpeta de configuración en mobile/config/ (default: auravantbeta)
  • --device=<device-id> - ID del dispositivo/emulador específico (opcional)

¿Cómo funciona?​

  1. Configuración automática: El script configura el entorno según la carpeta de config
  2. Webpack Dev Server: Inicia el servidor de desarrollo en tu IP local (ej: http://192.168.1.100:8080)
  3. Live Reload: Capacitor se conecta al dev server y recarga automáticamente los cambios
  4. Hot Module Replacement: Los cambios en el código se reflejan instantáneamente

Refresh Manual​

Si necesitas refrescar manualmente la app:

Android:

  • Presiona Cmd+M (Mac) o Ctrl+M (Windows/Linux)
  • Selecciona "Reload" en el menú

iOS:

  • Presiona Cmd+R en el simulador
  • O sacude el dispositivo físico

Listar Dispositivos Disponibles​

Android:

adb devices

iOS:

xcrun simctl list devices

Workflow de Desarrollo​

  1. Iniciar dev server:

    npm run dev:mobile -- --platform=android --config=auravantbeta

  2. Esperar a que se abra Android Studio/Xcode

  3. Presionar "Run" en el IDE (solo la primera vez)

  4. Hacer cambios en el código - La app se recargará automáticamente

  5. Detener el servidor: Ctrl+C

Ventajas vs Build Tradicional​

TradicionalDev Mode
5-10 min por cambioInstantáneo
Rebuild completoSolo webpack rebuild
Reiniciar app manualmenteAuto-reload
Cerrar/abrir Android StudioMantener abierto

Troubleshooting​

"Cannot connect to dev server"

  • Verifica que tu dispositivo/emulador esté en la misma red
  • Revisa el firewall (puerto 8080 debe estar abierto)
  • Intenta con localhost si es emulador local

"App no recarga automáticamente"

  • Verifica que capacitor.config.json tenga la URL del servidor
  • Reinicia la app manualmente una vez
  • Revisa la consola del navegador en el dispositivo

"Module not found"

  • Detén el servidor (Ctrl+C)
  • Ejecuta npm install
  • Vuelve a iniciar

Notas​

  • El archivo capacitor.config.json se modifica temporalmente y se restaura al detener el servidor
  • Los cambios en assets nativos (iconos, splash) requieren npx cap sync
  • Los cambios en plugins nativos requieren rebuild completo