​Assalamualaikum Warahmatullahi Wabarakatuh, Halo guys, lama tak jumpa, pada kesempatan kali ini saya akan menulis tutorial bagaimana caranya implementasi vite.js pada project laravel. Selain cara implementasi nanti saya juga akan membahas bagaimana hot reload pada vitejs di laravel ini. Yukk simak dengan seksama.

 

Pada 28 Juni 2022 Taylor Otwell diakun twitternya mengumumkan bahwa sekarang laravel menggunakan vite sebagai bundle frontend assets. Manfaat utamanya menggunakan vite adalah waktu pembuatan yang jauh lebih baik dan API yang lebih mudah.

---

Berkenalan dengan Vite

Vite ("Cepat" dalam bahasa Prancis bisa diucapkan/vit/, seperti "veet") adalah merupakan Frontend tooling atau bisa juga dibilang sebuah build tools yang dibangun diatas ESBuild. Ini berarti proses bundling lebih sedikit yang harus dilakukan oleh engine, dan menghasilkan pengalaman developer yang sangat cepat dalam membuat aplikasi. Untuk build pada level produksi, Vite menggunakan Rollup untuk menggabungkan semua assets.

Vite dibuat untuk memenuhi pengalaman developer dalam projek website modern yang cepat, ada 2 fitur utama yang Vite berikan:

1. Development server yang menyediakan peningkatan fitur atas ES Native, contohnya HMR atau Hot Module Replacement yang sangat cepat.
2. Bundle kode dengan Rollup, yang telah dikonfigurasi sebelumnya untuk menghasilkan aset statis yang sangat dioptimalkan untuk produksi.

Kunjungi website resmi Vite untuk mempelajari Vite lebih lanjut.

Why Vite?

Sebelum beralih ke tools baru, ada baiknya untuk memikirkan kenapa ingin melakukannya. Manfaat utamanya adalah overall improved performance.Vite lebih cepat dalam memulai server dev baru, menggabungkan aset, dan memperbaruinya daripada alat lain seperti webpack.

Vite memanfaatkan kemajuan baru dalam ekosistem, seperti ketersediaan modul ES asli di browser dan munculnya alat JavaScript yang ditulis dalam bahasa kompilasi ke bahasa asli. Ada penjelasan rinci di bagian Why Vite dari dokumen resmi.

 

Implementasi Vite pada Laravel

Sebelum kita memulai project pastikan kalian sudah menginstall NodeJs dan NPM (node package manager) cara ngeceknya kalian bisa jalankan syntak.

node -v
npm -v

Dependencies

Pastikan kamu menggunakan versi laravel yang terbaru yaitu 9.20, untuk menggunakan tooling vite. Kemudian kita diharuskan menginstall 2 dependensi baru:

npm install --save-dev vite laravel-vite-plugin

Setelah menambahkan 2 dependensi tersebut, kita buka file package.json.

Hapus semua yang ada pada scripts{}

Ubah dengan kode dibawah ini

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

Karena Vite adalah pengganti webpack, kita dapat menghapus laravel-mix dan menghapus file webpack.mix.js dari aplikasi sebelumnya.

npm remove laravel-mix && rm webpack.mix.js

Setelah semua kalian lakukan, maka file package.json akan seperti ini

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
       "axios": "^0.25",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "postcss-import": "^14.0.1",
        "vite": "^2.9.11",
    }
}

 

Konfigurasi Vite

Sekarang kita perlu mengkonfigurasi Vite. Oleh karena itu buat file baru bernama vite.config.js letakkan di root folder Laravel.

Didalam file vite.config.js tuliskan kode dibawah ini

import laravel from 'laravel-vite-plugin'
import {defineConfig} from 'vite'

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Pada kode diatas kita menggunakan package vite dan laravel-vite-plugin, dan juga kita sudah mendefinisikan path asset untuk diproses bundling oleh vite.

 

Menggunakan Vite di templates

Pada tagditemplate blade layout project, kita harus memuat asset vite dengan memanggil @vite(), agar bisa memuat hasil bundling yang diproses oleh vite.

@vite(['resources/css/app.css', 'resources/js/app.js'])

kalian juga WAJIB MENGHAPUS kode dari laravel mix

