Membuat Proyek Laravel 11.x dengan Svelte Melalui Inertia.js dan Tailwind CSS sebagai Framework Styling

Laravel adalah web application framework dengan sintaks yang elegan dan ekspresif. Framework ini menyediakan struktur dan titik awal dalam membuat aplikasi web, yang memungkinkan kita untuk fokus mengembangkan aplikasi tanpa terlalu menyentuh aspek-aspek detail.

Svelte adalah Web Frontend Framework yang memiliki performa tinggi, sintaks bahasa yang ringkas, dan memiliki banyak keunggulan terintegrasi, antara lain: scoped styling, state management, motion primitives, form bindings dan banyak lagi lainnya.

Biasanya proyek backend, seperti Laravel, dan proyek frontend, seperti Svelte berada dalam repository (direktori) terpisah, memiliki server-nya sendiri-sendiri dan hanya saling berkomunikasi melalui berbagai metode komunikasi HTTP. Inertia.js hadir menawarkan pendekatan baru dalam pengembangan aplikasi web dengan apa yang mereka sebut monolith server-driven app. Yaitu dengan menggabungkan kode-kode frontend kedalam kode backend sehingga kita tetap dapat menikmati abstraksi framework frontend tanpa harus membuat repository terpisah dari backend.

Namun begitu untuk memperoleh kemudahan abstraksi framework ini, ternyata diperlukan langkah-langkah yang kadang cukup panjang dan kaku. Post ini berusaha memandu kita dalam menginisialisasi proyek Laravel, terutama versi 11.x yang menggunakan Svelte sebagai frontend framework, dan Tailwind CSS sebagai styling framework.

Mempersiapkan Proyek Laravel

Mempersiapkan proyek, artinya kita akan membuat direktori baru berisi file-file boilerplate yaitu file kode yang akan kita pergunakan tanpa kita perlu mengetahui dan memahami isi dan mekanisme kerjanya.

Namun sebelum kita dapat menjalankan perintah untuk mempersiapkan proyek, pastikan mesin anda sudah terinstall Mariadb atau MySQL, PHP, Composer, Node.js dan NPM. Paket php, composer, dan mungkin Node dan NPM dapat diperoleh dari banyak jalan, diatara dari Laravel Herd, XAMPP, atau secara manual diinstall satu-persatu. Langkah instalasi paket-paket tersebut tidak akan dijelaskan dalam post ini, silakan menggali lebih dalam melalui media daring secara mandiri 😁.

Setelah PHP dan Composer terinstall kita dapat memulai mempersiapkan proyek melalui perintah create-project

composer create-project laravel/laravel example-app

Database dan Migrations

Setelah kita membuat aplikasi Laravel, sekarang mungkin saatnya mempersiapkan data dalam database. Secara default Laravel mempersiapkan database SQLite untuk kita, tapi kali ini kita akan membuat database baru menggunakan Mariadb yang mana menurut hemat saya lebih bagus secara teknis maupun keamanan dibanding dengan SQLite.

Supaya kita bisa menggunakan Mariadb sebagai server database, maka kita harus memperbarui file konfigurasi bernama .env sedemikian rupa:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Tentu saja dengan menyesuaikan nama database, username, dan password sesuai server yang berjalan di komputer anda.

Lalu kita bisa meng-inisialisasi database kita dengan menjalankan perintah

php artisan migrate

ketika menjalankan perintah diatas mungkin Laravel akan bertanya apakah kita ingin membuat database baru sesuai nama yang kita pilih, dan tentu saja anda harus menjawab Ya.

Dengan ini maka ketika kita menjalankan perintah

php artisan serve

lalu kita buka localhost:8000 dari web browser kita akan disambut dengan halaman default Laravel App

yang membuktikan bahwa sistem Laravel kita telah berjalan sebagaimana mestinya.

Mempersiapkan Inertia.js

Selanjutnya kita akan menginstall Inertia. Inertia sengaja dibuat untuk dapat bekerja dengan Laravel namun sebenarnya dapat juga digunakan dengan framework lain.

Mempersiapkan Server-side

Langkah pertama adalah mengambil dependecies dengan memanfaatkan perintah Composer

composer require inertiajs/inertia-laravel

Root Template

Selanjutnya kita perlu membuat root template. Yaitu file HTML yang dimuat ketika pertama kali client mengunjungi app kita. File ini akan memuat file aset kita (CSS dan JavaScript), dan didalam file ini juga terdapat root <div> yang akan menjadi “sarang” aplikasi frontend kita.

Adapter Laravel Inertia akan mencari file bernama resources/views/app.blade.php sebagai Root Template, maka kita buat file baru tersebut lalu kita isikan demikian:

<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @vite('resources/css/app.css')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

Middleware

