Base44 to Native Mobile Apps with Capacitor

Base44 프로젝트를 Native 모바일 앱으로 내보내고 __CAPGO_KEEP_0__

소개 Base44 Capacitor__CAPGO_KEEP_0__ Capgo Builder를 사용하여 signed store binaries를 배포합니다. — Mac이 필요하지 않습니다.

이 가이드의 끝에서, Base44 앱은 iOS와 Android에서 네이티브로 실행되며 카메라, 저장소, 푸시 알림과 같은 장치 기능에 접근할 수 있습니다.

사전 요구 사항 및 예상 시간

시간이 걸리는 것2-4 시간이 걸립니다. 첫 번째 설정 시

시스템 요구 사항:

iOS 클라우드 빌드용: Capgo 빌더와 함께 Windows, Mac, 또는 Linux와 같은 어떤 OS도
Android 클라우드 빌드용: 어떤 OS도
저장 공간: 의존성 및 빌드 아티팩트에 10GB의 무료 공간
RAM: 8GB 최소

비용:

Base44 export: Builder plan 이상 (for GitHub export 및 ZIP 다운로드)
iOS App Store: 1년 $99 (Apple Developer 계정)
Android Play Store: 1회 $25 (Google Play Developer)
Cursor Pro: 월 $20 (선택적이지만 권장)

필수 소프트웨어:

Node.js 18+
code 에디터를 사용하는 예시 Cursor

__CAPGO_KEEP_0__을 모바일로 변환하는 이유

더욱 광범위한 접근성: 사용자가 기대하는 네이티브 앱 아이콘을 만날 수 있도록, 브라우저 탭이 아닌
네이티브 기능: 카메라, GPS, 생체 인식, 오프라인 저장을 위한 Capacitor 플러그인
앱 스토어 배포: 구글 플레이 스토어와 애플 앱 스토어에 게시
빠른 반복: Capgo Live Updates와 Capgo Builder를 사용하여 웹层 수정을 위해 매번 네이티브 바이너리를 재빌드하지 않도록

Step 1: __CAPGO_KEEP_0__ 프로젝트를 내보내기

Base44는 Builder plan 이상에서 code을 내보내실 수 있습니다. Base44는 Builder plan 이상에서 프로젝트를 내보내기 위한 두 가지 주요 옵션을 제공합니다.Option A: __CAPGO_KEEP_0__으로 내보내기 (권장)

Option A: Export to GitHub (Recommended)

__CAPGO_KEEP_0__ 아이콘을 상단 메뉴바에서 클릭해주세요.
Base44 Builder를 인증해주세요. GitHub을 생성하거나 연결해주세요. __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
Base44는 앱 code을 GitHub과 자동으로 동기화합니다 (지원되는 계획의 경우 두 방향 동기화)

See Base44 GitHub 통합 문서 자세한 내용은

Option B: ZIP으로 다운로드

상단 메뉴바에서 Code 파일 브라우저를 열기
상단 오른쪽의 __CAPGO_KEEP_0__ 뷰에서 프로젝트를 ZIP으로 내보내기 code
컴퓨터에 압축 파일을 풀기

Cursor 프로젝트 열기

