Base44 to Native Mobile Apps with Capacitor

简介

Base44 是一个使用 AI 的应用程序生成器，可以从提示生成完整的 React 应用程序。您可以快速在浏览器中部署一个工作的产品，但如果您想将其部署到 iOS 和 Android 上呢？本教程将展示如何将您的 Base44 项目导出并将其转换为原生移动应用程序与 Capacitor然后将签名的商店二进制文件 Capgo Builder —— 不需要 Mac 即可部署 iOS。

通过本教程的结束，您的 Base44 应用程序将在 iOS 和 Android 上原生运行，并且可以访问设备功能，如摄像头、存储和推送通知。

前置条件 & 预计时间

所需时间: 首次设置需要 2-4 小时

系统要求:

For iOS cloud builds: Any OS (Windows, Mac, or Linux) with Capgo Builder
For Android cloud builds: Any OS
存储: 10GB free space for dependencies and build artifacts
内存: 8GB minimum

成本:

Base44 导出: Builder plan or higher (for GitHub export and ZIP download)
iOS App Store: $99/year (Apple Developer Account)
Android Play Store: $25 one-time (Google Play Developer)
Cursor Pro: $20/month (optional but recommended)

Required Software:

Node.js 18+
A code editor such as Cursor

为什么将 Base44 应用程序转换为移动应用?

扩大覆盖范围: 在用户期望的原生应用图标处遇见用户，而不是浏览器标签
原生功能:通过Capacitor插件实现相机、GPS、指纹识别和离线存储
App Store发布:在Google Play和Apple App Store上发布
更快的迭代:将Capgo Live Updates与Capgo Builder配对，实现web层修复而无需每次重建原生二进制文件

步骤1：导出您的Base44项目

Base44 lets you export code once you are on the Builder计划或更高。您有两种主要选项。

选项A：导出到GitHub（推荐）

在Base44编辑器中打开您的应用
点击顶部栏中的 GitHub 顶部栏中的
授权 Base44 Builder 并创建或连接一个仓库
Base44 将自动同步您的应用程序 code 到 GitHub (支持计划的双向同步)

查看 Base44 GitHub 集成文档获取详细信息。

选项 B: 下载为 ZIP

点击 Code 在顶部工具栏中打开文件浏览器
点击 导出项目为 ZIP 在顶部工具栏的 code 视图中右上角
在计算机上解压缩压缩包

在光标中打开项目

访问 cursor.sh 并安装光标
从命令面板克隆您的 GitHub 仓库 (或打开解压缩的 ZIP 文件夹)Git: Clone 或 文件 > 打开文件夹

开始光标

为了获得最佳的 AI 助手工作流程，请启用您的首选模型并允许命令在光标设置中执行 —— 与我们描述的相同的设置可爱到移动指南.

步骤 2：设置开发环境

Base44 导出标准的 React 项目。安装依赖项并确认开发服务器正常工作。

使用光标 AI (推荐)

按 Command+K (Mac) 或 Ctrl+K (Windows) 并问：

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

手动设置

cd your-base44-project
npm install
npm run dev

Base44 本地应用程序正在运行

您的 Base44 应用程序应在 http://localhost:5173 (Vite) 或终端中显示的端口上加载。

步骤 3：准备生产构建

Capacitor 需要静态 Web 资产。Base44 React 应用程序通常使用 Vite 并输出到 dist/.

配置 Vite 以适应移动设备

Ask Cursor：

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

或更新 vite.config.ts 手动：

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

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

测试生产构建

npm run build

验证一个 dist/ 文件夹存在并包含 index.html 和捆绑资产。

Base44构建输出

步骤 4: 将Capacitor添加到您的 Base44 项目中

使用 Cursor AI (推荐)

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

手动安装

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

Capacitor 初始化一个 Base44 应用

提交 ios/ 和 android/ 文件夹到 git。Capgo 构建器会编译这些目录中的内容。

步骤 5: 配置Capacitor

更新 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

考虑在 @capgo/capacitor-updater 早期添加，以便在发布后可以 OTA 发布更新。请参见 Capgo Live Updates 文档.

