Pendahuluan
Bolt.new merupakan platform pengembangan inovatif bertenaga AI yang dapat menghasilkan aplikasi web full-stack dengan berbagai framework seperti React, Vue, Svelte, dan lainnya. Tapi bagaimana jika Anda ingin membawa kreasi Bolt.new ke perangkat mobile? Dalam tutorial lengkap ini, kami akan menunjukkan cara mengekspor proyek Bolt.new Anda dan mengubahnya menjadi aplikasi mobile native menggunakan Capacitor.
Versi singkat: halaman Bolt ke iOS dan Android merangkum seluruh alur dalam satu layar: export, Capacitor, cloud builds tanpa Mac, dan live updates.
Apa pun framework yang dipakai proyek Bolt.new Anda—React, Vue, atau framework lain yang didukung—panduan ini akan membantu Anda membuat aplikasi native iOS dan Android dengan akses ke fitur perangkat seperti kamera, penyimpanan, dan notifikasi push.
Sebelum Memulai: Persyaratan & Waktu
Estimasi Waktu: 3-5 jam untuk setup lengkap
Persyaratan Sistem:
- Pengembangan iOS: Mac dengan macOS 12.0+ (wajib, tidak ada workaround)
- Pengembangan Android: OS apa pun (Windows/Mac/Linux)
- Ruang Kosong: 20-30GB untuk tools pengembangan
- Memori: Minimal 8GB RAM, disarankan 16GB
Anggaran yang Dibutuhkan:
- Apple Developer: $99/tahun (untuk iOS App Store)
- Google Play: Biaya satu kali $25
- Cursor Pro: $20/bulan (opsional, mempercepat development)
Yang Akan Kami Instal:
- Node.js & npm
- Xcode (khusus Mac, untuk iOS)
- Android Studio (untuk Android)
- Berbagai command-line tools
Mengapa Mengubah App Bolt.new ke Mobile?
- Jangkauan Cross-Platform: Deploy aplikasi buatan AI Anda ke app store mobile
- Akses Perangkat Native: Gunakan kamera, GPS, file system, dan fitur native lainnya
- Performa Lebih Baik: Container native memberikan performa lebih baik dibanding web view
- Kemampuan Offline: Tetap bekerja secara offline dengan solusi native storage
- Notifikasi PushTingkatkan engagement user dengan dukungan native push notification
Mengapa Capacitor Dibanding Expo?
Jika Anda sedang mempertimbangkan opsi mobile development, Capacitor menawarkan keunggulan signifikan dibanding Expo, terutama untuk web-first development:
- Satu Codebase, Tiga Platform: Website React, Next.js, atau Vue.js Anda langsung jadi aplikasi iOS, Android, DAN web tanpa perlu konversi
- Tanpa Perlu Rebuild: Gunakan proyek Bolt.new Anda apa adanya - tidak perlu tulis ulang seperti yang diminta Expo
- Pendekatan Web-First Sejati: Berbeda dengan Expo yang mobile-first dan berat di web, Capacitor memperlakukan web sebagai prioritas utama
- Development Tanpa Hambatan: Tetap gunakan tools dan workflow web development yang biasa Anda pakai
- Bebas Pilih Framework: Berjalan dengan framework web apa pun (React, Vue, Svelte, Next.js, dll.) - tidak terkunci ke React Native seperti Expo
Perbedaan Utamanya:
- Dengan Capacitor: Build website Anda → Tambahkan support mobile (satu codebase)
- Dengan Expo: Build untuk mobile → Coba buat versi web-nya agar bisa jalan (pendekatan berbeda, sering kaku)
Karena proyek Bolt.new Anda sudah berupa aplikasi web, Capacitor memungkinkan Anda memperluasnya ke mobile tanpa mengubah satu baris code pun. Expo akan mengharuskan Anda membangun ulang seluruh proyek untuk framework mereka.
Langkah 1: Siapkan Lingkungan Development Anda
Dapatkan Cursor - Editor Code Berbasis AI untuk Anda
Agar bisa bekerja efisien dengan proyek Bolt.new Anda, kita akan menggunakan Cursor, sebuah editor code cerdas yang mempermudah pengembangan:
- Buka cursor.sh dan unduh installer sesuai OS Anda
- Run through the installation process
- Jalankan Cursor setelah siap

