Node.js Auto Refresh Server & Browser
Di artikel sebelumnya pernah membahas tentang gimana caranya otomatis refresh server kalau ada perubahan source code. Tapi sayangnya itu hanya di sisi server-nya. Gimana dengan client/browser? Harus pencet F5 terus2an kalau ada perubahan di sisi frontend-nya? Capek dong..
Ternyata ada cara biar ga capek pencet F5 berkali2. Yang jelas ga harus ke tukang pijat :D Nah, caranya seperti ini:
- Install module nodemon secara global dulu
yarn global add nodemon - Install module reload ke dalam project
yarn add reload - Pasang script reload di sisi backend, taruh di script utama, misalkan di file server.js atau index.js
let reload = require(‘reload’);
reload(app); - Pasang script js reload di sisi frontend-nya, seperti ini
<script src=”/reload/reload.js”></script> - Jalankan dengan perintah seperti ini:
nodemon -w *.* -w views/*.* index.js
Kebetulan file untuk project frontend ada di folder views, karena pakai view engine pug, jadinya folder tersebut juga harus diawasi oleh nodemon.
Sebagai bonus.. capek kan kalau harus ngetik perintah2 nodemon bla bla bla, kemudian buka browser. Begitu2 terus kalau mau jalankan. Cara yang enak, bikin aja script launcher di file package.json, tambahkan di bagian “scripts”, script seperti ini:
“live”: “start http://localhost:4000 & nodemon -w *.* -w views/*.* index.js”
Trus, menjalankannya cukup dengan perintah: yarn live. Biar yakin jalan apa ga, coba edit2 file yang ada di folder views, ketika di-save maka server akan restart dan browser me-refresh sendiri. Jadi ga perlu repot2 lagi Ctrl+C, pencet Y, pencet enter, jalankan lagi, Alt-Tab ke browser, pencet F5.
Gampang juga ternyata. Ya.. setelah coba2 beberapa module auto reload, cara ini yang mudah dan bisa berjalan seperti yang diharapkan. Untuk source code bisa langsung dijemput di repo github.
