BLANTERORIONv101

Laravel Blade Hot Refresh Menggunakan Vite - Fitur Terbaru Laravel 9

7 Agustus 2022

Pada tutorial kali ini saya akan membahas tentang fitur terbaru dari laravel 9 yaitu Laravel Blade Hot Refresh With Vite. Dengan menggunakan fitur ini, ketika kita melakukan editing blade template, itu akan secara otomatis di refresh. Jadi kita tidak perlu malakukan refresh halaman web kita di browser lagi secara manual. Jika Anda pengguna Vue atau React JS, fitur terbaru dari laravel 9 ini mirip dengan punya kedua tersebut.

Untuk konfigurasinya cukup mudah, silahkan ikuti langkah-langkah dibawah ini untuk melakukan konfigurasinya.

Langkah 1. Instal Laravel 9

Pertama, kita karus meiliki project laravel dengan versi 9 terlebih dahulu atau jika Anda belum memilikinya, silahkan melakukan installasi terelebih dahulu dengan perintah ini bawah ini:

composer create-project --prefer-dist laravel/laravel example-app

atau, Anda bisa juga melakukan installasi yang versi global:

laravel new example-app

Dengan perintah dua di atas, Anda akan di bantu untuk proses installasi laravel dengan versi terbaru.

Baca Juga : Cara Upgrade Laravel 8 ke 9

Langkah 2. Konfigurasi Vite

Secara default laravel 9 sudah membawa konfigurasi untuk vite-nya sendiri, untuk filenya terdapat pada project laravel Anda dengan nama vite.config.js dan isi filenya seperti dibawah 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: true,
        }),
    ],
});

Untuk mengaktifkannya Anda perlu untuk menjalankan npm install terlebih dahulu pada terminal Anda dan silahkan tambahkan kode dibawah ini pada main blade Anda:

<!doctype html>
<head>
    {{-- ... --}}
 
    @vite([])
</head>

Silahkan copy yang @vite([]) saja dan letakan pada main blade template Anda. Jika sudah memasang kode di atas di atas, silahkan jalankan aplikasi Anda dengan petintah di bawah ini:

php artisan serve

Dan Anda perlu untuk menlajankan npm-nya:

npm run dev

*Catatan Anda harus menjalankan kedua perintah diatas. Anda bisa menambahkan satu terminal lagi untuk menjalankan perintah yang satunya.

Jika sudah silahkan buka aplikasi Anda di browser dan coba melakukan editing pada kodingan Anda dan silhakan lihat di browser Anda untuk hasilnya.

Anda bisa juga melakukan edit pada file vite.config.js untuk memilih folder atau file mana saja yang ketika di edit akan melakukan perubahan secara otomatis.

Anda bisa melakukan edit seperti kode di bawah 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/**'
            ],
        }),
    ],
});

Yang di ubah hanya yang bagian refresh-nya saja :

refresh: [
'public/assets/**',
'resources/views/**'
],


Dan silahkan Anda melakukan edit pada file yang terdapat di dalam folder yang Anda pilih.

*Penjelasan : tanda ** menandai semua file di folder pilihan Anda. 

Oke teman-teman kurang lebih seperti itu ya, untuk tutorial Laravel Blade Hot Refresh Menggunakan Vite - Fitur Terbaru Laravel 9. JIka Anda masih bingung, silahkan bertanya pada kolom komentar dibawah ini.

Video Tutorial : Dalam Proses

Komentar