Konfigurasi Cursor untuk Produktivitas Maksimal
Agar bisa memaksimalkan Cursor, Anda perlu melakukan setup awal:
-
Pertimbangkan untuk Upgrade ke Cursor Pro - Versi gratis bisa dipakai, tapi Pro ($20/bulan) membuka akses ke:
- Bantuan AI tanpa batas
- Model premium (GPT-4, Claude)
- Respons instan
- Dukungan premium
-
Buka Settings dengan
Command+,(Mac) atauCtrl+,(Windows)

- Aktifkan Fitur AI - Pastikan bantuan AI sudah aktif:

- Pilih Model AI Anda - Kami merekomendasikan Claude atau GPT-4:

- Aktifkan Eksekusi Command - Biarkan Cursor menjalankan command secara otomatis:

Langkah 2: Ekspor Proyek Bolt.new Anda
Sekarang mari kita bawa proyek Bolt.new Anda ke Cursor.
Download Proyek Anda
- Buka proyek Bolt.new Anda di browser
- Temukan Download atau Ekspor tombol di antarmuka Bolt

- Download file ZIP berisi proyek Anda
- Ekstrak ke folder di komputer Anda

Buka di Cursor
Setelah diekstrak, buka proyek di Cursor:
- Gunakan
File > Open Folderdi Cursor - Pilih folder proyek Bolt.new yang sudah diekstrak
- Cursor akan memuat proyek Anda

Alternatif: Clone dari GitHub
Jika Anda sudah menghubungkan Bolt.new ke GitHub:
- Tekan
Shift+Command+P(Mac) atauShift+Ctrl+P(Windows) - Cari “Git: Clone”
- Masukkan URL repositori Anda
- Pilih lokasi penyimpanan

Langkah 2: Identifikasi Framework Proyek Anda
Bolt.new bisa membuat proyek dengan berbagai framework. Mari identifikasi yang Anda gunakan:
Cek package.json
Buka package.json untuk melihat framework yang dipakai proyek Anda:

Tipe proyek Bolt.new yang umum:
- React + Vite: Setup paling umum
- Vue + Vite: Aplikasi Vue.js
- Svelte: Aplikasi Svelte
- Next.js: Aplikasi React full-stack
- Vanilla JS: Aplikasi JavaScript murni
Langkah 3: Instal Tool Development
Opsi A: Biarkan Cursor AI Menangani Semuanya
- Tekan
Command+K(Mac) atauCtrl+K(Windows) di Cursor - Ketik request ini:
Install all necessary development tools including Node.js, then install project dependencies and start the dev server
Cursor AI akan otomatis:
- Instal Node.js dan npm jika perlu
- Siapkan Homebrew di macOS
- Instal semua dependensi proyek
- Jalankan development server Anda

Opsi B: Proses Instalasi Manual
Jika Anda lebih suka kontrol manual atau pendekatan AI mengalami kendala:
Pertama, buka terminal Cursor dengan Shift+Command+T (Mac) atau Shift+Ctrl+T (Windows)
Untuk pengguna macOS:
# Get Homebrew package manager
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Install Node.js via Homebrew
brew install node
# Move to your project folder
cd your-bolt-project
# Install project packages
npm install
# Launch development server
npm run dev
Untuk pengguna Windows:
- Download installer Node.js dari nodejs.org
- Selesaikan wizard instalasi
- Di terminal Cursor:
cd your-bolt-project
npm install
npm run dev