第 6 步：构建和同步

每次您更改 Web 应用程序时：

npm run build
npx cap sync

Capacitor Base44 应用程序的同步完成

第 7 步：使用 Capgo Builder 构建商店准备的二进制文件（推荐）

模拟器测试是可选的。对于 TestFlight、内部测试和商店提交，请使用 Capgo Builder __CAPGO_KEEP_0__ Builder

Capgo

不需要 Mac 即可编译和签名 iOS 原生二进制文件 ——从 Windows 或 Linux 构建
CLI 与您的 AI agent 一样 — 适合 Base44 → GitHub → Cursor 的编码工作流程
Pairs with Live Updates — 修复 UI 并在空气中复制；仅在插件或权限更改时重建本机

设置 Capgo 构建器

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

仅需保存一次签名凭证。参见管理凭证和在 Windows 上构建 iOS.

请求云端构建

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

构建日志在您的终端中流动。配置了 App Store Connect 后，iOS 构建可以自动上传到 TestFlight

上传您的 Web 包以进行 OTA 更新：

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

步骤 8：可选 — 在 Xcode 或 Android Studio 中测试本地

如果您有 Mac 或者想在云构建之前进行模拟器测试:

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

在 Xcode 中打开一个 Base44 Capacitor 项目

使用本地 IDE 进行日常调试。使用 Capgo Builder 当您需要签名的发布二进制文件时

步骤 9: 添加本机功能

增强您的 Base44 应用程序以利用设备功能:

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

要求 Cursor 将共享、摄像头或推送连接到您的 React 组件。添加插件后，运行一个新的 Capgo Builder 在商店提交之前构建

将本机功能添加到 Base44 Capacitor 应用程序

步骤 10: 优化生产

应用图标和启动屏幕

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

Base44后端考虑

导出的Base44应用可能会调用Base44的托管后端和SDK。这通常在Capacitor中有效，前提是:

API调用的使用HTTPS
在WebView内的认证重定向工作（在真实设备上测试登录）
如果您使用魔术链接或OAuth流程，则已配置深度链接

如果您后来迁移到Base44的后端，计划替换 base44.entities.* 并与之相关的SDK调用自己的API—通常，React UI层会保留

常见问题的故障排除

启动时白屏

确认 base: './' 在Vite配置中设置
运行 npm run build 并检查 dist/index.html 载入相对路径的资源
运行 npx cap sync 每次构建 web 后

Capgo Builder 中的构建错误

提交 ios/ 并 android/ 在请求云端构建之前将其推送到 git
运行 npx cap sync 本地以便将 web 资产复制到原生项目
Capacitor 插件的新版本需要进行一次新的原生构建

无法导出Base44

GitHub导出和ZIP下载需要Builder计划或更高 升级到Base44或从__CAPGO_KEEP_0__视图中复制文件. Upgrade in Base44 or copy files manually from the Code view on lower tiers.

您已导出一个Base44 AI生成的React应用程序，使用__CAPGO_KEEP_0将其包装起来，并且有一个明确的路径来通过CAPGO_KEEP_0__ Builder获得签名的iOS和Android二进制文件

Capacitor Live Updates Capgo Builder 下一步

__CAPGO_KEEP_0__ Live Updates

Capgo Live Updates__CAPGO_KEEP_0__ Builder
Capgo Builder: 自动化 CI 中的发布构建
推送通知: 添加 @capacitor/push-notifications : 使用 Capgo Builder
相关指南: 将 Lovable 转换为移动应用 · 将 Bolt.new 转换为移动应用

注册一个免费的 Capgo 帐户以启用实时更新和云原生构建

资源

使用 Capacitor 从 Base44 转换到原生移动应用

如果您正在使用 使用 Capacitor 从 Base44 转换到原生移动应用 来规划原生插件工作，连接它到 Capgo 插件目录 Capgo 插件目录中的产品工作流程 Capacitor 由 Capgo 提供的插件 Capacitor 由 Capgo 提供的插件中的实现细节 Capgo 原生构建为Capgo原生构建中的产品工作流程从Windows构建iOS 在没有Mac的情况下进行云iOS构建