Cara Men-deploy Proyek Bolt.new Anda ke Web dengan Zeabur

Panduan ini adalah cara termudah untuk mengubah kode yang dihasilkan oleh Bolt.new menjadi situs web nyata yang online dan dapat Anda bagikan kepada teman atau pelanggan.

Ikhtisar

Bolt.new sangat bagus untuk membuat desain dan fitur aplikasi Anda, tetapi untuk menayangkannya secara online, Anda memerlukan “hosting”. Kami sangat merekomendasikan Zeabur karena Zeabur menangani pekerjaan teknis yang berat untuk Anda. Zeabur mengambil kode Anda dan menayangkannya di URL publik hanya dengan beberapa klik.

Alur Kerja:

• Buat: Hasilkan aplikasi Anda di Bolt.new.
• Sempurnakan: Simpan kode ke komputer Anda dan periksa dengan Cursor.
• Deploy: Tayangkan secara online di Zeabur.

📝 Catatan Penting: Panduan ini berfokus untuk membuat situs web Anda online (bagian Frontend). Jika aplikasi Anda perlu menyimpan data pengguna atau login, Anda memerlukan Database. Kami akan membahas cara menambahkan database dalam tutorial lanjutan yang terpisah!

Prasyarat

• Akun GitHub.
• Cursor terinstal di komputer Anda.
• Akun Zeabur.
• Node.js terinstal secara lokal (disarankan versi 18+).

Ikhtisar Migrasi

Rencana ini memindahkan Anda dari lingkungan “no-code” ke lingkungan “pro-code” sambil tetap mempertahankan bantuan AI yang Anda sukai.

• Sumber: Bolt.new (React + Vite + Tailwind).
• Editor: Cursor / Windsurf / Antigravity
• Host: Zeabur

Langkah 1: Ekspor Kode dari Bolt.new ke GitHub

Sebelum dapat melakukan deploy, Anda harus memindahkan kode dari sandbox Bolt ke sistem version control.

1. Buka Panel Deployment: di dalam proyek Bolt.new Anda, cari tombol Deploy atau Publish di header kanan atas, lalu klik tombol GitHub.

   

2. Hubungkan ke GitHub:

   • Pilih “Connect to GitHub”.
   • Otorisasi Bolt untuk mengakses akun GitHub Anda jika diminta.

   

3. Buat Repositori:

   • Di dalam modal, masukkan nama repositori (misalnya my-bolt-app).
   • Pilih visibilitas (Public atau Private).
   • Klik Create repository.

   

4. Verifikasi: Tunggu pesan konfirmasi. Kunjungi profil GitHub Anda untuk memastikan repositori telah dibuat dan berisi kode.

Langkah 2: Siapkan Lingkungan Lokal (Cursor)

Setelah kode berada di GitHub, Anda akan menyiapkannya secara lokal untuk memverifikasi dependensi dan melakukan penyesuaian untuk production.

1. Clone Repositori: Buka Cursor, buka Command Palette (Cmd+Shift+P atau Ctrl+Shift+P), lalu ketik > Git: Clone. Tempelkan URL repositori baru Anda.

   Alternatifnya, melalui terminal:

   git clone <https://github.com/your-username/your-repo-name.git>
   cd your-repo-name
    

2. Instal Dependensi: Proyek Bolt biasanya mendeteksi package manager secara otomatis. Periksa keberadaan lock file (pnpm-lock.yaml, package-lock.json, atau yarn.lock).

   # Jika menggunakan npm
   npm install
    
   # Jika menggunakan pnpm (umum di Bolt)
   pnpm install
    

3. Pengaturan Environment:

   • Temukan file .env.example (jika ada) dan duplikat file tersebut untuk membuat file .env.
   • Penting: Jika aplikasi Bolt Anda menggunakan API key (OpenAI, Supabase, dll.), Anda harus menambahkan key tersebut secara manual ke file .env lokal Anda. Bolt tidak mengekspor secret Anda ke GitHub demi alasan keamanan.

4. Uji Lokal: Jalankan development server untuk memastikan aplikasi berfungsi di luar sandbox Bolt.

   npm run dev

Langkah 3: Buka di Editor Lokal dan Instal Ekstensi Zeabur

Ekstrak file dan buka folder proyek di editor kode lokal seperti VS Code atau Cursor. Agar proses deploy menjadi sangat mudah, Anda akan menggunakan ekstensi Zeabur.

1. Buka Extensions Marketplace di editor Anda.
2. Cari “Zeabur” lalu klik Install.

Langkah 4: Deploy dengan Satu Klik

Sekarang saatnya keajaiban terjadi. Dengan ekstensi yang sudah terinstal, men-deploy proyek Anda hanya butuh beberapa klik.

1. Klik ikon Zeabur yang baru di activity bar sebelah kiri.
2. Klik tombol “Deploy”.

Editor Anda kemudian akan meminta izin untuk membuka tautan di browser. Klik “Open”.

Langkah 5: Biarkan AI Agent Zeabur Menangani Sisanya

Setelah Anda dialihkan ke Zeabur, AI agent platform akan mengambil alih. Agent ini menganalisis kode Anda untuk memahami struktur proyek, dependensi, dan kebutuhan build.

Agent Zeabur akan:

• Mengenali bahwa Anda memiliki aplikasi full-stack (misalnya frontend React dan backend Express).
• Mengonfigurasi build command dan start command secara otomatis.
• Menyediakan semua layanan yang diperlukan.

Anda akan diminta memilih proyek dan region deployment. Setelah itu, Zeabur akan menangani semuanya.

Anda dapat melihat secara real-time saat layanan Anda di-build hingga beroperasi sepenuhnya. Zeabur bahkan langsung memberikan domain yang aktif begitu deployment berhasil.

Langkah 6: Domain & Jaringan

1. Klik Layanan Anda di Zeabur.
2. Buka tab Jaringan.
3. Klik Generate Domain (untuk mendapatkan domain .zeabur.app) atau Domain Kustom untuk menghubungkan domain Anda sendiri.
4. Kunjungi URL tersebut. Aplikasi Bolt.new Anda kini telah menjadi aplikasi production yang ter-deploy sepenuhnya.

Langkah 7: Hubungkan Database (Supabase)

Jika aplikasi Bolt.new Anda memungkinkan pengguna untuk login, membuat akun, atau menyimpan data, aplikasi tersebut memerlukan database (biasanya Supabase).

Saat ini, Anda telah berhasil men-deploy bagian Frontend (antarmuka visual). Agar fitur data dan autentikasi berfungsi, Anda perlu menghubungkan backend dengan menambahkan API key Anda ke pengaturan Variabel di Zeabur.

Kami memiliki panduan khusus yang memandu Anda mendapatkan key Supabase dan menambahkannya ke Zeabur:

👉 Ikuti panduan langkah demi langkah untuk membuat dan menghubungkan Supabase di Zeabur.

Selesai! Anda telah berhasil memindahkan proyek Anda dari prototipe di Bolt.new menjadi aplikasi yang online dan siap production di Zeabur tanpa menulis satu baris konfigurasi pun. Alur kerja yang mulus ini memungkinkan Anda fokus pada hal yang paling penting: membangun perangkat lunak yang hebat.