Aplikasi Bolt.new Anda sekarang seharusnya sudah berjalan (biasanya di http://localhost:5173 untuk proyek Vite).
Langkah 4: Konfigurasi Build untuk Mobile
Konfigurasi Anda akan berbeda tergantung framework proyek Anda.
Opsi A: Konfigurasi Otomatis dengan Cursor AI
Minta Cursor AI untuk menangani konfigurasi:
Configure my Bolt.new project for mobile deployment with proper build settings
Cursor akan mendeteksi framework Anda dan menerapkan konfigurasi yang tepat.
Opsi B: Konfigurasi Manual per Framework
Untuk Proyek React + Vite:
Edit vite.config.js:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: './',
build: {
outDir: 'dist',
assetsDir: 'assets',
rollupOptions: {
output: {
manualChunks: undefined,
},
},
},
})
Untuk Proyek Vue + Vite:
Modifikasi vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
base: './',
build: {
outDir: 'dist',
assetsDir: 'assets',
},
})
Untuk Proyek Next.js
Tambahkan ke package.json scripts:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"static": "next build && next export"
}
}
Update next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
trailingSlash: true,
images: {
unoptimized: true,
},
}
module.exports = nextConfig
Langkah 5: Build Proyek Anda
Saatnya membuat production build untuk aplikasi Bolt.new Anda.
Opsi A: Build dengan Cursor AI
Cukup tanya Cursor:
Build my Bolt.new project for production deployment
Cursor akan menjalankan perintah build yang sesuai dengan framework Anda.
Opsi B: Build Manual
Untuk proyek berbasis Vite (React/Vue/Svelte):
npm run build

Untuk Aplikasi Next.js:
npm run static
Konfirmasi Build Berhasil
Pastikan build Anda menghasilkan output yang benar:
- Proyek Vite: Cari sebuah
distdirektori - Proyek Next.js: Periksa apakah ada
outdirektori

Langkah 6: Tambahkan Capacitor ke Proyek Bolt.new Anda
Mari ubah aplikasi web Anda menjadi aplikasi mobile native.
Opsi A: Setup Cepat dengan Cursor AI
Tekan Command+K (Mac) atau Ctrl+K (Windows) dan minta:
Add Capacitor to my project and set up iOS and Android platforms
Cursor AI akan menangani seluruh proses setup.
Opsi B: Setup Manual Langkah demi Langkah
Instal command-line tools Capacitor:
npm install -D @capacitor/cli
Inisialisasi proyek Capacitor Anda:
npx cap init

Anda akan diminta untuk:
- Nama aplikasi: Nama proyek Bolt.new Anda
- Bundle ID: Format seperti
com.yourcompany.yourapp
Lanjutkan dengan setup manual - instal paket esensial:
npm install @capacitor/core @capacitor/ios @capacitor/android
Tambahkan dukungan platform mobile:
npx cap add ios
npx cap add android

Apa yang Baru Terjadi?
Struktur proyek Bolt.new Anda sekarang menjadi:
your-bolt-project/
├── src/ # Your app source (React/Vue/etc)
├── public/ # Static files
├── dist/ # Build output (Vite)
├── out/ # Build output (Next.js)
├── ios/ # iOS Xcode project (NEW!)
├── android/ # Android Studio project (NEW!)
├── capacitor.config.ts # Mobile configuration
└── package.json # Dependencies
Catatan Penting:
- Web code Anda tetap berada di
src/- edit di sana ios/danandroid/dihasilkan - jangan diedit- Setelah perubahan, selalu jalankan
npx cap sync - Setiap platform punya proses build sendiri
Langkah 7: Konfigurasi Capacitor
Saatnya konfigurasi Capacitor untuk framework Anda.
Opsi A: Konfigurasi Otomatis dengan Cursor
Minta bantuan Cursor:
Configure capacitor.config.ts for my Bolt.new project build output
Opsi B: Konfigurasi Manual
Untuk aplikasi berbasis Vite:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.yourcompany.yourapp',
appName: 'Your Bolt App',
webDir: 'dist',
bundledWebRuntime: false,
server: {
androidScheme: 'https'
}
};
export default config;
Untuk Aplikasi Next.js:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.yourcompany.yourapp',
appName: 'Your Bolt App',
webDir: 'out',
bundledWebRuntime: false,
server: {
androidScheme: 'https'
}
};
export default config;
Langkah 8: Build dan Sync
Siapkan aplikasi Anda untuk deployment mobile.
Opsi A: Menggunakan Cursor AI
Beri tahu Cursor:
Build my project and sync it with Capacitor for mobile deployment
Opsi B: Proses Manual
Jalankan perintah berikut secara berurutan:
npm run build
npx cap sync

