Prasyarat

Pastikan sudah terinstall: PHP 8.2+, Composer, Node.js 20+, dan database (MySQL atau SQLite untuk development).

Langkah 1: Buat Project Laravel Baru

composer create-project laravel/laravel khalimapp
cd khalimapp

Langkah 2: Install Inertia.js (Server Side)

composer require inertiajs/inertia-laravel

Publish middleware:

php artisan inertia:middleware

Daftarkan middleware di bootstrap/app.php:

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

Langkah 3: Install Inertia.js + React (Client Side)

npm install @inertiajs/react react react-dom
npm install -D @vitejs/plugin-react

Langkah 4: Konfigurasi Vite

Update vite.config.js:

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(),
  ],
});

Langkah 5: Setup Entry Point

Ganti isi resources/js/app.jsx:

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();
  },
});

Langkah 6: Buat Halaman Pertama

Buat file resources/js/Pages/Home.jsx:

export default function Home({ greeting }) {
  return 
{greeting}
;
}

Tambahkan route di routes/web.php:

Route::get("/", fn() => inertia("Home", ["greeting" => "Halo dari Laravel + Inertia!"]));

Langkah 7: Jalankan

php artisan serve
npm run dev

Buka http://localhost:8000 dan lihat hasilnya!

Penutup

Stack Laravel + Inertia + React adalah salah satu kombinasi paling produktif saat ini. Kamu mendapat DX React di frontend tanpa perlu membangun API terpisah.