Halo teman-teman semuanya, di artikel kali ini kita akan belajar melakukan installasi Inertia.js "server-side" di dalam project Laravel. Karena untuk menggunakan Inertia.js kita harus melakukan 2 konfigurasi, yaitu konsigurasi secara "server-side" dan "client-side". Untuk konfigurasi "client-side" akan kita bahas di artikel selanjutnya.
Langkah 1 - Installasi Inertia.js "server-side"
Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Laravelnya.
composer require inertiajs/inertia-laravel:0.5.4
Silahkan tunggu proses installasi package Inertia.js sampai selesai. Dan pastikan komputer terhubung dengan internet, karena package akan diunduh secara online.
Langkah 2 - Konfigurasi Root Template
Inertia.js membutuhkan sebuah root template, dimana template ini yang berisikan file-file dari CSS dan JavaScript tambahan. Silahkan buat file baru dengan nama app.blade.php di dalam folder resources/views dan di dalam file app.blade.php tersebut, silahkan masukkan kode berikut ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}" defer></script>
<style>
body {
background-color: lightgray
}
</style>
</head>
<body>
@inertia
</body>
</html>
Di atas, kita menambahkan template sederhana dengan CSS Bootstrap yang diambil secara online / CDN. Dan perhatikan pada kode @inertia di atas. Kode tersebutlah yang akan digunakan untuk merender halaman view/frontend nantinya.
Langkah 3 - Publish Middleware
Kita lanjutkan untuk melakukan publish dan register middleware Inertia.js di dalam Laravel. Middleware ini bisa kita menfaatkan untuk membuat custom data yang akan dikirimkan dari backend ke frontend.
Silahkan jalankan perintah berikut ini di dalam terminal/CMD :
php artisan inertia:middleware
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file baru dengan nama handleInertiaRequest.php yang berada di dalam folder app/Http/Middleware.
Setelah middleware tersebut berhasil dipublish, sekarang kita lanjutkan untuk melakukan register di dalam Kernel. Tujuannya agar si middleware tersebut dapat digunakan secara global di dalam Laravel.
Silahkan buka file app/Http/Kernel.php, kemudian tambahkan kode berikut ini di dalam $middlewareGroups dan di dalam array web.
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],
Langkah 4 - Konfigurasi Shared Data
Kita lanjutkan untuk menambahkan custom shared data di dalam middleware Inertia.js, dimana kita akan membuat konfigurasi untuk session flash agar bisa dibaca di Inertia.js.
Silahkan buka file app/Http/Middleware/handleInertiaRequest.php, kemudian cari kode berikut ini :
public function share(Request $request)
{
return array_merge(parent::share($request), [
//
]);
}
Dan ubahlah menjadi seperti berikut ini :
public function share(Request $request): array
{
return array_merge(parent::share($request), [
//session flash
'session' => [
'status' => fn () => $request->session()->get('status')
],
//user authenticated
'auth' => [
'user' => fn () => $request->user() ? $request->user() : null,
],
]);
}
Di atas, kita menambahkan array session dengan key status, dimana isinya akan mengambil sebuah request session yang bernama status.
Dan array auth, yang berisi key user dengan informasi data user yang sedang login.
Sampai disini pembahasan bagaimana cara melakukan installasi dan konfigurasi Inertia.js "server-side" di dalam project Laravel. Di artikel selanjutnya kita akan belajar untuk melakukan konfigurasi "client-side".
Terima Kasih