Langkah 9: Build Binary Siap Store dengan Capgo Builder (Direkomendasikan)
Anda tidak butuh Mac atau pipeline Xcode/Android Studio lokal yang lengkap untuk rilis ke App Store dan Google Play. Capgo Builder meng-compile, signing, dan bisa submit build iOS dan Android dari cloud — jalur tercepat untuk aplikasi vibe-coded yang di-export dari Bolt.new.
Mengapa Capgo Builder?
- Tidak butuh Mac untuk iOS — build dari Windows, Linux, atau environment AI coding Anda
- Satu workflow CLI — mudah di-script dan di-hand off ke Cursor, Claude Code, atau Codex
- Terintegrasi dengan Live Updates — kirim perbaikan JS/UI secara OTA; rebuild binary native hanya saat ada perubahan plugin atau permission
Setup Capgo Builder
Setelah production build dan sinkronisasi Capacitor Anda berjalan lancar di lokal:
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
Simpan kredensial signing sekali saja (sertifikat Apple, provisioning profiles, Android keystore). Lihat Kelola Kredensial dan Build iOS dari Windows.
Ajukan cloud build
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
Capgo Builder men-stream build logs langsung ke terminal Anda. Dengan App Store Connect yang sudah dikonfigurasi, build iOS bisa langsung masuk ke TestFlight.
Upload web bundle Anda untuk update OTA:
npx @capgo/cli@latest bundle upload --channel production
Langkah 10: Buka Native IDE (Opsional untuk Testing Lokal)
Jika Anda punya Mac atau ingin menguji lewat emulator sebelum cloud build, buka proyek native secara lokal:
Akses environment pengembangan native untuk aplikasi Anda.
Pengembangan iOS
Opsi A: Lewat Cursor AI
Open my iOS project in Xcode
Opsi B: Perintah Terminal
npx cap open ios

Pengembangan Android
Opsi A: Lewat Cursor AI
Open my Android project in Android Studio
Opsi B: Perintah Terminal
npx cap open android

Langkah 11: Build dan Run Lokal (Opsional)
Menjalankan di iOS
Setup Xcode (Pertama Kali)
-
Pilih Target Anda:
- Di sebelah tombol Play, klik pemilih perangkat
- Untuk testing: Pilih simulator iPhone apa saja
- Untuk perangkat fisik: Hubungkan iPhone via USB
-
Konfigurasi Signing Code:
- Klik nama proyek Anda di sidebar kiri
- Buka tab “Signing & Capabilities”
- Aktifkan “Automatically manage signing”
- Login dengan Apple ID Anda
- Catatan: Perangkat asli butuh Apple Developer Program ($99/tahun)
-
Build Aplikasi Anda:
- Klik tombol ▶️ Play
- Build pertama: 5-10 menit (mohon bersabar!)
- Pantau progress bar di bagian atas
Troubleshooting iOS:
- “Akun tidak ditemukan”: Tambahkan Apple ID di Xcode > Settings > Accounts
- “Gagal build”: Clean build folder (Shift+Command+K) lalu coba lagi
- Masalah Simulator: Restart simulator lewat Device > Restart