Visit cursor.sh Cursor를 설치하세요
Clone your GitHub repo (Git: Clone 명령 팔레트에서 Clone your __CAPGO_KEEP_0__ repo ( File > Open Folder

Cursor 시작

Cursor 설정에서 선호하는 모델을 활성화하고 명령 실행을 허용하여 최적의 AI-assisted 워크플로를 사용하세요 — Step 2: 개발 환경 설정.

Base44는 표준 React 프로젝트를 내보냅니다. 의존성을 설치하고 개발 서버가 작동하는지 확인하세요.

For the best AI-assisted workflow, enable your preferred model and allow command execution in Cursor settings — the same setup described in our

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) 또는 터미널에 표시된 포트에서.

Step 3: 프로덕션 빌드를 준비하세요.

Capacitor는 정적 웹 자산이 필요합니다. Base44 React 앱은 일반적으로 Vite를 사용하여 dist/.

Vite를 모바일로 구성하세요.

Cursor에게 물어보세요:

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

Or update vite.config.ts 수동으로:

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

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

Test the Production Build

npm run build

Verify a dist/ 폴더가 존재하는지 확인하고 index.html 와 번들된 자산이 있는지 확인합니다.

Base44 build output

Step 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 앱에

Commit the ios/ 및 폴더를 git으로 전송합니다. __CAPGO_KEEP_0__ 빌더는 그 안에 있는 것을 컴파일합니다. android/ 5단계: Capgo을 구성하세요.

Step 5: Configure Capacitor

배포하기 전에 OTA 업데이트를 가능하게 하려면 __CAPGO_KEEP_0__ Live Updates 문서를 참조하세요. 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

6단계: 빌드 및 Sync @capgo/capacitor-updater 웹 앱을 변경할 때마다: Capgo sync 완료 (Base44 앱).

7단계: __CAPGO_KEEP_0__ 빌더를 사용하여 스토어 준비된 바이너리 빌드 (권장)

Simulator 테스트는 선택사항입니다. TestFlight, 내부 테스트 및 스토어 제출을 위해 __CAPGO_KEEP_0__ 빌더를 사용하세요.

npm run build
npx cap sync

Capacitor sync complete for a Base44 app

Step 7: Build Store-Ready Binaries with Capgo Builder (Recommended)

See Capgo Builder cloud에서 네이티브 바이너리를 컴파일하고 서명할 수 있습니다.

Base44 앱에 Capgo Builder를 사용하는 이유는 무엇입니까?

Mac이 필요하지 않습니다. iOS — Windows 또는 Linux에서 빌드할 수 있습니다.
CLI과 동일한 — AI 에이전트가 실행할 수 있습니다. — Base44 → GitHub → Cursor의 vibe-coding 워크플로우와 호환됩니다.
실시간 업데이트와 함께 pairs — 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 업데이트를 위해 웹 번들을 업로드하세요:

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를 사용하세요. signed release binaries를 필요로 할 때는 Capgo 빌더를 사용하세요. 9단계: 네이티브 기능 추가

빌드 로그는 터미널에서 스트리밍됩니다. App Store Connect를 구성했을 때, iOS 빌드는 자동으로 TestFlight에 업로드할 수 있습니다.

기기 기능을 향상하는 Base44 앱:

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

Cursor에게 Share, 카메라, 또는 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 내에서 작동해야 합니다. (실제 장치에서 로그인 테스트)
마법 링크 또는 OAuth 흐름을 사용하는 경우 깊이 링크가 구성되어야 합니다.

__CAPGO_KEEP_0__를 나중에 Base44의 백엔드에서 마이그레이션하는 경우, __CAPGO_KEEP_1__를 대체하는 __CAPGO_KEEP_0__ 호출과 관련된 작업을 계획하세요. — React UI layer는 일반적으로 유지됩니다. base44.entities.* API 호출과 관련된 SDK 호출을 대체하는 API — React UI layer는 일반적으로 유지됩니다.

일반적인 문제 해결

런칭 시 화면이 흰색으로 나타남

확인 base: './' Vite config에서 설정됩니다.
실행 npm run build __CAPGO_KEEP_0__가 상대 경로로 자산을 로드하는지 확인하세요. dist/index.html 실행
웹 빌드 후마다 npx cap sync __CAPGO_KEEP_0__ 빌더에서 __CAPGO_KEEP_0__ 오류가 발생합니다.

Capgo를 대체하는 __CAPGO_KEEP_1__ 호출과 관련된 Capgo 호출을 대체하세요.

Commit ios/ git에 요청하기 전에 클라우드 빌드를 위해 git에 커밋하세요 android/ Run
로컬로 실행하여 웹 자산이 네이티브 프로젝트에 복사됩니다 npx cap sync New __CAPGO_KEEP_0__ 플러그인은 새로운 네이티브 빌드를 필요로 합니다
New Capacitor plugins require a fresh native build

Base44에서 Export가 사용할 수 없습니다

GitHub export 및 ZIP 다운로드는 Builder plan 이상이 필요합니다Base44에서 업그레이드하거나 Code 뷰에서 파일을 수동으로 복사하세요.

Conclusion

Base44에서 AI로 생성된 React 앱을 Capacitor로.wrap하고 iOS 및 Android 바이너리 Signed를 받을 수 있는 명확한 경로를 가지고 있습니다. Capgo Builder Xcode 서버를 유지하지 않고도 사용할 수 있습니다.

Next Steps

Capgo Live Updates: 앱 스토어 검토를 기다리지 않고 UI 및 복사본 수정을 배포할 수 있습니다.
Capgo Builder: CI에서 릴리즈 빌드를 자동화합니다.
Push Notifications: 추가 @capacitor/push-notifications 및 Capgo Builder로 다시 빌드합니다.
Related guides: 모바일로 사랑스러운 것 · 모바일 Bolt.new

Capgo 무료 계정으로 가입하세요 __CAPGO_KEEP_0__ Live Updates 및 클라우드 네이티브 빌드를 활성화합니다.

자원

Capacitor를 사용하여 Base44에서 네이티브 모바일 앱으로 계속 진행하세요

__CAPGO_KEEP_1__ 앱을 사용 중이라면 Base44를 사용하여 Capacitor를 사용하여 네이티브 모바일 앱으로 계속 진행하세요 native 플러그인 작업을 계획하기 위해, 그것을 연결하세요. Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우를 위해 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항을 위해 Capgo 네이티브 빌드 Capgo 네이티브 빌드에서 제품 워크플로우를 위해, 그리고 Windows에서 Mac이 없는 cloud iOS 빌드를 위해 빌드 iOS __CAPGO_KEEP_0__에 의해 작성되었습니다.