Convert Your Lovable App to iOS and Android with Capacitor

Introducción

Lovable es una aplicación de construcción de AI que convierte promesas en aplicaciones de React funcionales en minutos. Puedes enviar en el navegador rápido — pero ¿qué pasa si quieres tu aplicación en la Tienda de la App y Google Play, sentada en pantallas de inicio como cualquier otra aplicación nativa?

Esta guía te guía a través del camino completo: exportar desde Lovable, envolver la aplicación web con Capacitor Capacitor, construye binarios firmados de iOS y Android en la nube con Capgo Constructor (no se requiere Mac), agregar una característica nativa real y enviar una corrección de diseño por aire con Capgo Live Updates.

Usamos Cursor a lo largo de — su IA puede ejecutar la mayoría de los comandos de terminal para usted si prefiere no escribirlos manualmente.

Tiempo requerido: aproximadamente 1–2 horas la primera vez, principalmente configuración de cuenta y espera a los builds en la nube.

Al final, tendrá:

• Una aplicación nativa de iOS y Android construida desde la nube — sin Xcode o Android Studio en el camino principal
• La aplicación ejecutándose en un dispositivo real (TestFlight, instalación directa o Play pruebas internas)
• Una característica de cámara funcional que solo una aplicación nativa puede ofrecer
• Actualizaciones en vivo configuradas para que los arreglos de UI y CSS envíen sin revisión de la tienda

Requisitos previos

Costos (solo para publicar públicamente):

Opcional (solo simulador local):

Puede saltarse ambos. El camino principal en esta guía construye en la nube e instala en dispositivos reales sin ellos.

Nota rápida sobre Lovable y frameworks

Antes de tocar code, conozca que el tipo de aplicación web que genera Lovable afecta el envoltorio móvil.

Durante mucho tiempo, el valor por defecto de Lovable era un Aplicación de página única (SPA) con React + ViteComo de mayo de 2026, las nuevas aplicaciones Lovable pueden utilizar Comience con TanStack con renderizado del lado del servidor (SSR) El SSR es excelente para la web, pero Capacitor envuelve una construcción estática — una carpeta de HTML, CSS y JavaScript con un index.html en su raíz — que se envía dentro de la aplicación en el dispositivo

Una aplicación SSR espera que un servidor renderice páginas en cada solicitud. No hay servidor dentro de un teléfono, por lo que para Capacitor deseas salida estática, renderizada por el cliente.

¿Qué hacer:

• Empezando de nuevo: Pídale a Lovable que le proporcione un aplicación de una sola página (SPA) o para saltarse la SSR para que obtenga una dist/ folder.
• Ya está en TanStack Start (SSR): Configure para pre-renderizar o generar una SPA estática. El único requisito duro es una carpeta de compilación estática que contenga index.html.
• Proyectos de Lovable Legacy Next.js: Use exportación estática --- se envía a out/ en lugar de dist/.

Independientemente del framework que utilice, apunte a Capacitor’s webDir en ese carpeta. Para una SPA de Vite, ese carpeta es dist.

Step 1 — Exporte su aplicación amable a GitHub

La aplicación amable mantiene su code en su editor hasta que se conecte GitHub

1. Abra su proyecto de Lovable en el navegador
2. Haga clic Actualice (abajo-derecha) si es necesario, luego abra Git en el menú izquierdo
3. Elige GitHub, autorice a Lovable y vincule su cuenta
4. Lovable crea un repositorio y empuja tu aplicación automáticamente

✅ Éxito: Visitar github.com/YOUR-USERNAME/your-app muestra tu aplicación's code.

Paso 2 — Configura Cursor y clona tu proyecto

Antes de que podamos trabajar con tu code localmente, necesitarás un code editor. Recomendamos Cursoruna editor de código que puede ejecutar comandos de terminal para usted.

Descargar e Instalar 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 el desarrollo de IA

Para una experiencia óptima, configura Cursor antes de empezar:

1. Comprar un Plan de Cursor — Si bien Cursor ofrece una versión gratuita, un plan Pro ($20/mes) te da completaciones de IA ilimitadas, acceso a Claude y GPT-4, y ejecución de comandos
2. Abre Configuración de Cursor por presionar Command+, (Mac) o Ctrl+, (Windows)

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

4. Seleccionar tu modelo preferido — Elige Claude o GPT-4 para mejores resultados:

5. Permitir ejecución de comandos — Habilita el cursor para ejecutar comandos por ti:

Copia tu repositorio en el cursor

