Halo teman-teman semuanya, sekarang kita akan lanjutkan belajar bagaimana melakukan installasi dan konfigurasi Inertia.js "server-side" di dalam project Laravel. Konsepnya untuk menggunakan Inertia.js di dalam Laravel kita harus melakukan 2 konfiguras, yaitu secara "server-side" dan "client-side".
Langkah 1 - Installasi Dependensi
Sekarang kita akan belajar bagaimana cara melakukan installasi Inertia "server-side" adapter, silahkan jalankan perintah berikut ini di dalam terminal/CMD :
composer require inertiajs/inertia-laravel
Silahkan tunggu proses installasinya sampai selesai.
Langkah 2 - Menambahkan Root Template
Selanjutnya, kita akan membuat sebuah layout atau root template dimana halaman ini akan di akses pertama kali saat website dijalankan. Di dalam file ini kita akan menambahkan file-file CSS dan JavaScript dari hasil compile.
Silahkan buat file baru dengan nama app.blade.php di dalam folder resources/views dan di dalam file tersebut silahkan tambahkan 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>
Langkah 3 - Setup Middleware
Selanjutnya kita akan melakukan publish dan konfigurasi Middleware dair Inertia.js, silahkan jalankan perintah berikut ini di dalam terminal/CMD :
php artisan inertia:middleware
Jika perintah di atas berhasil dijalanakan, maka kita akan mendapatkan 1 file Middleware baru dari Inertia yang berada di dalam folder app/Http/Middleware/handleInertiaRequest.php.
Setelah file Middleware berhasil dibuat, maka sekarang kita akan lanjutkan untuk melakukan register Midlleware tersebut di dalam Kernel. 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,
],
Jika ditulis dengan lengkap kurang lebih seperti berikut ini :
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
// \Illuminate\Session\Middleware\AuthenticateSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\App\Http\Middleware\HandleInertiaRequests::class, // <-- inertia middleware
],
'api' => [
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
];
Langkah 4 - Konfigurasi Shared Data
Disini kita akan menambahkan sebuah konfigurasi tambahan agar kita dapat menggunakan session flash di Inertia.js, sekarang 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 ubah menjadi seperti berikut ini :
public function share(Request $request)
{
return array_merge(parent::share($request), [
'flash' => [
'message' => fn () => $request->session()->get('message')
],
]);
}
Di atas, kita menambahkan key flash yang isinya adalah sebuah request session message, nantinya akan kita gunakan untuk menampilkan flash data/alert.
Sampai disini cara bagaimana installasi dan konfigurasi Inertia.js "server-side", di artikel selanjutnya kita akan belajar bagaimana cara melakukan installasi dan konfigurasi Inertia.js disisi "client-side".
Terima Kasih