Convierte tu app de Lovable a iOS y Android con Capacitor

Introducción

Lovable es un creador de apps con IA que convierte prompts en apps de React funcionales en minutos. Puedes lanzar rápido desde el navegador, pero ¿y si quieres tu app en la App Store y Google Play, en la pantalla de inicio como cualquier otra app nativa?

Versión corta: el Página de Lovable a iOS y Android resume todo el proceso en una sola pantalla: exportación, Capacitor, builds en la nube sin Mac y actualizaciones en vivo.

Esta guía recorre todo el proceso: exportar desde Lovable, envolver la app web con Capacitor, compilar binarios firmados de iOS y Android en la nube con Builder de Capgo (sin necesidad de Mac), añade una función nativa real y publica una corrección de layout over the air con Live Updates de Capgo.

Usamos Cursor durante todo el proceso: su IA puede ejecutar la mayoría de los comandos de terminal por ti si prefieres no escribirlos manualmente.

Tiempo necesario: unas 1–2 horas la primera vez, sobre todo configurar la cuenta y esperar los builds en la nube.

Al final, tendrás:

• Una app nativa para iOS y Android construida desde la nube, sin Xcode ni Android Studio en el flujo principal
• La app funcionando en un dispositivo real (TestFlight, instalación directa o pruebas internas de Play)
• Una función de cámara funcional que solo una app nativa puede ofrecer
• Live Updates configurados para publicar correcciones de UI y CSS sin revisión de la tienda

Requisitos

Costos (solo para publicar públicamente):

Opcional (solo simulador local):

Puedes omitir ambos. La ruta principal de esta guía compila en la nube e instala en dispositivos reales sin ellos.

Una nota rápida sobre Lovable y frameworks

Antes de tocar code, ten en cuenta que el tipo de web app que genera Lovable afecta al wrapping móvil.

Durante mucho tiempo, el valor predeterminado de Lovable era single-page app (SPA) con React + Vite. A partir de mayo de 2026, las nuevas apps de Lovable pueden usar TanStack Start con server-side rendering (SSR) por defecto. El SSR es genial para la web, pero Capacitor envuelve una build estático — una carpeta de HTML, CSS y JavaScript con un index.html en la raíz — que se envía dentro de la app en el dispositivo.

Una app SSR espera un servidor para renderizar páginas en cada solicitud. No hay servidor dentro de un teléfono, así que para Capacitor quieres salida estática renderizada en el cliente.

Qué hacer:

• Empezando de cero: Pídele a Lovable una aplicación de página única (SPA) o para omitir SSR y obtener una versión estática dist/ carpeta.
• Si ya usas TanStack Start (SSR): Configúralo para pre-renderizar o generar una SPA estática. El único requisito indispensable es una carpeta de build estática que contenga index.html.
• Proyectos legacy de Next.js en Lovable: Usa exportación estática — la salida va a out/ en lugar de dist/.

Sea cual sea el framework que uses, apunta Capacitor’s webDir a esa carpeta. Para una SPA con Vite, esa carpeta es dist.

Paso 1 — Exporta tu app de Lovable a GitHub

Lovable mantiene tu code en su editor hasta que conectes GitHub.

1. Abre tu proyecto de Lovable en el navegador
2. Haz clic Actualizar (arriba a la derecha) si es necesario, y abre Git en el menú de la izquierda
3. Elige GitHub, autoriza Lovable y vincula tu cuenta
4. Lovable crea un repositorio y hace push de tu app automáticamente

✅ Éxito: Visitando github.com/YOUR-USERNAME/your-app muestra el code de tu app.

Paso 2 — Configura Cursor y clona tu proyecto

Antes de trabajar con tu code localmente, necesitarás un editor code. Recomendamos Cursor, un editor impulsado por IA que puede ejecutar comandos de terminal por ti.

Descarga e instala Cursor

1. Visita cursor.sh y descarga la versión para tu sistema operativo
2. Instala Cursor siguiendo el asistente de instalación
3. Una vez instalado, abre Cursor

Configura Cursor para desarrollo con IA

