Pernahkah Anda menemukan proyek website atau aplikasi yang menarik di platform seperti Lovable, dan berpikir, “Wah, saya ingin melihat bagaimana kode di baliknya bekerja” atau “Saya ingin mencoba menjalankannya di laptop saya sendiri”?
Kabar baiknya, sebagian besar platform modern memungkinkan pengembangnya untuk membagikan kode sumber (source code) mereka melalui GitHub. Namun, bagi pemula, proses dari melihat tombol “GitHub” hingga benar-benar melihat aplikasinya berjalan di browser lokal bisa sedikit membingungkan.
Artikel ini akan memandu Anda langkah demi langkah melalui proses tersebut menggunakan editor kode paling populer saat ini: Visual Studio Code (VS Code). Kita akan mengubah kode yang ada di awan (cloud) menjadi aplikasi yang berjalan di mesin lokal Anda.
Prasyarat: Apa yang Anda Butuhkan?
Sebelum memulai, pastikan komputer Anda sudah siap. Anda memerlukan tiga perangkat lunak “wajib” ini agar proses berjalan lancar:
- Visual Studio Code (VS Code): Editor teks untuk membaca dan mengedit kode. (Download di: code.visualstudio.com)
- Node.js (LTS Version): Sebagian besar proyek web modern saat ini (React, Vue, Next.js, dll.) membutuhkan Node.js untuk berjalan. Ini adalah “mesin” di balik layar. (Download di: nodejs.org)
Integrasi Lovable ke Github.
Setelah kedua aplikasi di atas diinstalkan langkah selanjutnya adalah kita mengirim source code dari lovable ke github.
- Klik ikon github. Kemudian klik tombol Connect Github.
- Pada halaman integration githun klik tombol Connect Github.
- Masukan email dan password github.
- Klik tombol Authorize lovable.dev.
- Klik Add Organizations.
- Pilih All repositoriez dan Klik Install & Authorize.
- Klik Continue.
- Klik Connect.
- Selesai. Jika berhasil maka tampilannya akan seperti ini.
Download Source Code Lovable Via Github.
Langkah selanjutnya adalah kita mendownload source code yang ada di lovable melalui github. Silahkan login kan akun github anda. Kemudian buka aplikasi yang akan di download source codenya.
- Klik Code. Pilih Download Zip.
Menjalankan Source Code di Visual Studio Code.
- Sekarang ekstrak hasil download zip tadi kemudian buka di visual studio dengan cara Open Folder
- Setelah folder aplikasi terbuka, aktifkan Terminal melalui View >> Terminal >> New Terminal.
- Instalkan npm dengan mengetikan perintah npm install pada terminal.
- Jika mengalami error seperti ini :
ketikan perintah ini pada terminal : Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
kemudian ketik huruf Y lalu enter dan ikuti instruksi selanjutnya. Jika sudah selesai ketikan kembali npm install untuk melakukan proses instal npm
- Selanjutnya ketikan perintah : npm run dev, maka akan muncul link server aplikasi tersebut. Silahkan buka link tersebut pada browser untuk memastikan aplikasi berjalan sempurna.
Deploy Source Code ke Hosting
- Untuk deploy aplikasi ke hosting kita harus build terlebih dahulu aplikasi tersebut di visual studio code. Silahkan ketikan perintah npm run build. Setelah proses build selesai maka akan terbentuk folder baru bernama dist. Isi didalam folder dist ini yang nantinya akan kita upload ke cpanel hosting.
- Selanjutnya kita beralih ke hosting. Ada yang harus kita persiapkan terlebih dahulu sebelum aplikasi di uplod ke cpanel hosting. Silahkan buat nama domain atau subdomain terlebih dahulu sebagai link aplikasi yang nantinya domain atau subdomain tersebut sebagai tempat menampung source code yang akan kita upload.
- Berikutnya kita setting nodejs nya pada cpanel. Silahkan ketikkan node js pada kotak pencarian lalu pilih Setup Node.js App
- Silahkan isi sesuai dengan projek anda. Pada kasus ini admin menggunakan versi node.js bawaan default cpanel. Aplication mode pilih Production. Application root admin samakan dengan nama subdomain yang admin buat pada langkah sebelumnya di atas. Application URL admin pilih nama subdomain yang admin buat pada langkah sebelumnya juga. Application starup file admin ketik index.js.
- Selanjutnya klik Create Aplication. Silahkan klik tombol Open untuk mengecek apakah aplikasi sudah berhasil dibuat. Jika berhasil maka di browser akan muncul keterangan versi node.js dan tulisan Working. Untuk tombol Run NPM Install belum bisa di klik. Agar bisa di klik silahkan hapus semua isi yang ada pada folder Application Root yang telah dibuat pada file manager cpanel. Pada kasus ini folder yang admin adalah sama dengan nama subdomain. Jika semua sudah di hapus silahkan upload source code yang berada pada folder dist pada komputer lokal kita ke dalam folder Application root.
- Jika sudah di uplod silahkan refresh browser anda kemudian klik tombol Run NPM Install. Jika berhasil maka akan muncul notifikasi berhasil di sudut kanan atas.
- Selesai, aplikasi berhasil di upload dan instal.
