Base44 to Native Mobile Apps with Capacitor

Introducción

Base44 es una aplicación creadora impulsada por inteligencia artificial que genera aplicaciones React completas a partir de promps. Puedes enviar un producto funcional en el navegador rápido — pero ¿qué pasa si quieres que esté en iOS y Android? En este tutorial, mostramos cómo exportar tu proyecto Base44 y convertirlo en aplicaciones móviles nativas con Capacitor, luego enviar binarios de tienda firmados con Capgo Builder — no se requiere Mac para iOS.

Por el final de esta guía, tu aplicación Base44 corre de manera nativa en iOS y Android con acceso a características de dispositivo como cámara, almacenamiento y notificaciones push.

Requisitos previos y estimación de tiempo

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

Requisitos del sistema:

• For iOS cloud builds: Cualquier sistema operativo (Windows, Mac o Linux) con Capgo Builder
• For Android cloud builds: Cualquier sistema operativo
• Almacenamiento: 10GB de espacio gratuito para dependencias y artefactos de compilación
• Memoria RAM: 8GB mínimo

Gastos:

• Exportación Base44: Plan del constructor o superior (para GitHub exportación y descarga ZIP)
• Tienda de aplicaciones de iOS : $99/año (Cuenta de Desarrollador de Apple)
• Tienda de Aplicaciones de Android : $25 una vez (Desarrollador de Google Play)
• Cursor Pro : $20/mes (opcional pero recomendado)

Requerido Software:

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

¿Por qué transformar tu aplicación Base44 a móvil?

• Alcance ampliado : Conoce a los usuarios donde esperan un icono de aplicación nativa, no una pestaña de navegador
• Características nativas: Cámara, GPS, biométricas y almacenamiento en caché a través de Capacitor plugins
• Distribución en la Tienda de Aplicaciones: Publicar en Google Play y la Tienda de Aplicaciones de Apple
• Iteración más rápida: Pair Capgo Live Updates con Capgo Builder para arreglos en la capa web sin tener que reconstruir binarios nativos cada vez

Paso 1: Exportar su proyecto Base44

Base44 le permite exportar code una vez que esté en el plan de construcción o superior. Tiene dos opciones principales.

Opción A: Exportar a GitHub (Recomendado)

1. Abra su aplicación en el editor de Base44
2. Haga clic en el GitHub icono en la barra superior
3. Autorizar Base44 Builder y cree o conecte un repositorio
4. Base44 sincroniza automáticamente su aplicación code con GitHub (sincronización bidireccional en planes admitidos)

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

Opción B: Descargar como ZIP

1. Haga clic Code en el encabezado superior para abrir el navegador de archivos
2. Haga clic Exportar proyecto como ZIP en la parte superior derecha de la vista code
3. Extraiga el archivo en su computadora

Abra el Proyecto en Cursor

1. Visite cursor.sh y instale Cursor
2. Clone su repositorio GitHub (Git: Clone o abra la carpeta ZIP extraída desde el panel de comandos) Archivo > Abrir Carpeta

Para el mejor flujo de trabajo asistido por inteligencia artificial, habilite su modelo preferido y permita la ejecución de comandos en los ajustes de Cursor — el mismo conjunto de configuración descrito en nuestro Guía amable a móvil.

Paso 2: Configuración de Entorno de Desarrollo

Base44 exporta un proyecto React estándar. Instale dependencias y confirme que el servidor de desarrollo funciona.

Usando Cursor AI (Recomendado)

Presione Command+K (Mac) o Ctrl+K (Windows) y pregunte:

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

Su aplicación Base44 debería cargar en http://localhost:5173 (Vite) o el puerto mostrado en la terminal.

Paso 3: Preparar la compilación de producción

Capacitor needs static web assets. Base44 React apps typically use Vite and output to dist/.

Configurar Vite para móviles

Pregunte a Cursor:

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

O actualice vite.config.ts manualmente:

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

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

Pruebe la compilación de producción

npm run build

Verifique que un dist/ carpeta exista con index.html y activos empaquetados.

Paso 4: Agregue Capacitor a su proyecto de Base44

Usando Cursor AI (Recomendado)

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

Comite los ios/ y android/ carpetas a git. El compilador de Capgo compila lo que hay en esas carpetas.

Paso 5: Configure Capacitor

Actualizar 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

Considerar agregar @capgo/capacitor-updater actualizaciones tempranas para que pueda enviar actualizaciones OTA después del lanzamiento. Consulte Capgo Actualizaciones en vivo docs.

Paso 6: Construye y sincroniza

Con cada cambio en la aplicación web:

npm run build
npx cap sync

