Kecuali Anda adalah seorang fullstack developer keras kepala yang masih menggunakan jQuery atau MooTools sebagai pilihan untuk frontend aplikasi Anda di tahun 2024 ini, maka besar kemungkinan Anda sudah mengikuti arus pasar dengan mengadopsi salah satu dari 4 frontend frameworks terbesar (React, Vue, Angular, & Svelte). Dengan bergesernya paradigma pengembangan aplikasi, salah satu tantangan terbesar bagi fullstack developer saat ini adalah mengelola source code aplikasi. Umumnya, untuk satu aplikasi bisa dipastikan minimal ada repositori untuk menampung source code yang berkaitan dengan frontend yang menangani user interface, dan satu lagi untuk backend yang menangani penyediaan data dan business logic melalui API. Bagi fullstack developer yang bekerja secara individu, tentu ini merepotkan.

Yes, I know, dengan adanya Nodejs, sekarang sudah banyak JS frameworks yang mampu handle (hampir) semua fungsionalitas pada sebuah aplikasi seperti Next.js, Remix, Nuxt, dsb. Namun, untuk beberapa developer yang memilih untuk tetap menggunakan teknologi backend tradisional tapi ingin menjajal frontend frameworks di atas, maka mau tidak mau harus menggunakan opsi dua repositori tadi.

Bagi Anda yang senang membuat aplikasi dengan Laravel dan memilih React sebagai mazhab keyakinan frontend Anda, maka tulisan ini cocok untuk Anda. Di sini saya akan menjelaskan langkah-langkah membangun fondasi fullstack application menggunakan Laravel sebagai backend dan React sebagai frontend, dengan hanya satu repositori untuk menampung seluruh source code untuk backend & frontend. Yep, you heard that right. Kita akan akan membangun fondasi fullstack application dengan menggunakan old-but-popular PHP framework dan modern JS framework, namun tetap beriman pada arsitektur monolitik.

Untuk mewujudkannya, cukup dengan menambah satu tool, yaitu Inertia. Tool ini merupakan jembatan penghubung antara server-side dan client-side framework. Dalam situsnya, Inertia dapat bekerja dengan 3 client-side frameworks, yaitu React, Vue, dan Svelte dan bisa digunakan bersama teknologi server-side apapun, namun tool ini bekerja secara optimal dengan Laravel karena didukung resmi oleh Laravel itu sendiri. Karena dukungan resmi tersebut, maka opsi frontend dengan Inertia masuk ke dalam dokumentasi Laravel, bahkan secara default, dokumentasi Inertia menjelaskan bagaimana integrasi dengan Laravel.

So, why bother writing this article, anyway? Jadi, meskipun kedua dokumentasi sudah menjelaskan bagaimana cara mengintegrasikan Laravel dengan client-side frameworks, namun saya merasa kedua dokumentasi tersebut ditulis dengan kurang runut dan jelas. Bahkan ada beberapa konfigurasi tidak dapat bekerja ketika dicoba. Jadi saya mencoba merangkum langkah demi langkah untuk integrasi Laravel dengan React menggunakan Inertia versi saya sendiri.

Langkah pertama tentu dengan membuat project baru dengan Laravel pada direktori yang sudah Anda buat sebelumnya.

composer create-project laravel/laravel .

Setelah itu, Anda bisa meng-install library Inertia untuk Laravel:

composer require inertiajs/inertia-laravel

Ada beberapa penyesuaian yang harus dilakukan setelah melakukan langkah di atas. Pertama, buat middleware untuk Inertia dengan perintah di bawah ini:

php artisan inertia:middleware

Kemudian, daftarkan middleware yang baru dibuat tersebut ke App\Http\Kernel di baris terakhir pada grup middleware web.

\App\Http\Middleware\HandleInertiaRequests::class,

Setelah itu, ubah isi file app.blade.php pada direktori resources menjadi seperti di bawah ini:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @viteReactRefresh
        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

Kelar mengatur setup di backend, maka kita beralih ke frontend. Jalankan perintah di bawah untuk meng-install React dan adapter Inertia untuk React.

npm install react react-dom @inertiajs/react

Di direktori resources/js, ubah nama file app.js menjadi app.jsx lalu ubah isinya menjadi seperti di bawah ini:

```
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

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

Kemudian, ubah setting pada vite.config.js menjadi seperti di bawah ini:

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',
            refresh: true,
        }),
        react(),
    ],
});

And we’re done. Jadi seperti itulah kira-kira konfigurasi yang diperlukan ketika ingin menggunakan React dengan Inertia pada Laravel. Selanjutnya, kita tinggal memperlakukan file jsx pada direktori resources/js seperti halnya templates file seperti Blade PHP. Jadi kita bisa memprogram backend dan frontend di satu tempat yang sama.

Fun fact!!!

Sebenarnya tips di atas bisa kita persingkat hanya dengan menjalankan langkah-langkah berikut. Pertama, buat project Laravel:

composer create-project laravel/laravel .

Lalu, install Laravel Breeze yang merupakan implementasi autentikasi bawaan dari Laravel.

composer require laravel/breeze --dev
php artisan breeze:install

Ketika menjalankan perintah di atas, maka akan ada beberapa opsi yang harus Anda pilih. Pastikan untuk memilih react pada pertanyaan Breeze stack yang akan di-install.

Jika Anda sudah membuat setup untuk database aplikasi Laravel Anda, maka tinggal jalankan perintah di bawah ini untuk menuntaskan konfigurasinya.

php artisan migrate
npm install
npm run dev

Dengan begitu, Anda sudah dapat menggunakan React pada aplikasi Laravel Anda yang sudah dilengkapi dengan fitur autentikasi bawaan dari Laravel. Kalau begitu, jadi uraian tutorial konfigurasi di awal jadi percuma, dong? Tergantung. Jika Anda ingin membuat aplikasi Laravel & React yang praktis dengan sekaligus implementasi autentikasinya, maka meng-install Laravel Breeze adalah solusi yang masuk akal. Namun, jika Anda hanya butuh konfigurasi Inertia untuk menyambungkan React dengan aplikasi Laravel Anda, tanpa perlu ada fitur autentikasi bawaan, maka konfigurasi di atas lebih sesuai. Jadi, pilihan tetap ada di tangan Anda selaku developer-nya.

Happy coding!!!