Base44 to Native Mobile Apps with Capacitor

介绍

Base44 是一款使用AI生成全栈React应用的应用构建器。您可以快速在浏览器中部署一个工作的产品，但如果您想将其部署到iOS和Android设备上呢？本教程将展示如何将Base44项目导出并使用Capacitor和Capgo Builder将其转换为原生移动应用。 Capacitor然后将已签名的商店二进制文件 Capgo Builder Capgo

Capgo

CapgoCapgo

Capgo:

Capgo: Any OS (Windows, Mac, or Linux) with Capgo Builder
CapgoCapgo
存储: 10GB的免费空间用于依赖项和构建文件
内存: 8GB最低

成本:

Base44导出: Builder计划或更高（用于GitHub导出和ZIP下载）
iOS App Store: $99/年（Apple Developer账户）
Android Play Store: $25一次性（Google Play Developer）
Cursor Pro: $20/月（可选但推荐）

所需软件:

Node.js 18+
一个 code 编辑器，如 Cursor

将 Base44 应用程序转换为移动应用的原因

扩大覆盖范围: 在用户期望的原生应用图标处遇见用户，而不是浏览器标签
原生功能: 通过 Capacitor 插件获得摄像头、GPS、生物识别和离线存储
context: HTML 文本片段来自更长的 Capgo UI 字符串（父级关键 `capwesome_diff_plugins_capgo`）。页面/区域：Capawesome 比较页面。角色：长期营销或法律段落。见：页面 capwesome.astro。保留 Capgo 产品/品牌和开发者术语完全不变。消息关键 `capwesome_diff_plugins_capgo`（Capwesome Diff Plugins Capgo）。应用商店发布
Faster iteration: Pair Capgo Live Updates with Capgo Builder for web-layer fixes without rebuilding native binaries every time

步骤 1：导出您的 Base44 项目

Base44 允许您在 Builder 计划或更高计划下导出 code。 您有两种主要选项。选项 A：导出到 __CAPGO_KEEP_0__ (推荐)

Option A: Export to GitHub (Recommended)

点击顶部栏中的
__CAPGO_KEEP_0__ GitHub 授权
__CAPGO_KEEP_1__ Base44 Builder 并创建或连接一个仓库
Base44 将您的应用程序 code 自动同步到 GitHub（支持计划的双向同步）

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

选项 B: 下载为 ZIP

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

在Cursor中打开项目

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

启动Cursor

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

步骤 2: 设置开发环境

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

使用 Cursor 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: 将 __CAPGO_KEEP_0__ 添加到您的 Base44 项目中

Step 4: Add Capacitor to Your Base44 Project

手动安装

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

步骤 5: 测试生产构建

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 Builder 将这些目录中的内容编译

步骤 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
__CAPGO_KEEP_0__ Builder 与实时更新配对 —— 修复 UI 和复制，仅在插件或权限更改时重建原生

设置 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

只需保存一次签名凭证。参见管理凭证和在 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 将 Share、Camera 或 Push 注入您的 React 组件。添加插件后，请运行一个新的 Capgo Builder 在商店提交之前构建

Native features added to a Base44 Capacitor app

步骤 10: 优化生产

应用程序图标和启动屏幕

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

Base44 后端考虑

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

API calls use HTTPS
在 WebView 内 Auth 重定向工作（在真实设备上测试登录）
如果您使用 magic-link 或 OAuth 流程，则已配置深度链接

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

常见问题排查

启动时白屏

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

在Capgo Builder中出现的构建错误

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

Base44中没有可用的导出

GitHub导出和ZIP下载需要Builder计划或更高 在Base44中升级或从__CAPGO_KEEP_0__视图中手动复制文件以在较低的等级中使用在Base44中升级或复制Code视图中的文件以在较低的等级中使用

结论

您已导出一个 Base44 AI 生成的 React 应用程序，包装了它并且有一个明确的路径来通过 Capacitor Builder 获得签名的 iOS 和 Android 二进制文件 Capgo Builder __CAPGO_KEEP_0__ Live Updates

: 将 UI 和副本修复直接部署到商店

Capgo Live Updates: 推送通知
Capgo Builder并使用 __CAPGO_KEEP_0__ Builder 重建
下一步— 不需要维护一个本地 Xcode 农场 @capacitor/push-notifications Capgo Live Updates
相关指南: 将Base44应用转换为移动应用 · 使用Bolt.new转换为移动应用

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

资源

从Base44到原生移动应用继续前进，使用Capacitor

If you are using Base44 to Native Mobile Apps with Capacitor Base44 Capgo Plugin Directory Capgo Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgo Native Builds Capgo 产品工作流程在