Package & Distribusi Aplikasi Electron

Aplikasi Electron kamu udah jalan mulus di komputer sendiri? Bagus. Tapi selama masih nangkring di folder proyek, ya cuma kamu yang bisa nikmatin. Biar orang lain ikut pakai, kamu perlu ngubah folder proyek itu jadi installer atau file siap pakai — yang bisa dijalankan tanpa perlu Node.js terpasang. Nah, inilah yang disebut package dan distribusi. Tenang, ada electron-builder yang bikin urusan ini jauh lebih gampang, dari config sampai jadi file buat tiap sistem operasi.

Kalau kamu belum bikin aplikasi Electron sama sekali, mendingan mulai dulu dari mengenal Electron: bikin desktop app.

Apa Bedanya Package dan Distribusi?

Dua istilah ini sering ketuker, jadi biar jelas dulu:

Package: membungkus kode, aset, dan runtime jadi satu aplikasi yang bisa dijalankan. Hasilnya bisa berupa folder aplikasi atau file installer.
Distribusi: nyalurin hasil package tadi ke pengguna, entah lewat website, GitHub Releases, atau toko aplikasi.

Buat dua-duanya, tool paling populer ya electron-builder. Dari satu config yang sama, dia bisa menghasilkan installer Windows (.exe), file macOS (.dmg), sampai paket Linux (.AppImage, .deb).

Memasang electron-builder

Di folder proyek, install dia sebagai dependensi development dulu:

npm install --save-dev electron-builder

Terus tambahin skrip di package.json biar gampang dipanggil:

{
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  }
}

Konfigurasi Build Dasar

Sekarang tambahin blok build di package.json. Bagian inilah yang jadi inti dari seluruh proses packaging.

{
  "name": "aplikasi-pertama",
  "version": "1.0.0",
  "main": "main.js",
  "build": {
    "appId": "com.razin.aplikasipertama",
    "productName": "Aplikasi Pertama",
    "directories": {
      "output": "dist"
    },
    "files": [
      "main.js",
      "preload.js",
      "index.html",
      "assets/**/*"
    ]
  }
}

Ada beberapa field yang penting kamu tahu:

appId: pengenal unik aplikasi, biasanya pakai format domain kebalik. Wajib ada dan harus konsisten di tiap rilis.
productName: nama yang dilihat pengguna di installer dan ikon.
files: daftar file yang ikut dibungkus. Dibatesin kayak gini biar ukurannya tetap kecil dan nggak kebawa file mentah yang nggak perlu.

Membuat Build per Platform

Satu aturan main yang perlu kamu pegang: build paling mulus itu kalau dikerjain langsung di sistem operasi targetnya. Mau build buat macOS? Idealnya di mesin macOS, begitu juga yang lain. Build lintas platform sebenarnya bisa, tapi sering rewel — apalagi macOS yang butuh signing.

Buat platform yang lagi kamu pakai sekarang, cukup jalanin:

npm run dist

Kalau mau nargetin platform tertentu secara eksplisit:

# Windows
npx electron-builder --win

# macOS
npx electron-builder --mac

# Linux
npx electron-builder --linux

Hasilnya bakal muncul di folder dist. Buat Windows, secara default kamu dapat installer berbasis NSIS. Buat Linux, .AppImage itu format yang enak soalnya gampang dijalanin di mana aja.

Menambahkan Ikon Aplikasi

Aplikasi tanpa ikon tuh kelihatan setengah jadi. Siapin ikonnya, terus arahin di config:

{
  "build": {
    "win": {
      "icon": "assets/icon.ico"
    },
    "mac": {
      "icon": "assets/icon.icns"
    },
    "linux": {
      "icon": "assets/icon.png"
    }
  }
}

Soal format: Windows pakai .ico, macOS pakai .icns, dan Linux pakai .png (disaranin ukuran 512x512). Nggak usah pusing, banyak kok tool online yang bisa ngonversi satu PNG jadi semua format ini sekaligus.

Memilih Format Output

Kamu juga bisa nentuin jenis file yang mau dihasilin lewat field target:

{
  "build": {
    "win": {
      "target": ["nsis", "portable"]
    },
    "linux": {
      "target": ["AppImage", "deb"]
    }
  }
}

Format nsis ngasih installer biasa, sedangkan portable ngasih satu file .exe yang bisa langsung jalan tanpa perlu diinstall. Pilih aja yang paling pas buat pengguna kamu.

Tentang Code Signing

Pas aplikasi kamu dibagiin, Windows sama macOS kadang munculin peringatan keamanan gara-gara aplikasinya belum ditandatangani. Nah, code signing ini proses nandatanganin aplikasi pakai sertifikat resmi biar dipercaya sama sistem.

Buat tahap awal atau distribusi internal, kamu bisa skip ini dulu — cuma ya pengguna mungkin harus klik "tetap jalankan" pas buka. Tapi kalau udah serius mau distribusi ke publik, signing ini kenceng banget disaranin. Masalahnya, sertifikat buat Windows dan akun Apple Developer buat macOS itu berbayar, jadi siapin budget kalau targetnya publik luas.

Mendistribusikan ke Pengguna

Begitu file installer-nya siap, ada beberapa jalan buat nyalurinnya:

GitHub Releases: gratis, pas banget buat proyek open source, dan udah nyatu sama auto-update.
Website sendiri: upload installer ke server, terus kasih link download. Kalau kamu punya VPS, panduan deploy Node.js ke VPS dengan PM2 bisa bantu nyiapin tempat naruh file-nya.
Toko aplikasi: Microsoft Store atau Mac App Store buat jangkauan lebih luas, tapi ada proses review-nya sendiri.

Idealnya sih, distribusi ini digabung sama auto-update biar pengguna nggak perlu download ulang tiap ada versi baru. Cara lengkapnya bisa kamu pelajari di auto-update Electron dengan electron-updater.

FAQ

Kenapa ukuran aplikasi saya gede banget?

Setiap aplikasi Electron itu bawa Chromium sama Node.js sendiri, jadi ukuran puluhan megabyte tuh wajar. Kamu bisa nekan sedikit dengan ngebatesin files dan buang dependensi yang nggak kepakai.

Pengguna perlu install Node.js dulu nggak?

Nggak perlu. Hasil package udah termasuk runtime yang dibutuhin, jadi aplikasinya langsung bisa jalan di komputer yang masih kosongan sekalipun.

Boleh nggak build Windows dari komputer Mac atau Linux?

Buat Windows, biasanya bisa kok dengan bantuan Wine, tapi hasilnya nggak selalu mulus. Cara paling aman ya build langsung di mesin Windows asli, atau lewat layanan CI yang nyediain runner Windows.

Penutup

Intinya, package dan distribusi aplikasi Electron jadi jauh lebih gampang berkat electron-builder. Kamu cukup atur blok build, siapin ikon, terus jalanin satu perintah buat menghasilkan installer yang siap dibagiin.

Satu tips praktis buat nutup: build-lah di mesin yang sesuai platform targetnya, atau pakai layanan CI yang nyediain beberapa sistem operasi sekaligus. Cara ini bakal ngehemat banyak waktu debugging dibanding maksain build lintas platform dari satu komputer doang.

Cara Package & Distribusi Aplikasi Electron