Auto Reload Browser Saat Terjadi Perubahaan File di Laravel

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar bagaimana cara membuat auto refresh atau auto reload browser saat terjadi perubahan pada laravel. Penasaran?, ayo ikuti selengkapnya di bawah ini.




Bagi para progremmer javascript, mungkin auto reload saat suatu file berubah mungkin sudah tidak asing. Tapi bagaimana di laravel atau di file blade?. Jawabnya ya bisa, sama seperti javascript, file php atau blade di laravel juga dapat melakukan auto reload saat terjadi perubahan pada sebuah file. Laravel menggunakan laravel mix untuk mendukung itu.

Fungsi auto reload ini cukup membantu para programmer, karena browser secara otomatis merespon perubahan sehingga kita tidak perlu mereload ulang halaman browser. Jika kalian menerapkan ini, tentu hal ini akan mempermudah pekerjaan. Caranya cukup mudah, ikuti stepnya di bawah ini.

Cara Membuat Auto Reload Saat File Berubah di Laravel

1. Siapkan project laravel dengan versi laravel yang sudah mendukung laravel mix. Laravel mix tersedia pada versi 5.4+. Tapi saya sarankan untuk menggunakan laravel versi 7+ agar tidak terjadi error.

2. Pastikan kalian sudah menginstall node js. Klik link berikut ini untuk mendownload node.js. https://nodejs.org/en/

3. Jalankan perintah di bawah ini untuk mendownload beberapa depedensi yang diperlukan.

npm install

4. Buka file webpack.mix.js lalu tambahkan script di bawah ini.

mix.browserSync('127.0.0.1:8000');

5. Jalankan perintah di bawah ini untuk mendownload depedensi browser-sync dan browser-sync-webpack-plugin.

npm run watch

6. Jalankan kembali perintah di bawah ini, kali ini perintah di bawah ini akan menjalankan virtual server. 

npm run watch

Setelah perintah di atas dijalankan, maka beberapa saat kemudian kalian otomatis akan diarahkan ke browser dengan url http://localhost:3000. Ok, sekarang auto reload kalian sudah aktif. Coba untuk melakukan perubahan pada file blade dan lihat hasilnya.

Cek Auto Reload

Tambahan: Cara mengaktifkan Auto Save Visual Studio Code

Biar cara ngoding kalian lebih cepet lagi, kalian harus mengaktifkan auto save pada visual studio code. Jadi saat kalian mengedit file, maka file otomatis di-save dan browser otomatis di-reload. Kalian akan merasa bahagia, lebih powerful, lebih cepet, dan lebih efektif. Ikuti gambar di bawah ini untuk mengaktifkan auto save pada vs code.

Cara Mengaktifkan Auto Save

 

Ok sekian tutorial kita kali ini tentang cara membuat auto reload saat terjadi perubahan file di laravel. Semoga membantu, jika ada pertanyaan silahkan tulis di kolom komantar atau tanya langsung di fanspage. Sekian dan terima kasih.