Berjalan di Android
Setup Android Studio (Pertama Kali)
-
Setup SDK (otomatis):
- Android Studio akan mendeteksi komponen yang hilang
- Klik “Install missing SDK” saat muncul prompt
- Ini mengunduh sekitar 2-3GB file
-
Buat Virtual Device:
- Buka AVD Manager (ikon ponsel di toolbar)
- Klik “+ Create Virtual Device”
- Pilih “Pixel 6” (default yang bagus)
- Unduh system image saat muncul prompt
- Selesaikan setup dengan opsi default
-
Jalankan Aplikasi Anda:
- Pilih emulator Anda dari dropdown
- Klik tombol hijau ▶️ Run
- Build pertama: 10-15 menit
- Emulator berjalan otomatis
Troubleshooting Android:
- “Gradle sync failed”: Coba File > Invalidate Caches
- Emulator lambat: Aktifkan hardware acceleration di pengaturan AVD
- Error saat build: Update Gradle lewat saran perbaikan

Checklist verifikasi
Setelah build berhasil, verifikasi:
✅ Aplikasi terbuka tanpa crash ✅ Konten Bolt.new tampil dengan benar ✅ Tombol dan interaksi berfungsi ✅ Console tidak menampilkan error merah
Masih ada kendala? Pesan error biasanya memberi tahu persis apa yang salah - baca dengan teliti!
Langkah 12: Aktifkan Live Reload (Pengembangan)
Percepat workflow development Anda dengan hot reloading.
Opsi A: Setup Otomatis dengan Cursor
Tanya Cursor:
Enable live reload for my Capacitor app development
Cursor akan mengonfigurasi semuanya secara otomatis.
Opsi B: Konfigurasi Manual
- Dapatkan alamat IP lokal Anda:
# macOS
ipconfig getifaddr en0
# Windows
ipconfig
- Perbarui file
capacitor.config.ts:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.yourcompany.yourapp',
appName: 'Your Bolt App',
webDir: 'dist', // or 'out' for Next.js
bundledWebRuntime: false,
server: {
url: 'http://YOUR_IP_ADDRESS:5173', // or 3000 for Next.js
cleartext: true,
},
};
export default config;
- Terapkan konfigurasi:
npx cap copy

Langkah 13: Tambahkan Fitur Native
Tingkatkan aplikasi Bolt.new Anda dengan kemampuan khusus perangkat.
Opsi A: Integrasi Berbasis AI
Minta dari Cursor:
Add native share, camera, and geolocation features to my Bolt.new app
Cursor akan menginstal plugin dan membuat integrasi code.
Opsi B: Instalasi Plugin Manual
Instal plugin native populer:
npm i @capacitor/share @capacitor/camera @capacitor/geolocation
Buat file utilitas untuk proyek React:
// utils/capacitor.js
import { Share } from '@capacitor/share';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';
export const shareContent = async (title, text, url) => {
await Share.share({
title,
text,
url,
dialogTitle: 'Share with friends',
});
};
export const takePicture = async () => {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri
});
return image;
};
export const getCurrentPosition = async () => {
const coordinates = await Geolocation.getCurrentPosition();
return coordinates;
};
Gunakan di Komponen Anda
// For React components
import React from 'react';
import { shareContent, takePicture } from '../utils/capacitor';
function MyComponent() {
const handleShare = () => {
shareContent('My Bolt App', 'Check out this amazing app!', 'https://your-app.com');
};
const handleCamera = async () => {
try {
const photo = await takePicture();
console.log('Photo taken:', photo);
} catch (error) {
console.error('Camera error:', error);
}
};
return (
<div>
<button onClick={handleShare}>Share App</button>
<button onClick={handleCamera}>Take Photo</button>
</div>
);
}
export default MyComponent;
Sinkronkan Perubahan
Dengan Cursor AI:
Sync my native feature changes to all platforms
Perintah manual:
npx cap sync

