Membuat Fitur Hot Reload Di Codeigniter4

By Harjito

image from Membuat Fitur Hot Reload Di Codeigniter4

Membuat Fitur Hot Reload Di Codeigniter4 (Untuk Linux)

Fitur Hot Reload saat ini sudah lazim diguakan diberbagai framework berbasis Go. Namun tidak demikian di framework berbasis PHP. Fitur ini sangat berguna bagi developer yang ingin menlihat secara langsung efek dari perubahan script, tanpa harus mereload tampilan di browser secara manual.

Dalam tutorial ini saya memanfaatkan dua fitur yaitu

  • inotify di sisi server dan
  • Server Sent Event (SSE) di client

Kita langsung saja mulai membahas langkah-langkahnya

Menyiapkan inotify di server dengan script bash

  • buat sebuah file bash di project root (satu folder dengan .env dan spark di CI4)
  • beri nama watch.sh
  • Ketikkan script berikut
#!/bin/bash
echo "reload" > "writable/stream.txt"
while inotifywait -e modify app/* --recursive -e modify public/js/* -e modify public/css/*; do
    echo "reload" > "writable/stream.txt"
done
  • script tersebut berfungsi untuk menulis kata “reload” pada pada sebuah file bernama stream.txt dalam folder writable
  • lalu menjalankan inotify dengan endless loop
  • ketika terjadi perubahan pada folder app dan public, dia akan memperbarui isi stream.txt dengan kata “reload”

Menjalankan watch.sh dan spark secara bersama-sama dalam sebuah perintah bash

  • buat sebuah file bash di project root (satu folder dengan .env dan spark di CI4)
  • beri nama run.sh
  • ketikkan
#!/bin/bash
bash watch.sh &
php spark serve
  • saat run dijalankan, watch.bash akan dijalankan di background sehingga tidak memblok spark
  • lalu spark serve dijalankan, untuk service http

Menyiapakan sebuah controller untuk memeriksa isi dari stream.txt

  • Jalankan perintah
php spark serve make:controller stream
  • Copas script berikut dalam method index
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$data = file_get_contents(WRITEPATH . 'stream.txt');
echo "data: {$data}\n\n";
flush();
file_put_contents(WRITEPATH . 'stream.txt','idle');
  • Saat stream dipanggil lewat browser, maka akan menampilkan isi dari stream.txt
  • lalu isinya diganti dengan idle

Menyiapkan SSE di javascript

  • buka script html bagian footer
  • tambahkan script berikut
<script>
var source = new EventSource("/stream");
source.onmessage = function (event) {
  if (event.data == 'reload') {
    location.reload()
  }
}
</script>
  • SSE akan melakukan request ke domain/stream
  • jika hasilnya data yang diterima “reload”", browser otomatis akan menjalankan reload

Menguji Hot Reload

  • Jalankan service http dengan perintah
bash run.sh
  • Reload akan dilakukan jika ada perubahan file di folder app(Controller, View, Model, Helper, Library, Config, dll)
  • Reload juga akan terjadi jika terjadi perubahan file di folder js maupun css di public

Semoga bermanfaat.

Tags:

Ikuti terus tutorial saya di e-Project dan channel saya di


Donasi