Para la mejor experiencia, configura Cursor antes de empezar:

1. Compra un plan de Cursor — Aunque Cursor ofrece un plan gratuito, el plan Pro ($20/mes) te da completados de IA ilimitados, acceso a Claude y GPT-4, y ejecución de comandos
2. Abre la configuración de Cursor presionando Command+, (Mac) o Ctrl+, (Windows)

3. Habilita modelos de IA — Make sure AI features are enabled:

4. Selecciona tu modelo preferido — Elige Claude o GPT-4 para obtener los mejores resultados:

5. Permitir ejecución de comandos — Permite que Cursor ejecute comandos por ti:

Clona tu repositorio en Cursor

1. En Cursor, presiona Shift+Command+P (Mac) o Shift+Ctrl+P (Windows) para abrir la paleta de comandos
2. Escribe “clone” y selecciona Git: “Clone”
3. Pega la URL de tu repositorio GitHub: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Elige una carpeta para guardar el proyecto

5. Cursor clonará y abrirá tu proyecto

Paso 3 — Instalar dependencias y ejecutar en local

Método 1: con Cursor AI (recomendado)

1. Abre la pestaña de IA de Cursor presionando Command+K (Mac) o Ctrl+K (Windows)
2. Escribe el siguiente comando:

Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

La IA detectará automáticamente tu SO, instalará Node.js y ejecutará npm install, e iniciará el dev server con npm run dev.

Método 2: Instalación manual

Abre la terminal en Cursor presionando Shift+Command+T (Mac) o Shift+Ctrl+T (Windows) y luego:

Para macOS:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev

Para Windows:

1. Descarga el 24 LTS instalador de nodejs.org
2. Ejecuta el instalador
3. Abre la terminal y ejecuta:

cd your-lovable-app
npm install
npm run dev

Las apps de Lovable suelen ejecutarse en http://localhost:8080 o http://localhost:5173 — usa la dirección que imprima tu terminal.

Presiona Ctrl + C para detener el dev server cuando quieras continuar.

✅ Éxito: Tu app se abre en el navegador con su UI funcionando.

Paso 4 — Preparar el build estático de producción

Capacitor requiere un build de producción antes de añadir plataformas nativas.

React + Vite (la mayoría de apps de Lovable)

Método 1: con Cursor AI (recomendado)

Presiona Command+K (Mac) o Ctrl+K (Windows) y pregunta:

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

Método 2: Configuración manual

Confirmar vite.config.ts usa una base relativa para que los assets carguen en el WebView nativo:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

Compila y verifica:

npm run build

Deberías ver un dist/ carpeta con index.html en su raíz.

Proyectos legacy de Next.js en Lovable

Si tu repo usa Next.js, pídele a Cursor:

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

O sigue Convierte tu app de Next.js a móvil para la configuración next.config completa, luego usa webDir: 'out' en Capacitor en vez de dist.

✅ Éxito: Existe una carpeta de build estática (dist/ o out/) con index.html.

Paso 5 — Añadir Capacitor y plataformas nativas

Capacitor envuelve tu web app en shells reales de iOS y Android, sin necesidad de reescribir nada.

Método 1: con Cursor AI (recomendado)

Presiona Command+K (Mac) o Ctrl+K (Windows) y pregunta:

Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms

La IA te pedirá el nombre de la app y bundle ID (p. ej. com.yourcompany.myapp).

Método 2: Instalación manual

npm install @capacitor/core @capacitor/cli
npx cap init

Cuando aparezca el prompt:

Elige un Package ID que realmente sea tuyo. Los Bundle IDs son únicos globalmente. Usa un ID de dominio inverso basado en un dominio que controles desde el inicio; cambiarlo después implica buscar y reemplazar en ios/ y android/ y reconstruir todo.

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Configurar Capacitor

Método 1: con Cursor AI (recomendado)

Pídele a Cursor:

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Para la exportación estática de Next.js, pídele que use out en su lugar.

Método 2: Configuración manual

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

Build y Sync

Método 1: con Cursor AI (recomendado)

Dile a Cursor:

Build the production web app and sync it with Capacitor platforms

Método 2: Comandos manuales

npm run build
npx cap sync

Tu proyecto ahora se ve así:

your-lovable-app/
├── android/              ← native Android project
├── ios/                  ← native iOS project
├── dist/                 ← built web app (or out/ for Next.js)
├── src/                  ← your Lovable app code
├── capacitor.config.ts
└── package.json

No necesitas CocoaPods. Capacitor 8 usa automáticamente Swift Package Manager para las dependencias de iOS.

✅ Éxito: ios/ y android/ aparecen las carpetas y la terminal muestra Sync finished.

Paso 6 — Revisa tu .gitignore

El Capgo Builder compila desde tu repositorio de Git, así que ios/ y android/ deben commitearse. Un error común es ignorarlos en la raíz del repo.

Confirmar:

• Raíz .gitignore ignora node_modules y dist (la nube reconstruye dist durante los builds web)
• ios/ y android/ ellos mismos son necesitas ignorado

✅ Éxito: git status muestra ios/ y android/ listo para commit (no ignorado).

Paso 7 — Commit y push

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Éxito: Tu repo de GitHub muestra los ios/ y android/ carpetas.

Paso 8 — Compilar binarios listos para la tienda con Capgo Builder

No necesitas un Mac ni un pipeline local de Xcode/Android Studio para publicar. Builder de Capgo compila, firma y puede enviar builds de iOS y Android desde la nube.

Configura Capgo Builder

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

Guarda las credenciales de firma una vez. Usa nuestras herramientas gratuitas si necesitas ayuda para generarlas:

• Generador de certificados iOS
• Generador de keystore para Android
• Buscador de UDID para iOS — registra tu iPhone para builds de desarrollo

Ver Gestión de credenciales y Build de iOS desde Windows.

Solicitar un build en la nube

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release

Los logs de build se muestran en tu terminal. Con App Store Connect configurado, los builds de iOS pueden subirse a TestFlight automáticamente.

Instalar en un dispositivo real:

• iOS: TestFlight (recomendado) o un build de desarrollo con el UDID de tu dispositivo registrado
• Android: pista de pruebas internas de Google Play o APK/AAB de versión firmada

✅ Éxito: Un build firmado se completa y puedes instalarlo en un dispositivo real.

Paso 9 — Opcional: Probar localmente en Xcode o Android Studio

Si tienes un Mac o quieres probar con emuladores antes de los cloud builds:

Para iOS

Método 1: con Cursor AI (recomendado)

Open the iOS project in Xcode

Método 2: Comando manual

npx cap open ios

Configuración inicial de Xcode:

1. Selecciona un simulador desde el desplegable de dispositivos (p. ej., iPhone 15)
2. Para dispositivos reales: habilita Gestionar la firma automáticamente y selecciona tu equipo de Apple Developer
3. Haz clic en el botón ▶️ Play — el primer build tarda 5–10 minutos

Para Android

Método 1: con Cursor AI (recomendado)

Open the Android project in Android Studio

Método 2: Comando manual

npx cap open android

Configuración inicial de Android Studio:

1. Instala los paquetes SDK que falten si se te pide
2. Crea un emulador en Device Manager (p. ej., Pixel 6, API 33+)
3. Haz clic en el botón verde ▶️ Run — el primer build tarda 5–15 minutos

Usa IDEs locales para el debugging diario. Usa Builder de Capgo cuando necesites binarios de release firmados.

✅ Éxito: La app se abre en el simulador o emulador mostrando tu contenido de Lovable.

Paso 10 — Activar Live Reload (Desarrollo)

Acelera la iteración apuntando el shell nativo a tu servidor de desarrollo local.

Método 1: con Cursor AI (recomendado)

Dile a Cursor:

Set up live reload for Capacitor development with my local IP address

Método 2: Configuración manual

1. Busca tu dirección IP local:

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. Actualizar capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173',
    cleartext: true,
  },
};

export default config;

Usar puerto 8080 o 3000 si eso es lo que npm run dev imprime.

3. Aplicar cambios:

npx cap copy