Langkah 14: Optimalkan untuk Produksi
App Icon dan Splash Screen
Opsi A: Setup Cursor AI
Permintaan:
Create app icons and splash screens for my mobile app
Opsi B: Buat Asset Manual
- Dapatkan tool asset:
npm install -D @capacitor/assets
-
Siapkan grafis Anda:
- Buat
assets/icon.png(1024x1024px) - Buat
assets/splash.png(2732x2732px)
- Buat
-
Generate semua ukuran secara otomatis:
npx capacitor-assets generate

Optimalkan Build
Untuk proyek Vite, optimalkan build Anda:
// vite.config.js
export default defineConfig({
plugins: [react()], // or vue()
base: './',
build: {
outDir: 'dist',
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'], // adjust for your framework
},
},
},
},
})
Build Final
Opsi A: Build dengan Cursor AI
Create the final production build and prepare for app store deployment
Opsi B: Proses Build Manual
npm run build
npx cap sync
npx cap copy
Cara Mengatasi Masalah Umum
Masalah Spesifik Framework
Proyek React/Vite
- Pastikan
base: './'diatur di konfigurasi Vite - Pastikan semua import menggunakan relative path
- Verifikasi bahwa
distfolder di-generate dengan benar
Proyek Vue
- Pastikan Vue Router menggunakan hash mode untuk mobile
- Cek apakah referensi asset sudah benar
- Verifikasi lazy loading komponen berjalan di mobile
Proyek Next.js
- Pastikan konfigurasi static export sudah benar
- Cek apakah dynamic import berfungsi di static context
- Pastikan route API tidak digunakan (atau sudah ditangani)
Error build
Jika Anda menemui error build:
- Hapus node_modules dan instal ulang:
rm -rf node_modules package-lock.json
npm install
- Cek dependensi proyek Bolt.new untuk kompatibilitas mobile
- Pastikan semua relative path sudah benar untuk deployment mobile
Asset Tidak Ditemukan
Untuk masalah loading asset:
- Verifikasi semua asset ada di folder public
- Gunakan relative path untuk gambar dan file
- Pastikan proses build menyalin semua asset yang diperlukan
Kesimpulan
Selamat! Anda berhasil mengubah proyek Bolt.new menjadi aplikasi mobile native. Web app buatan AI Anda kini bisa:
- Berjalan secara native di perangkat iOS dan Android
- Akses fitur perangkat seperti kamera, GPS, dan penyimpanan
- Didistribusikan melalui app store
- Berikan pengalaman pengguna mobile yang optimal
Langkah Berikutnya
- Capgo Builder: Gunakan native build di cloud untuk rilis TestFlight dan Play Store
- Live Update: Implementasikan Capgo untuk update over-the-air instan
- Analitik: Tambahkan mobile analytics untuk melacak perilaku pengguna
- Performa: Pantau dan optimalkan performa mobile aplikasi Anda
- Pengujian: Tes aplikasi Anda di berbagai perangkat dan ukuran layar
Hasil kreasi Bolt.new Anda kini siap untuk ekosistem mobile!
Sumber Daya
- Platform Bolt.new
- Dokumentasi Capacitor
- Panduan Deployment Vite ke Mobile
- Capgo Builder — Build Cloud Native
- Capgo - Live Updates untuk Aplikasi Capacitor
- Base44 ke mobile
Pelajari bagaimana Capgo dapat membantu Anda mengirim update instan ke aplikasi mobile Anda, daftar akun gratis sekarang hari ini.
Lanjutkan dari Ubah proyek Bolt.new Anda menjadi aplikasi mobile native dengan Capacitor
Jika Anda menggunakan Ubah Proyek Bolt.new Anda Menjadi Aplikasi Mobile Native dengan Capacitor untuk merencanakan pekerjaan plugin native, hubungkan dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi pada Capacitor Plugins oleh Capgo Menambahkan atau Memperbarui Plugin untuk detail implementasi pada Menambahkan atau Memperbarui Plugin, Alternatif Plugin Ionic Enterprise untuk alur kerja produk di alternatif plugin Ionic Enterprise, dan Capgo Native Build untuk alur kerja produk di Capgo Native Builds.