Paso 7: Construye binarios listos para la tienda con Capgo Builder (Recomendado)

La prueba en simulador es opcional. Para TestFlight, pruebas internas y presentación en la tienda, utilice Capgo Builder Para obtener credenciales de Appflow, consulte la documentación de Appflow. Con __CAPGO_KEEP_0__ Builder, puede compilar y firmar binarios nativos en la nube.

¿Por qué Capgo Builder para aplicaciones Base44?

• No se requiere Mac para iOS — construye desde Windows o Linux
• Lo mismo que CLI que puede ejecutar su agente de inteligencia artificial — se ajusta a las workflows de codificación de vibe de Base44 → GitHub → Cursor
• Parece con Actualizaciones en vivo — soluciona UI y copia en el aire; reconstruye nativo solo cuando cambian plugins o permisos

Configura el 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. Consulta 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.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

Los registros de construcción fluyen en tu terminal. Con App Store Connect configurado, las construcciones de iOS pueden subir a TestFlight automáticamente.

Sube tu paquete web para actualizaciones OTA:

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

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

Si tienes un Mac o deseas pruebas de emulación antes de las compilaciones en la nube:

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

Utiliza IDEs locales para depuraciones diarias. Utiliza Capgo Builder cuando necesites binarios de lanzamiento firmados.

Paso 9: Agregar características nativas

Mejora tu aplicación Base44 con capacidades de dispositivo:

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

Pide a Cursor que conecte Compartir, Cámara o Push en tus componentes de React. Después de agregar plugins, ejecuta un nuevo Capgo Builder compilar antes de la presentación en la tienda.

Paso 10: Optimizar para Producción

Íconos de la aplicación y pantallas de bienvenida

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 Base44

Las aplicaciones Base44 exportadas pueden llamar al backend de Base44 hospedado y SDK. Funciona normalmente en Capacitor siempre y cuando:

• API utiliza HTTPS
• Los redireccionamientos de autenticación funcionan dentro del WebView (prueba de inicio de sesión en un dispositivo real)
• Los enlaces profundos están configurados si utiliza flujos de enlace mágico o OAuth

Si más tarde migras del backend de Base44, planifica reemplazar base44.entities.* y llamadas relacionadas SDK con tus propias API — la capa de interfaz de usuario de React suele sobrevivir.

Resolución de problemas de problemas comunes

Pantalla blanca al iniciar

• Confirmar base: './' está configurado en la configuración de Vite
• Ejecutar npm run build y verifica que dist/index.html cargue activos con rutas relativas
• Ejecutar npx cap sync después de cada compilación web

Errores de compilación en Capgo Builder

• Comitar ios/ y android/ contexto: Página/área: sitio web de marketing de Capgo. Rol: etiqueta de IU corta o elemento de navegación. Visto en: página trust.astro. Clave de mensaje `y` (Y).
• antes de solicitar una compilación en la nube npx cap sync Ejecutar
• New Capacitor plugins require a fresh native build

No disponible para exportar en Base44

GitHub export y descarga ZIP requieren el Plan Builder o superiorActualiza en Base44 o copia los archivos manualmente desde la vista Code en niveles inferiores.

Conclusión

Exportaste una aplicación de React generada por Base44, la envolviste con Capacitor y tienes un camino claro hacia binarios firmados de iOS y Android a través de Capgo Builder Sin mantener una granja local de Xcode.

Pasos siguientes

• Capgo Actualizaciones en vivo: Envía correcciones de UI y copia sin esperar la revisión de la tienda
• Capgo Builder: Automate release builds in CI
• Notificaciones Push: Agregar @capacitor/push-notifications y reconstruir con Capgo Builder
• Guías relacionadas: Lovable a móvil · Bolt.new a móvil

Regístrate en una cuenta gratuita de Capgo para habilitar Actualizaciones en vivo y compilaciones nativas en la nube.

Recursos

• Documentación de Base44
• Integración de Base44 con GitHub
• Capacitor Documentación
• Capgo Compilaciones Nativas
• Capgo — Actualizaciones en Vivo para Aplicaciones Capacitor

Continúa desde Base44 a Aplicaciones Móviles Nativas con Capacitor

Si estás utilizando Base44 a Aplicaciones Móviles Nativas con Capacitor para planificar el trabajo de plugins nativos, conecta con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins, Capacitor Plugins por Capgo para los detalles de implementación en Capacitor Plugins por Capgo, Capgo Compilaciones Nativas para el flujo de trabajo del producto en Capgo Construcciones nativas Construir iOS desde Windows para realizar construcciones de iOS en la nube sin un Mac