✅ Éxito: Los cambios en tu web code se recargan al instante en el dispositivo o simulador.

Paso 11 — Añadir una función nativa: la cámara

Un plugin de Capacitor permite que JavaScript llame a funciones reales del dispositivo. Añadiremos el plugin de Cámara para que los usuarios puedan tomar una foto, algo que una pestaña del navegador no puede hacer de forma fiable.

Método 1: con Cursor AI (recomendado)

Dile a Cursor:

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

Método 2: Instalación manual

npm install @capacitor/camera
npx cap sync

iOS — añadir a ios/App/App/Info.plist dentro del nivel superior <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — añadir dentro <manifest> en android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

Añadir un plugin requiere un nuevo build nativo mediante Capgo Builder antes de que funcione en los dispositivos.

✅ Éxito: Camera code compila y npx cap sync termina sin errores.

Paso 12 — Añadir Capgo Live Updates

Cada cambio nativo normalmente pasa por la revisión de la App Store. Live Updates de Capgo publica cambios en la capa web de tu app (HTML, CSS, JS, imágenes) de forma OTA en minutos.

Instala el updater en tu primer release para que nunca te quedes esperando una revisión cuando necesites lanzar un fix.

npm install @capgo/capacitor-updater
npx cap sync

Añadir a capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
    },
  },
};

export default config;

