Untuk melakukan
auto refresh pada halaman Blade di Laravel, Anda dapat menggunakan beberapa
pendekatan. Berikut adalah beberapa cara yang umum digunakan:
Persiapan:
Sudah Menginstall Node.js
Node.js — Run JavaScript Everywhere (nodejs.org)
1. Menggunakan BrowserSync dengan
Laravel Mix
Laravel Mix
menyediakan fitur BrowserSync yang memungkinkan auto refresh saat terjadi
perubahan pada file Blade. Berikut adalah langkah-langkahnya:
- Pastikan
Anda telah menginstal Node.js di komputer Anda.
- Buka
file webpack.mix.js di root folder proyek
Laravel Anda.
- Tambahkan kode berikut ke dalam file webpack.mix.js:
const mix = require('laravel-mix');
mix.browserSync('127.0.0.1:8000');
- Simpan
perubahan pada file webpack.mix.js.
- Jalankan perintah npm run watch di terminal untuk memulai proses kompilasi dan auto refresh.
Dengan menggunakan
BrowserSync, setiap kali Anda melakukan perubahan pada file Blade, halaman akan
secara otomatis diperbarui di browser.
2. Menggunakan Plugin Laravel Mix
Blade Reload
Anda juga dapat
menggunakan plugin pihak ketiga seperti laravel-mix-blade-reload untuk melakukan
auto refresh pada file Blade. Berikut adalah langkah-langkahnya:
- Pastikan
Anda telah menginstal Node.js di komputer Anda.
- Jalankan
perintah npm
install laravel-mix-blade-reload di terminal untuk menginstal plugin.
- Buka
file webpack.mix.js di root folder proyek
Laravel Anda.
- Tambahkan
kode berikut ke dalam file webpack.mix.js:
const mix = require('laravel-mix');
require('laravel-mix-blade-reload');
mix.js('resources/js/app.js', 'public/js')
.bladeReload();
- Simpan
perubahan pada file webpack.mix.js.
- Jalankan
perintah npm
run watch di
terminal untuk memulai proses kompilasi dan auto refresh.
Dengan menggunakan plugin ini, setiap kali Anda melakukan perubahan pada file Blade, halaman akan secara otomatis diperbarui di browser. Pastikan untuk mengikuti instruksi penggunaan dan dokumentasi resmi dari plugin yang Anda pilih untuk informasi lebih lanjut.