Sabtu, 02 July 2022

Integrasi Laravel dengan Vite.js: Panduan Lengkap

Baru-baru ini Laravel baru saja melakukan pembaruan, yang salah satunya tidak memakai Laravel Mix lagi sebagai compiler assets nya. Melainkan menggunakan Vite.js.

Laravel
Vite

Daftar Isi

Baru-baru ini Laravel baru saja melakukan pembaruan, yang salah satunya tidak memakai Laravel Mix lagi sebagai compiler assets nya. Melainkan menggunakan Vite.js.

Jadi sekarang, yang biasanya ada file webpack.mix.js di direktori utama, sekarang berubah menjadi vite.config.js yang kurang lebih isinya seperti:

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

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

Install Tailwind CSS

Dalam artikel ini, kita akan mencoba untuk menggunakan Tailwind CSS sebagai front end kita.

Yang paling pertama, coba lakukan instalasi laravel dan kemudian instal dependencies yang ada by default dengan melakukan perintah berikut.

laravel new project
cd project
npm install

Jika sudah, sekarang instal tailwind css dengan menjalankan perintah berikut.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Setelah itu, Anda bisa app.css yang ada dalam direktori resources/css dan masukkan tailwind directive nya seperti berikut:

@tailwind base;
@tailwind components;
@tailwind utilities;

Kemudian, Anda bisa buka resources/views/welcome.blade.php dan replace dengan ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div class="min-h-screen bg-blue-500 font-sans antialiased">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
</body>
</html>

Jika sudah, sekarang Anda bisa jalan development server laravel dengan menjalankan perintah berikut.

php artisan serve

Setelah itu, Anda bisa buka 1 jendela terminal lagi untuk menjalankan compiler nya seperti:

npm run dev
...
	vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 107ms.


  Laravel v9.19.0

  > APP_URL: http://project.test

Dan sekarang harusnya Anda bisa melihat projectnya dengan mengunjungi http://127.0.0.1:8000/ di browser.

Laravel Breeze

Jika Anda sering menggunakan laravel breeze di dalam setiap pembuatan project yang Anda punya, harusnya ini akan sangat mudah sekali.

laravel new breeze-test
composer require laravel/breeze
php artisan breeze:install react
npm install
npm run dev

Dan sekarang, Anda bisa langsung jalankan artisan serve dan kemudian kunjungi http://localhost:8000/ di browser.

Oia, untuk vite.config.js kurang lebih sekarang seperti:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

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

Breeze SSR

Jika Anda peduli dengan SEO, Anda bisa menggunakan fitur ssr yang diberikan oleh Inertia.js. Dengan breeze itu sangat mudah, hanya tinggal menambahkan flag --ssr sewaktu instalasi breeze seperti perintah berikut:

php artisan breeze:install react --ssr

Dan Anda sudah di beri setup by default dari breeze tersebut tanpa harus setup secara manual. Dan harusnya, untuk file vite.config.js akan sudah berubah menjadi seperti

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

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

Oia, Anda mungkin bertanya, "Bagaimana jika saya sudah menggunakan laravel mix di dalam project saya yang sudah-sudah, apakah bisa di perbarui dengan menggunakan Vite?". Sudah pasti bisa, namun jika Anda malas, Anda bisa menggunakan jasa dari Laravel shift ya untuk melakukan hal itu.

Jika Anda ingin mempelajari bagaimana cara menggunakan Inertia tanpa breeze dari awal, Anda bisa lihat disini.

Semoga artikel ini bermanfaat ya.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

Irsyad A. PanjaitanGo to Irsyad A. Panjaitan profile

Follow me on