Inicializa en el punto de entrada de tu app (p. ej. src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

Commit, push y ejecuta un nuevo build de Capgo Builder para que el updater SDK esté en el shell nativo.

Sube los web bundles tras el lanzamiento:

npm run build
npx @capgo/cli@latest bundle upload --channel production

Ver Docs de Capgo Live Updates.

Para automatizar este upload cada vez que alguien hace clic en Publicar en Lovable, sigue Automatiza Capgo Live Updates desde Lovable con GitHub Actions.

✅ Éxito: El plugin Updater está instalado y notifyAppReady() se ejecuta al iniciar.

Paso 13 — Corrige el espaciado de la barra de estado con un Live Update

En un iPhone real, el header podría quedar en la barra de estado (reloj y batería). Los Capacitor modernos se dibujan de borde a borde, así que tu app debe respetarla los safe area insets: env(safe-area-inset-top), -bottom, -left, -right.

Muchas apps de Lovable ya manejan el inset inferior, pero usan un padding superior fijo (como pt-6) sin considerar el inset superior.

1. Confirmar viewport-fit=cover en index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

2. Corregir headers superiores — usa max() para mantener el padding web y adaptarse a dispositivos con notch:

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

En Cursor o Lovable, pregunta:

“El contenido de la app se ejecuta bajo la barra de estado en la parte superior en móvil. Añade env(safe-area-inset-top) al padding superior de cada encabezado de página usando max(), manteniendo el padding existente como mínimo.”

3. Publica la corrección vía OTA — esto es CSS puro, no requiere recompilar el código nativo:

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

Cierra la app por completo en tu dispositivo, ábrela de nuevo, espera unos 15–30 segundos y vuelve a abrirla. La cabecera debería aparecer debajo de la barra de estado — corregido sin revisión de la tienda.

✅ Éxito: El contenido superior despeja la barra de estado tras aplicar el bundle OTA.

Para ajustes de layout más profundos, consulta @capgo/tailwind-capacitor y pantalla edge-to-edge de Capacitor.

Paso 14 — Prepara tu listing en la tienda

Tu app está construida, es instalable y puedes empujar actualizaciones instantáneas. Publicar en las tiendas públicas es mayormente trámite:

• Icono de la app — 1024×1024px para iOS (sin transparencia), 512×512px para Google Play
• Screenshots — Apple requiere capturas de iPhone 6.9” (1320×2868px)
• Nombre de la app, subtítulo, descripción, palabras clave
• URL de la política de privacidad — obligatorio en ambas tiendas, incluso para apps gratuitas
• Age rating — cuestionario en cada consola
• Divulgaciones de recopilación de datos — Etiquetas de privacidad de Apple y Seguridad de datos de Google

Método 1: con Cursor AI (recomendado)

Set up app icons and splash screens for my Capacitor app

Método 2: Configuración manual

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Lo que falta antes de "live":

1. pruebas cerradas de Google Play (cuentas personales creadas después del 13 de noviembre de 2023): al menos 12 testers durante 14 días consecutivos antes de acceder a producción. iOS no tiene equivalente.
2. Enviar para revisión — Apple ~3–5 días, Google ~3–7 días una vez cumplidos los requisitos de testing.

Mira nuestro guía para la primera revisión de la app para la lista de verificación completa.

Errores comunes (y cómo solucionarlos)

• Could not find the web assets directory: ./dist — Ejecuta npm run build antes npx cap add o npx cap sync. Asegúrate de que webDir en capacitor.config.ts coincida con el output de tu framework (dist si usas Vite, out si usas Next.js static export).
• “Este App ID … no está disponible” — Los Bundle IDs son únicos globalmente. Elige un ID de dominio inverso que controles.
• El build de iOS falla tras cambiar el bundle ID — El ID de tu proyecto nativo debe coincidir con el de Apple App Store Connect. Busca y reemplaza en ios/ y android/, haz commit y recompila.
• Pantalla blanca al iniciar — Configura base: './' en la config de Vite, recompila y ejecuta npx cap sync.
• Contenido bajo la barra de estado — Añadir viewport-fit=cover y env(safe-area-inset-top) padding (paso 13).
• APK firmado en modo debug — Google Play rechaza builds de debug. Usa un build de release firmado con tu keystore.
• Despliegue rechazado — la versión ya existe — Aumenta la versión/número de build en los proyectos nativos y vuelve a compilar.

Para problemas con Capgo Builder, consulta solución de problemas de Native Build y Depuración de Live Updates.

Conclusión

Llevaste una app web de Lovable a iOS y Android nativos — construida en la nube sin una Mac, con una función de cámara real y una corrección de layout desplegada over the air. Esa es la parte difícil hecha.

Próximos pasos

• Live Updates de Capgo — Publica correcciones de UI y copy sin esperar la revisión de la store
• Builder de Capgo — Automatiza release builds en CI
• Directorio de plugins de Capgo — Biometría, notificaciones push, geolocalización y más
• Guías relacionadas: Base44 a móvil · Bolt.new a móvil

Regístrate en una cuenta gratuita de Capgo para habilitar Live Updates y builds nativos en la nube.

Recursos

• Documentación de Lovable
• Documentación de Capacitor
• Native Builds de Capgo
• Capgo — Live Updates para apps Capacitor
• Build de iOS desde Windows
• Exportación estática de Next.js para móvil

Preguntas frecuentes

¿Cómo convierto una app de Lovable en una app móvil?

Exporta el proyecto de Lovable a GitHub, compílalo como una app web estática (la mayoría de las apps de Lovable usan React y Vite), añade Capacitor con las plataformas iOS y Android, y luego sincroniza y compila los binarios listos para la tienda. Esta guía explica cada paso y Build de Capgo puede compilar y firmar las apps de iOS y Android en la nube.

¿Puedo convertir un proyecto de Lovable en una app para la App Store y Google Play?

Sí. Capacitor envuelve el build web de Lovable en un shell nativo de iOS y Android, por lo que mantienes una sola base de código y puedes añadir funciones nativas como la cámara. Después del primer lanzamiento en la tienda, actualizaciones Live Update de Capgo te permite publicar cambios web sin esperar a una nueva revisión.

Continúa con: Convierte tu app de Lovable a iOS y Android con Capacitor

Si estás usando Convierte tu app de Lovable a iOS y Android con Capacitor para planificar el trabajo con plugins nativos, conéctalo con Directorio de plugins de Capgo para el flujo de trabajo del producto en Capgo Plugin Directory, Plugins de Capacitor por Capgo para el detalle de implementación en los Plugins de Capacitor por Capgo, Native Builds de Capgo para el flujo de trabajo del producto en Capgo Native Builds, y Build de iOS desde Windows para builds de iOS en la nube sin un Mac.