1. En el cursor, presiona Shift+Command+P (Mac) o Shift+Ctrl+P (Windows) para abrir el cuadro de comando
2. Escribe ‘clone’ y selecciona Git: Clonar
3. Pega la URL de tu repositorio GitHub: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Elige una carpeta donde deseas guardar el proyecto

5. El cursor clonará y abrirá tu proyecto

Step 3 — Instale Dependencias y Ejecuta Localmente

Método 1: Utilizando Cursor AI (Recomendado)

1. Presiona para abrir la pestaña de AI de Cursor Command+K (Mac) 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

El AI detectará automáticamente tu sistema operativo, instalará Node.js, ejecutará npm install, y arrancará el servidor de desarrollo con npm run dev.

Método 2: Instalación Manual

Presiona para abrir la terminal en Cursor Shift+Command+T (Mac) Shift+Ctrl+T (Windows), 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. Descargar el 24 LTS instalador desde nodejs.org
2. Ejecutar el instalador
3. Abrir terminal y ejecutar:

cd your-lovable-app
npm install
npm run dev

Las aplicaciones Lovable suelen ejecutarse en http://localhost:8080 o http://localhost:5173 — use whatever address su terminal imprime.

Pulsa Ctrl + C para detener el servidor de desarrollo cuando estés listo para continuar.

✅ Éxito: Your app opens in the browser with its UI working.

Paso 4 — Prepara la compilación de producción estática

Capacitor requiere una compilación de producción antes de agregar plataformas nativas.

React + Vite (las aplicaciones más queridas)

React + Vite (la mayoría de las aplicaciones Lovable)

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

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

Metodo 2: Configuración Manual

Confirmar vite.config.ts usa una base relativa para que los activos se carguen dentro del WebView nativo:

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

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

Construye y verifica:

npm run build

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

Proyectos de Lovable con Next.js Legacy

Si tu repositorio utiliza Next.js, pregunta a Cursor:

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

O sigue Convierte tu aplicación de Next.js en móvil para la versión completa next.config configuración, luego utilice webDir: 'out' en Capacitor en lugar de dist.

✅ Éxito: Una carpeta de compilación estática existe (dist/ o out/) with index.html.

Paso 5 — Agrega Capacitor y Plataformas Nativas

Capacitor envuelve su aplicación web en cascos iOS y Android reales — no es necesario reescribir nada.

Método 1: Utilizando Cursor AI (Recomendado)

Press Command+K (O Mac) Ctrl+K (Windows) y pregunta:

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

La IA preguntará por tu app nombre y ID de paquete (por ejemplo com.yourcompany.myapp).

Método 2: Instalación manual

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

Cuando se te pregunte:

Elige un ID de paquete que realmente poseas. Los IDs de paquete son únicos a nivel global. Utiliza un ID de dominio inverso basado en un dominio que controlas desde el principio — cambiarlo después significa reemplazar en todas las ocasiones. ios/ y android/ y reconstruir.

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: Usando Cursor AI (Recomendado)

Ask 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ídale que utilice 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;

Compilar y sincronizar

Método 1: Usando Cursor AI (Recomendado)

Di a Cursor:

Build the production web app and sync it with Capacitor platforms

Método 2: Comandos Manuales

npm run build
npx cap sync

Su 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 se necesita CocoaPods. Capacitor 8 utiliza el Administrador de Paquetes de Swift para las dependencias de iOS automáticamente.

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

Paso 6 — Verifique Su .gitignore

El Capgo Builder compila desde tu repositorio Git, por lo que ios/ y android/ debe haberse comprometido. Un error común es ignorarlos en la raíz del repositorio.

Confirmar:

• Raíz .gitignore ignorados node_modules y dist (la nube se reconstruye dist durante las compilaciones web)
• ios/ y android/ ellas mismas son no ignorados

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

Paso 7 — Comite y Empuja

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

✅ Éxito: Su repositorio GitHub muestra los ios/ y android/ carpetas.

Paso 8 — Construye Binarios de Tienda Listos con Capgo Builder

No necesita un Mac ni una pipeline local de Xcode/Android Studio para enviar. Capgo Constructor 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 tus credenciales de firma una vez. Si necesitas ayuda para generarlas, utiliza nuestras herramientas gratuitas:

• Generador de Certificado iOS
• Generador de Keystore Android
• Encuentrador de UDID iOS — Registra tu iPhone para construir versiones de desarrollo

Ver Administración de Credenciales y Construye iOS desde Windows.

