Base44 to Native Mobile Apps with Capacitor

介绍

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

本指南结束时，您的 Base44 应用程序将在 iOS 和 Android 上以原生方式运行，并具有访问设备功能（如相机、存储和推送通知）的权限。

先决条件 & 预计时间

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

系统要求:

对于 iOS 云构建: Any OS (Windows, Mac, 或 Linux) 上的 Capgo Builder
对于 Android 云构建: Any OS
存储: 依赖项和构建工件的 10GB 免费空间
内存: 8GB 最小值

成本:

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

必备软件:

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

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

扩大覆盖范围: 在原生应用程序图标中遇见用户，而不是浏览器标签
原生功能: 通过 Capacitor 插件获得摄像头、GPS、生物识别和离线存储
应用商店分发: 在 Google Play 和 Apple App Store 上发布
更快的迭代: 将 Capgo 实时更新与 Capgo 构建器结合使用，仅在 web 层修复时重新构建原生二进制文件

步骤 1：导出您的 Base44 项目

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

Option A: Export to GitHub (Recommended)

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

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

选项 B: 下载为 ZIP

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

在光标中打开项目

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

启动光标

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

第 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

Step 5: Verify the __CAPGO_KEEP_0__ Installation

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 实时更新文档.

步骤 6：构建和同步

每次您更改 Web 应用：

npm run build
npx cap sync

Capacitor 同步完成为 Base44 应用

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

模拟器测试是可选的。对于 TestFlight、内部测试和商店提交，请使用 Capgo Builder 在云中编译和签名本机二进制文件。

为什么使用 Capgo Builder 来构建 Base44 应用?

不需要 Mac 来编译 iOS — 从 Windows 或 Linux 构建
CLI 与您的 AI agent 一起使用 — 适合 Base44 → GitHub → Cursor 的 vibe-coding 工作流程
与实时更新配对 — 修复 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。

上传您的 OTA 更新的 Web 包：

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 构建器 在商店提交之前进行构建。

添加到 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 内部，Auth 重定向工作（在真实设备上测试登录）
如果您使用魔力链接或 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资源复制到native项目
新Capacitor插件需要进行一次新的native构建

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应用，包装了Capacitor，并且有明确的路径通过Capacitor Builder来获得签名的iOS和Android二进制文件——而不需要维护一个本地Xcode农场。 Capgo Builder —没有维护一个本地Xcode农场。

下一步

Capgo Live Updates:在不等待商店审查的情况下，通过__CAPGO_KEEP_0__ Live Updates来发布UI和copy修复
Capgo Builder:在CI中自动化发布构建
推送通知:添加并重建使用__CAPGO_KEEP_0__ Builder @capacitor/push-notifications and rebuild with Capgo Builder
相关指南: 让移动端变得可爱 · Bolt.new 到移动端

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

资源

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

如果您正在使用 使用Base44构建Capacitor 来规划原生插件工作，连接它与 Capgo插件目录在Capgo插件目录中 Capacitor插件由Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgo原生构建在Capgo原生构建中在Windows上从__CAPGO_KEEP_0__构建iOS 在没有Mac的情况下进行云iOS构建。

使用Capacitor将Base44转换为原生移动应用

介绍

先决条件 &amp; 预计时间