Pada laravel 9 terdapat fitur baru yaitu Hot Refresh dengan Vite yang memudahkan kita untuk melihat hasil dari tampilan website yang telah diubah, karena dengan vite browser kita akan otomatis melakukan refresh ketika ada perubahan. sehingga kita tidak perlu melakukan refresh secara manual pada halaman website.
fitur terbaru laravel ini mirip dengan punya React JS atau Vue yang bisa melakukan refresh secara otomatis pada halaman website yang terdapat perubahan.
berikut ini langkah-langkah menggunakan Hot Refresh di laravel blade dengan menggunakan Vite.
Instal Laravel
langkah awal kita instal terlebih dahulu project laravel nya. disini kita akan menggunakan composer untuk menginstal laravel.
Catatan
Sebelum menginstal laravel pastikan php kalian versi 8 keatas, karena laravel 9 mendukung php versi 8 keatas.
silahkan buka terminal kalian dan ketikan perintah berikut ini.
composer create-project --prefer-dist laravel/laravel laravel-vite
pada tutorial ini nama project nya yaitu laravel-vite untuk nama project bisa kalian ganti.
setelah berhasil menginstal laravel, silahkan masuk ke dalam project yang terlah dibuat dengan perintah berikut.
cd laravel-vite
Melakukan Konfigurasi Vite
pada laravel 9 secara default sudah ada konfigurasi untuk vite, file nya terdapat pada project laravel dengan nama vite.config.js untuk isi filenya sebagai berikut.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
sekarang kita ubah file diatas menjadi seperti berikut ini.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: [
'public/assets/**',
'resources/views/**'
],
}),
],
});
pada bagian refresh kita menambahkan 2 folder yaitu public dan resources. itu artinya setiap file yang ada didalam folder public/assets dan resources/views ketika ada perubahan akan melakukan refresh secara otomatis.
kemudian kita perlu menambahkan @vite([]) pada file blade kita.
<!doctype html>
<head>
@vite([])
</head>langkah selanjutnya, kita perlu menjalankan npm install untuk mengaktifkannya. silahkan buka kembali terminal kalian dan ketik perintah berikut.
npm install
kemudian kita perlu menjalankannya dengan perintah berikut ini. pada terminal ini jangan di tutup.
npm run dev
kemudian kita buka terminal baru untuk menjalankan server. silahkan ketik perintah berikut.
php artisan serve
dan sekarang coba kalian lakukan perubahan pada file yang terdapat pada folder public/assets dan resources/views maka akan secara otomatis melakukan refresh.
Penutup
Sekian untuk tutorial Laravel Blade Hot Refresh Menggunakan Vite. Jika ada kesulitan kalian bisa komentar dibawah ini.