Laravel dengan Vite.js
Baru-baru ini Laravel baru saja melakukan pembaruan, yang salah satunya tidak memakai Laravel Mix lagi sebagai compiler assets nya. Melainkan menggunakan Vite.js.
Share
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', ]), ], });
jsCopy
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
bashCopy
Jika sudah, sekarang instal tailwind css dengan menjalankan perintah berikut.
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
bashCopy
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;
cssCopy
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>
htmlCopy
Jika sudah, sekarang Anda bisa jalan development server laravel dengan menjalankan perintah berikut.
php artisan serve
bashCopy
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
bashCopy
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
bashCopy
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(), ], });
jsCopy
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
bashCopy
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(), ], });
jsCopy
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.