Site icon Nusagates Notes

Electron: Konfigurasi Live Reload Saat Development

Live reload atau hot reload adalah perubahan hasil akhir aplikasi langsung ditampilkan tanpa merestart aplikasi. Umumnya hanya cukup menyimpan file yang diperbarui saja sudah langsung berubah. Fitur ini sangat aku butuhkan saat mengembangkan aplikasi menggunakan electron.

Untuk dapat menggunakan fitur ini, kita bisa menggunakan package npm electron-reloader.

Install Live Reload Package

Seperti yang telah disebutkan di atas, kita bisa menggunakan paket electron-reloader untuk membuat live reload bekerja di lingkungan kerja (environment) elecron. Caranya adalah sebagai berikut:

npm install --save-dev electron-reloader

Menggunakan Live Reload

Setelah paket electron-reloader diinstall, selanjutnya adalah menggunakan paket tersebut agar dapat pekerja pada project yang telah kita buat.

Tambahkan baris kode di bawah ini pada entry point aplikasi electron kita. Umumnya bernama index.js atau main.js.

try {
	require('electron-reloader')(module);
} catch {
	console.log('modul tidak ditemukan')
}

Setelah kita menambahkan kodingan seperti di atas, selanjutnuya adalah mencoba apakah sudah berhasil atau belum. Caranya adalah menjalankan aplikasi electron dengan cara:

npm run electron:serve

atau

yarn electron:serve

Setelah preview aplikasi muncul, selanjutnya coba edit file js atau yang menghandel front-end lalu simpan file tersebut apakah preview aplikasi langsung berubah atau tidak. Kalau langsung berubah bearti konfigurasi live reload telah berhasil.

Exit mobile version