Saltar al contenido principal
Tutorial

De Base44 a apps móviles nativas con Capacitor

Aprende a exportar tu proyecto Base44 y transformarlo en apps móviles nativas usando Capacitor y el Builder de Capgo. Una guía completa paso a paso para 2026.

De Base44 a apps móviles nativas con Capacitor

Introducción

Base44 es un constructor de apps con IA que genera aplicaciones completas de React mediante prompts. Puedes lanzar un producto funcional en el navegador rápidamente, pero ¿qué pasa si lo quieres en iOS y Android? En este tutorial, te enseñamos cómo exportar tu proyecto de Base44 y convertirlo en apps móviles nativas con Capacitor, y luego lanza binarios firmados con Capgo Builder — sin necesidad de un Mac para iOS.

Versión corta: la página de Base44 a iOS y Android resume todo el proceso en una pantalla: exportar, Capacitor, cloud builds sin Mac y live updates.

Al terminar esta guía, tu app de Base44 funcionará de forma nativa en iOS y Android con acceso a funciones como cámara, almacenamiento y push notifications.

Requisitos y tiempo estimado

Tiempo requerido: 2-4 horas para la configuración inicial

Requisitos del sistema:

  • Para builds en la nube de iOS: Cualquier SO (Windows, Mac o Linux) con Capgo Builder
  • Para builds en la nube de Android: Cualquier SO
  • Almacenamiento: 10GB de espacio libre para dependencias y artefactos
  • RAM: 8GB mínimo

Costes:

  • Exportación de Base44: Plan Builder o superior (para exportar GitHub y descarga ZIP)
  • App Store de iOS: $99/año (Apple Developer Account)
  • Google Play Store: $25 pago único (Google Play Developer)
  • Cursor Pro: $20/mes (opcional pero recomendado)

Software requerido:

  • Node.js 18+
  • Un editor code como Cursor

¿Por qué convertir tu app Base44 a móvil?

  • Mayor alcance: Llega a usuarios que esperan un icono de app nativa, no una pestaña de navegador
  • Funciones nativas: Cámara, GPS, biometría y almacenamiento offline mediante plugins de Capacitor
  • Distribución en App Store: Publica en Google Play y Apple App Store
  • Iteración más rápida: Combina Capgo Live Updates con Capgo Builder para arreglar la capa web sin reconstruir binarios nativos cada vez

Paso 1: Exporta tu proyecto Base44

Base44 te permite exportar code una vez que estés en el plan Builder o superior. Tienes dos opciones principales.

  1. Abre tu app en el editor de Base44
  2. Haz clic en el GitHub icono en la barra superior
  3. Autorizar Base44 Builder y crea o conecta un repositorio
  4. Base44 sincroniza automáticamente el code de tu app con GitHub (sincronización bidireccional en planes compatibles)

Ver docs de integración de GitHub de Base44 para más detalles.

Opción B: Descargar como ZIP

  1. Haz clic en Code en la barra superior para abrir el explorador de archivos
  2. Haz clic en Exportar proyecto como ZIP en la parte superior derecha de la vista code
  3. Extrae el archivo en tu ordenador

Abrir el proyecto en Cursor

  1. Visita cursor.sh e instala Cursor
  2. Clona tu repo de GitHub (Git: Clone desde la paleta de comandos) o abre la carpeta ZIP extraída con Archivo > Abrir carpeta

Iniciar Cursor

Para el mejor flujo de trabajo con IA, activa tu modelo preferido y permite la ejecución de comandos en los ajustes de Cursor; la misma configuración que describimos en nuestra guía de Lovable a móvil.

Paso 2: Configura tu entorno de desarrollo

Base44 exporta un proyecto React estándar. Instala las dependencias y confirma que el servidor de desarrollo funcione.

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

Install Node.js if needed, install project dependencies, and start the dev server

Configuración manual

cd your-base44-project
npm install
npm run dev

App de Base44 ejecutándose localmente

Tu app de Base44 debería cargar en http://localhost:5173 (Vite) o en el puerto que muestra la terminal.

Paso 3: Preparar el build de producción

Capacitor requiere assets web estáticos. Las apps de Base44 con React suelen usar Vite y exportan a dist/.

Configurar Vite para móvil

Pregunta a Cursor:

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

O actualizar vite.config.ts manualmente:

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

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

Probar el build de producción

npm run build

Verifica un dist/ la carpeta ya existe con index.html y los assets empaquetados.