Solicita una construcción 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 registros de compilación se muestran en tu terminal. Con App Store Connect configurado, los compilados de iOS pueden subir automáticamente a TestFlight.

Instala en un dispositivo real:

• iOS: Prueba en TestFlight (recomendado) o un build de desarrollo con el UDID de tu dispositivo registrado
• Android: Prueba interna de Google Play o una APK/AAB firmada para su lanzamiento.

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

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

Si tienes un Mac o quieres pruebas de emulador antes de builds en la nube:

Para iOS

Método 1: Usando Cursor AI (Recomendado)

Open the iOS project in Xcode

Método 2: Comando manual

npx cap open ios

Configuración de Xcode por primera vez:

1. Seleccione un simulador desde el menú desplegable de dispositivos (por ejemplo, iPhone 15)
2. Para dispositivos reales: habilite Administrar automáticamente la firma y seleccione su equipo de desarrolladores de Apple
3. Haga clic en el botón ▶️ Play — el primer build tarda 5–10 minutos

Para Android

Método 1: Utilizando Cursor AI (Recomendado)

Open the Android project in Android Studio

Método 2: Comando manual

npx cap open android

Primera configuración de Android Studio:

1. Install missing SDK packages if prompted
2. Crear un emulador en el Administrador de dispositivos (por ejemplo, Pixel 6, API 33+)
3. Haga clic en el botón verde ▶️ Run — el primer build tarda entre 5–15 minutos

Use IDE locales para depurar de manera diaria. Use Capgo Constructor cuando necesite binarios de lanzamiento firmados.

✅ Éxito: La aplicación se abre en el simulador o emulador mostrando su contenido Lovable.

Paso 10 — Habilitar Live Reload (Desarrollo)

Mejore la iteración apuntando la caja de comandos nativa a su servidor de desarrollo local.

Metodo 1: Usando Cursor AI (Recomendado)

Diga a Cursor:

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

Metodo 2: Configuración Manual

1. Encuentre su 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 prints.

3. Aplicar cambios:

npx cap copy

✅ Success: Edits a tu web code se recarga automáticamente en el dispositivo o simulador.

Step 11 — Agrega una característica nativa: La cámara

Una Capacitor de plugin permite que JavaScript llame a características de dispositivos reales. Agregaremos el plugin de cámara para que los usuarios puedan tomar una foto — algo que una pestaña de navegador no puede hacer de manera fiable.

Método 1: Utilizando 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 — agrega 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 — agrega dentro de <manifest> dentro 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;
}

Se requiere un plugin Se requiere una compilación nativa a través del Capgo Builder antes de que funcione en dispositivos.

✅ Éxito: Cámara code compila y npx cap sync se completa sin errores.

Paso 12 — Agregar Capgo Actualizaciones en vivo

Cada cambio nativo normalmente pasa por la revisión de la tienda de aplicaciones. Capgo Live Updates actualiza cambios en la capa web de tu aplicación (HTML, CSS, JS, imágenes) en minutos.

Instale el actualizador en tu primera versión Así nunca te quedarás esperando a que se apruebe una revisión cuando necesitas enviar una corrección.

npm install @capgo/capacitor-updater
npx cap sync

Agregar 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;