Selanjutnya kita persiapkan middleware Inertia dalam Laravel. Hal ini dapat dicapai dengan menerbitkan middleware HandleInertiaRequests untuk aplikasi kita, dengan cara menjalankan perintah php artisan:

php artisan inertia:middleware

Setelah middleware kita terbitkan, sekaran waktunya kita perintahkan Laravel untuk mem-bootstrap middleware ini dengan jalan kita sunting file bootstrap/app.php.

use App\Http\Middleware\HandleInertiaRequests;

->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
})

tambahkan baris diatas sesuai dengan tempatnya.

Mempersiapkan Client-side

Walau disini kita gunakan istilah “client-side” namun sesungguhnya persiapan ini dilakukan dan dijalankan dalam lingkup server juga. Lebih tepatnya kita menyiapkan kode yang bertanggung jawab mengirimkan data menuju client browser.

Mengambil Dependencies

Karena disini kita akan menggunakan Svelte sebagai frontend framework kita maka kita bisa mengambil dependencies melalui paket-paket NPM berikut:

npm install @inertiajs/svelte
npm install -D @sveltejs/vite-plugin-svelte

Kita lanjutkan dengan mengambil paket-paket NPM yang mungkin diantrekan oleh Laravel.

npm install

Mempersiapkan Laravel Asset Bundling

Laravel 11.x menggunakan Vite sebagai Asset Bundler sehingga kita harus menyunting file vite.config.js untuk mempersiapkannya:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import {svelte} from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
    plugins: [
        svelte({
            /* plugin options */
        }),
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.svelte", { eager: true });
        return pages[`./Pages/${name}.svelte`];
    },
});

Selanjutnya paket-paket NPM ini perlu di bundle supaya bisa digunakan

npm run build

Mempersiapkan App Inertia

Selanjutnya dita sunting file JavaScript utama kita, yang akan dikirimkan ke klien melalui file app.blade.php tadi, supaya bisa “menggendong” App Inertia kita.

import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
    return pages[`./Pages/${name}.svelte`]
  },
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

Mencoba membuat Response

Dengan demikian App Laravel kita sudah dapat memanfaatkan Svelte sebagai frontend framework melalui Inertia.js. Langkah selanjutnya mencoba membuat Response guna memastikan langkah-langkah yang kita buat sudah benar.

Sunting file route/web.php

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Subpage/Testpage', [
        'pageProps' => 'test page props',
    ]);
});

Dalam percobaan ini kita gunakan GET pada route “/” dan mengembalikan hasil render halaman Testpage.svelte yang terletak dalam subdirectory Subpage dengan mengumpankan page property bernama pageProps. Maka kita perlu membuat file percobaan halaman ini. Buat file baru di resources/js/Pages/Subpage/Testpage.svelte

<script>
    export let pageProps;
</script>

<div>
    {pageProps}
</div>

Sekarang kita coba jalankan server dan buka localhost:8000 dari web browser.

Kali ini kita disambut dengan halaman yang berbeda. Walau halaman ini sederhana namun adanya teks “test page props” membuktikan persiapan kita telah berhasil dan App berjalan sebagaimana mestinya. Halaman yang di muat sudah benar dan halaman tersebut sudah dapat menerima data dengan baik.

Mempersiapkan Tailwind CSS

Pertama kita install Tailwind dan dependencies-nya dengan menjalankan

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

Perintah diatas membuat beberapa file, salah satunya adalah tailwind.config.js yang dapat kita gunakan mengatur setting Tailwind. Maka mari kita sunting file ini supaya setiap file .svelte, .js dan .blade.php diproses oleh Tailwind.

/** @type {import('tailwindcss').Config} */
export default {
    content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.svelte",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

Selanjutnya kita tambahkan direktif Tailwind kedalam file app.css

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

Sekarang kita perlu membuka window command baru dan menjalankan

npm run dev

Melalui perintah ini Tailwind secara terus menerus akan memeriksa file target lalu meng-inject CSS yang diperlukan Tailwind.

Selanjutnya kita coba apakah Tailwind sudah berjalan dengan cara menyunting file Testpage.svelte kita.

<script>
    export let pageProps;
</script>

<div>
    <div class="w-full bg-slate-500">
        {pageProps}
    </div>
</div>

Kita tambahkan kelas w-full dan bg-slate-500 yang merupakan kelas bawaan Tailwind.

Sekarang teks di halaman kita memiliki warna kelabu hasil dari kelas bg-slate-500 dan melebar penuh akibat kelas w-full. Sekarang kita dapat yakin bahwa Tailwind sudah berjalan di sistem kita.

Demikianlah perjalanan kita dalam membuat, mempersiapkan, dan menata proyek Laravel 11.x dengan frontend Svelte dan Tailwind. Semoga bermanfaat.