link rel="stylesheet" href="{{ mix('css/app.css') }}">
script src="{{ mix('js/app.js') }}" defer>

 

Jalankan Vite

Untuk menjalankan Vite, jalankan dengan menggunakan command npm

npm run dev

yang telah kita definisikan, yang merupakan alias untuk npm run vite.

Untuk membuat asset siap pada level produksi, kamu juga dapat menggunakan 

npm run build

command untuk membuat versi dan menggabungkan file asset.

Vite menggunakan asset baru yang dikompilasi ke direktori public/build. Ini berarti kita dapat menghapus folder aset lama, public/css dan public/js.

 

Tailwind Css

Jika kamu menggunakan Tailwind CSS di proyek Laravel, styles Anda tidak akan berfungsi. Itu karena kita membutuhkan Post CSS Tailwind CSS.

Buat file postcss.config.js (jika kamu belum mempunyai file tersebut), dan tentukan dua plugin di sana:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Kalian juga harus menginstal package-package tersebut, tetapi jika kamu sudah menggunakan Tailwind CSS, kalian harus sudah ada.

Vite akan mencari konfigurasi PostCSS dan secara otomatis menerapkannya jika diberikan. Itu akan work. Style CSS Tailwind sekarang juga akan berfungsi.

 

Environment Variables

Anda dapat menginject environment variable ke JavaScript melalui .env file, dengan mengawalinya dengan VITE_.

Misalnya, Pusher Laravel.

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Jika ingin menggunakannya dalam JavaScript, ganti namanya.

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

 

Hot Reload Vite pada Laravel

Salah satu fitur Vite yang paling menonjol adalah Hot Module Replacement untuk Vue.js dan React.

Blade File

Tapi itu juga bagus untuk merefresh browser setelah perubahan file. Secara default, ini tidak berfungsi dengan Bladefile, tetapi Freek dan Spatie mendapatkan solusi yang berfungsi.

Cukup perbarui konfigurasi Vite dengan plugin khusus bernama blade di sini:

import laravel from 'laravel-vite-plugin'
import {defineConfig} from 'vite'

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        {
            name: 'blade',
            handleHotUpdate({ file, server }) {
                if (file.endsWith('.blade.php')) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*',
                    });
                }
            },
        }
    ],
});

 

Livewire Hot Reload

Jika kamu memakai livewire, kalian bisa menggunakan package dari def-studio.

Berikut langkah-langkahnya:

Install dependensi terlebih dahulu

npm install --save-dev @defstudio/vite-livewire-plugin

Setelah itu perbarui konfigurasi Vite dengan plugin def-studio:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

import livewire from '@defstudio/vite-livewire-plugin'; // <-- import

export default defineConfig({
    //...
    
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        
       livewire({  // <-- tambahkan livewire plugin
           refresh: ['resources/css/app.css'],
       }),
    ],
});

Terakhir tambahkan livewire hot reload di file app.js

//..

import { livewire_hot_reload } from 'virtual:livewire-hot-reload'
livewire_hot_reload();

 

Hot reload file asset apapun

Pada sesi ini, ada cara lain selain kedua cara hot reload tadi. Disini kita berfokus pada semua file asset yang ada pada folder resources/views.

Jadi ketika kita mengubah apapun file didalam folder resources/views, maka browser akan refresh dengan sendirinya.

Bagaimana caranya?

Disini saya menggunakan plugin vite-plugin-full-reload.

Berikut langkah-langkahnya:

Install dependensi terlebih dahulu

npm i -D vite-plugin-full-reload

Setelah itu perbarui konfigurasi Vite dengan vite-plugin-full-reload:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import FullReload from 'vite-plugin-full-reload'; // <-- import

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        FullReload([ // <-- tambahkan plugin
            'resources/views/**', 
            'routes/**'
        ])
});

 

Kesimpulan

Pada artikel ini, kita sudah mempraktekkan bagaimana caranya implementasi vite.js pada project laravel. Selain itu, kita juga sudah membahas bagaimana hot reload pada vitejs di laravel ini, baik itu menggunakan blade file, vue file, js file.  Saya harap tutorial ini bermanfaat.

Terima Kasih,

Wassalamualaikum Warahmatullahi Wabarakatuh.