Iniciar en la entrada de tu aplicación (por ejemplo src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Comite, envía y ejecuta una nueva construcción de Capgo para que el actualizador SDK esté en la caja de herramientas nativa.

Subir paquetes web después del lanzamiento:

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

Ver Capgo Documentación de actualizaciones en vivo.

Para automatizar esta subida cada vez que alguien haga clic en Publicar Sigue las instrucciones para Automatizar Capgo Actualizaciones en vivo desde Lovable con GitHub Acciones.

✅ Éxito: El plugin de actualizador 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, su encabezado puede estar debajo la barra de estado (reloj y batería). Moderno Capacitor se dibuja de borde a borde, por lo que tu aplicación debe respetar insetas de área segura: env(safe-area-inset-top), -bottom, -left, -right.

Muchas aplicaciones Lovable ya manejan el inset inferior pero utilizan un relleno de padding superior fijo (como pt-6) sin el borde superior.

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

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

2. Corrija encabezados superiores — utilice max() mantener el relleno web y crecer en dispositivos con notches:

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

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

In Cursor o Lovable, pregunte:

“The app content runs under the status bar at the top on mobile. Add env(safe-area-inset-top) a la altura de la cabecera de cada página utilizando max(), manteniendo el relleno existente como mínimo.”

3. Envíe la corrección a través de la red: — esto es pura CSS, no se necesita una reconstrucción nativa:

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

Forzar el cierre de la aplicación en su dispositivo, volver a abrirlo, esperar ~15–30 segundos y abrirlo de nuevo. La cabecera debería estar debajo de la barra de estado — corregido sin revisión de la tienda.

✅ Éxito: Elimina el contenido superior después de aplicar el paquete de actualización OTA.

Para trabajos de diseño de layout más profundos, consulte @capgo/tailwind-capacitor y Capacitor pantalla de borde a borde.

Paso 14 — Preparación de su lista de tienda

Su aplicación está construida, instalable y puede enviar actualizaciones instantáneas. Ir al aire en las tiendas públicas es principalmente papeleo:

• App icon — 1024×1024px para iOS (sin transparencia), 512×512px para Google Play
• Screenshots — Apple requiere capturas de pantalla de iPhone 6.9” (1320×2868px)
• App name, subtitle, description, keywords
• URL de la política de privacidad — requerida por ambas tiendas, incluso para aplicaciones gratuitas
• Age rating — cuestionario en cada consola
• Discusiones de recopilación de datos — Etiquetas de privacidad de Apple y seguridad de datos de Google

Método 1: Utilizando 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

¿Qué queda antes de 'en vivo':

1. Pruebas cerradas de Google Play (cuentas personales creadas después del 13 de noviembre de 2023): al menos 12 pruebas consecutivas de 14 días antes del acceso a producción. iOS no tiene equivalente.
2. Enviar para revisión — Apple ~3–5 días, Google ~3–7 días después de cumplirse los requisitos de prueba.

Ver nuestro guía de revisión de aplicaciones para principiantes para obtener la lista de verificación completa.

Errores comunes (y cómo solucionarlos)

• Could not find the web assets directory: ./dist — Correr npm run build antes de npx cap add or npx cap synco webDir in capacitor.config.ts coincide con la salida de su framework (dist en out para Next.js export estático).
• “Este ID de App … no está disponible” — Los IDs de paquete son únicos a nivel global. Elija un ID de dominio inverso que controle.
• La compilación de iOS falla después de cambiar el ID de paquete — El ID en tu proyecto nativo debe coincidir con Apple App Store Connect. Busca y reemplaza en ios/ y android/, commit, reconstruye.
• Pantalla blanca al iniciar — Establece base: './' en la configuración de Vite, reconstruye y ejecuta npx cap sync.
• Contenido debajo de la barra de estado — Agrega viewport-fit=cover y env(safe-area-inset-top) margen (Paso 13).
• APK firmado en modo depuración — Google Play rechaza ediciones de depuración. Utilice una edición de producción firmada con su keystore.
• Rechazo de despliegue — versión ya existe — Incrementa la versión/número de compilación en proyectos nativos y reconstruye.

Para Capgo problemas del constructor, consulte Troubleshooting de compilación nativa y Depuración de actualizaciones en vivo.

Conclusión

Ha llevado su aplicación web amable a iOS y Android nativos — construida en la nube sin Mac, con una característica de cámara real y una corrección de diseño enviada por aire. Eso es lo difícil que se ha hecho.

Pasos siguientes

• Capgo Actualizaciones en vivo — Envíe arreglos de UI y copia sin esperar la revisión de la tienda
• Capgo Constructor — Automatice la compilación de versiones en CI
• Capgo Directorio de plugins — Biométrica, notificaciones push, geolocalización y más
• Guías relacionadas: Base44 a móvil · Bolt.new a móvil

Regístrese en una cuenta gratuita de Capgo Habilitar actualizaciones en vivo y construcciones nativas en la nube.

Recursos

• Documentación Lovable
• Capacitor Documentación
• Capgo Construcción Nativa
• Capgo — Actualizaciones en vivo para Capacitor
• Construir iOS desde Windows
• Exportación estática de Next.js para móvil

Sigue adelante desde Convertir tu aplicación Lovable a iOS y Android con Capacitor

Si estás utilizando Convertir tu aplicación Lovable a iOS y Android con Capacitor para planificar el trabajo de plugin nativo, conecta con Capgo Directorio de Plugin para el flujo de trabajo del producto en Capgo Directorio de Plugin Capacitor Plugins by Capgo para los detalles de implementación en Capacitor Plugins por Capgo Capgo Construcción nativa para el flujo de trabajo del producto en Capgo Construcción nativa, y Construir iOS desde Windows para construir iOS en la nube sin un Mac.