Output de build de Base44

Paso 4: Añade Capacitor a tu proyecto Base44

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

Instalación manual

npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android

npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android

Inicialización de Capacitor para una app Base44

Haz commit de las ios/ y android/ carpetas a git. Capgo Builder compila el contenido de esos directorios.

Paso 5: Configura Capacitor

Actualización capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Base44 App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
}

export default config

Considera añadirlo @capgo/capacitor-updater temprano para lanzar actualizaciones OTA tras el lanzamiento. Mira Docs de Capgo Live Updates.

Paso 6: Build y Sync

Cada vez que cambies la web app:

npm run build
npx cap sync

Sync de Capacitor completado para una app Base44

Probar en simulador es opcional. Para TestFlight, testing interno y envío a tiendas, usa Capgo Builder para compilar y firmar binarios nativos en la nube.

¿Por qué usar Capgo Builder en apps Base44?

  • Sin necesidad de Mac para iOS — build desde Windows o Linux
  • El mismo CLI que puede ejecutar tu agente de IA — ideal para workflows de vibe-coding de Base44 → GitHub → Cursor
  • Compatible con Live Updates — corrige la UI y el copy OTA; reconstruye el Native Build solo si cambian plugins o permisos

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. Ver Gestión de credenciales y Build iOS desde Windows.

Solicita un cloud build

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

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

Sube tu web bundle para las actualizaciones OTA:

npx @capgo/cli@latest bundle upload --channel production

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

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

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

Xcode abriendo un proyecto Capacitor de Base44

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

Paso 9: Añadir funciones nativas

Mejora tu app de Base44 con capacidades del dispositivo:

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

Pide a Cursor que integre Share, Camera o Push en tus componentes de React. Tras añadir los plugins, ejecuta un nuevo Capgo Builder build antes de enviarlo a la store.

Funciones nativas añadidas a una app Capacitor de Base44

Paso 10: Optimizar para producción

Iconos de app y Splash Screens

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

Consideraciones del backend de Base44

Las apps exportadas de Base44 pueden llamar al backend alojado de Base44 y a SDK. Esto suele funcionar en Capacitor siempre que:

  • las llamadas a API usen HTTPS
  • los redirects de Auth funcionen en el WebView (prueba el login en un dispositivo real)
  • los Deep links estén configurados si usas magic-links u OAuth

Si luego migras fuera del backend de Base44, planea reemplazar base44.entities.* y las llamadas relacionadas a SDK por tu propio API; la capa de UI de React suele mantenerse.

Solución de problemas comunes

Pantalla blanca al iniciar

  • Confirma base: './' está configurado en Vite config
  • Ejecuta npm run build y verifica que dist/index.html cargue assets con rutas relativas
  • Ejecuta npx cap sync después de cada build web

Errores de build en Capgo Builder

  • Haz commit ios/ y android/ a git antes de pedir un cloud build
  • Ejecuta npx cap sync localmente para copiar los assets web a los proyectos nativos
  • Nuevos plugins de Capacitor requieren un Native Build

Exportación no disponible en Base44

La exportación de GitHub y la descarga ZIP requieren el plan Builder o superior. Mejora tu plan en Base44 o copia los archivos manualmente desde la vista de Code en planes inferiores.

Conclusión

Exportaste una app de React generada con Base44 AI, la envolviste con Capacitor y ya tienes un camino claro hacia binarios firmados para iOS y Android mediante Capgo Builder — sin necesidad de mantener un farm local de Xcode.

Próximos pasos

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

Recursos

De Base44 a Native Mobile Apps con Capacitor

Si estás usando De Base44 a apps móviles nativas con Capacitor para planificar el trabajo del plugin nativo, conéctalo con Directorio de plugins de Capgo para el flujo de trabajo de productos en el Capgo Plugin Directory, Plugins de Capacitor por Capgo para los detalles de implementación en Plugins de Capacitor por Capgo, Native Builds de Capgo para el flujo de trabajo de Capgo Native Builds, y Build iOS desde Windows para builds de iOS en la nube sin un Mac.

Live Updates para apps de Capacitor

Si hay un bug en la capa web, publica el fix con Capgo en lugar de esperar días a la aprobación de la app store. Los usuarios reciben la actualización en segundo plano mientras los cambios nativos siguen el proceso de revisión normal.

Lo último de nuestro blog

Capgo te da los mejores insights para crear una app móvil realmente profesional.