Base44 to Native Mobile Apps with Capacitor

Introducción

Base44 es una herramienta de construcción de aplicaciones de código abierto 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 Capgo CapacitorEntonces, envíe binarios de tienda firmados con Capgo Constructor sin necesidad de Mac para iOS.

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

Requisitos previos & Estimación de tiempo

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

Requisitos del sistema:

• Para las compilaciones de nube de iOS: Any OS (Windows, Mac, or Linux) with Capgo Builder
• : Cualquier sistema operativo (Windows, Mac o Linux) con __CAPGO_KEEP_0__ ConstructorBy the end of this guide, your Base44 app runs natively on iOS and Android with access to device features like camera, storage, and push notifications.
• Almacenamiento: 10 GB de espacio gratuito para dependencias y artefactos de compilación
• Memoria RAM: 8 GB mínimo

Gastos:

• Exportación Base44: Plan del constructor o superior (para la exportación y descarga ZIP de GitHub)
• 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)

Software Requerido:

• Node.js 18+
• Un editor como code 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 plugins de Capacitor
• Distribución en la Tienda de Aplicaciones: Publica en Google Play y la Tienda de Aplicaciones de Apple
• Fase de iteración más rápida: Pair Capgo Actualizaciones en vivo con Capgo Constructor para reparaciones de 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 Constructor o superior. Tiene dos opciones principales.

Opción A: Exportar a GitHub (Recomendado)

1. Abra su aplicación en el editor Base44
2. Haga clic en el GitHub icono en la barra superior
3. Autoricación Constructor de Base44 y crea o conecta un repositorio
4. Base44 sincroniza automáticamente tu aplicación code con GitHub (sincronización bidireccional en planes compatibles)

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 la barra superior para abrir el explorador de archivos
2. Haga clic Exportar proyecto como ZIP en el rincón superior derecho de la vista de code
3. Extraiga el archivo en su computadora

Abra el Proyecto en Cursor

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

Para el mejor flujo de trabajo asistido por IA, habilite su modelo preferido y permita la ejecución de comandos en las configuraciones de Cursor — el mismo conjunto de configuraciones descrito en nuestro guía de amable a móvil.

Paso 2: Configura tu entorno de desarrollo

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

Usando Cursor AI (Recomendado)

Presiona Command+K o Ctrl+K 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

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

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

Capacitor requiere activos web estáticos. Las aplicaciones de React de Base44 suelen utilizar Vite y producen en dist/.

Configura Vite para móviles

Pregúntale a Cursor:

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

O actualiza vite.config.ts manualmente:

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

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

Prueba la compilación de producción

npm run build

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

Paso 4: Agrega Capacitor a tu proyecto 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 el ios/ y android/ carpetas a git. Capgo Constructor compila lo que está en esas carpetas.

Paso 5: Configura 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 antes para que puedas enviar actualizaciones OTA después del lanzamiento. Consulta Capgo Live Updates docs.

Paso 6: Construye y Sincroniza

Con cada cambio en la aplicación web:

npm run build
npx cap sync

Step 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 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 IA — se ajusta a los flujos de trabajo de codificación de vibe de Base44 → GitHub → Cursor
• Compatibiliza con Actualizaciones en Vivo — corrija la interfaz y copie en el aire; reconstruya nativo solo cuando cambien 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 tus credenciales de firma una vez. 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.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

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

Carga 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 quieres pruebas de emulador antes de las construcciones en la nube:

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

Utiliza IDEs locales para depurar de manera diaria. Utiliza Capgo Builder cuando necesites binarios de lanzamiento firmados.

Step 9: Agregar Características Nativas

Mejore su aplicación Base44 con capacidades de dispositivo:

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

Pida a Cursor que conecte Compartir, Cámara o Push en sus componentes de React. Después de agregar plugins, ejecute un nuevo Capgo Constructor de la Aplicación Nota de credenciales de Appflow

Banderín de la Aplicación Nativa V2

Flujo de construcción de la Aplicación Nativa V2

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

construya antes de la presentación en la tienda.

Exported Base44 apps may call Base44’s hosted backend and SDK. That usually works in Capacitor as long as:

• API calls use HTTPS
• Funcionan las redirecciones de autenticación dentro de la WebView (inicia sesión en un dispositivo real)
• Configuradas las enlaces profundos si utilizas flujos de enlace mágico o OAuth

Si más adelante migras a un backend diferente 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 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 carga activos con rutas relativas
• Ejecutar npx cap sync después de cada construcción web

Errores de construcción en Capgo Builder

• Comitar ios/ y android/ antes de solicitar una construcción en la nube
• Ejecutar npx cap sync localmente para que los activos web se copien en los proyectos nativos
• Nuevos plugins Capacitor requieren una construcción nativa fresca

No está disponible la exportación en Base44

La exportación GitHub y la descarga ZIP requieren el plan Builder o superior Upgrade en Base44 o copiar archivos manualmente desde la vista __CAPGO_KEEP_0__ en niveles inferiores. Upgrade in Base44 or copy files manually from the Code view on lower tiers.

Conclusión

Exportaste una aplicación de React generada por Base44, la envolviste con Capacitor, y tienes un claro camino 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: Automatiza la creación de versiones de lanzamiento en CI
• Notificaciones push: Agregar @capacitor/push-notifications y reconstruye con Capgo Builder
• Guías relacionadas: De loable 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
• Documentación de Capacitor
• Compilaciones nativas de Capgo
• Actualizaciones en vivo de Capgo para aplicaciones Capacitor

Sigue adelante desde Base44 a aplicaciones móviles nativas con Capacitor

If you are using Base44 para 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 Compilaciones Nativas, y Compilar iOS desde Windows para realizar compilaciones de iOS en la nube sin un Mac.