Tutorial Laravel, Inertia.js & React.js #3 : Installasi & Konfigurasi Inertia.js "client-side"

• Langkah 1 - Installasi Inertia Client Side di Laravel
• Langkah 2 - Konfigurasi dan Inisialisasi App
• Langkah 3 - Konfigurasi Vite
• Langkah 4 - Melakukan Proses Compiling (Vite)

Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara melakukan installasi dan konfigurasi Inertia.js di dalam Laravel secara server side. Dan sekarang kita semua akan belajar bagaimana cara melakukan installasi dan konfigurasi Inertia.js secara client side.

Langkah 1 - Installasi Inertia Client Side di Laravel

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.

npm install

npm install @inertiajs/react@2.2.19

npm install react@19.2.1 react-dom@19.2.1

npm install @vitejs/plugin-react@5.1.1

Silahkan tunggu proses installasi-nya sampai selesai dan pastikan teman-teman terhubung dengan internet.

Dan untuk memastikan apakah sudah berhasil terinstall, kita bisa buka file package.json dan lihat di bagian dependencies, kurang lebih seperti berikut ini :

"dependencies": {
	"@inertiajs/react": "^2.2.19",
	"@vitejs/plugin-react": "^5.1.1",
	"react": "^19.2.1",
	"react-dom": "^19.2.1"
}

Langkah 2 - Konfigurasi dan Inisialisasi App

Sekarang silahkan rename file resources/js/app.js menjadi resources/js/app.jsx, kemudian masukkan kode berikut ini di dalamnya.

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} />)
    },
})

Setalah berhasil melakukan inisialisasi, sekarang kita harus menambahkan sebuah folder baru agar proses compiling tidak terjadi error, silahkan buat folder baru dengan nama Pages di dalam folder resources/js.

Langkah 3 - Konfigurasi Vite

Sekarang, silahkan buka file vite.config.js, kemudian ubah kode-nya menjadi seperti berikut 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(),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
});

Langkah 4 - Melakukan Proses Compiling (Vite)

Silahkan buka file .env, kemudian cari kode berikut ini.

APP_URL=http://localhost

Dan ubah menjadi seperti berikut ini.

APP_URL=http://localhost:8000

Sekarang, kita akan melakukan compiling asset dengan Vite. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Laravel-nya.

npm run dev

Jika berhasil, maka vite akan berjalan dan otomatis melakukan compiling asset jika ada perubahan di dalam file resources/js.

INFORMASI PENTING : saat proses development, jangan pernah mematikan proses Vite di atas. Karena Vite akan otomatis melakukan compiling ketika terdapat perubahan.

Sampai disini pembahasan kita bagaimana cara melakukan installasi dan konfigurasi Inertia.js secara client side di dalam Laravel beserta Vite.

Di artikel selanjutnya kita semua akan belajar bagaimana cara menampilkan data dari database di dalam React.js menggunakan Inertia.js.

Terima Kasih

• Membangun Aplikasi Kasir (Point of Sales) dengan Laravel, Inertia.js dan Vue.js
• Membangun Aplikasi Ujian Online (CBT) Dengan Laravel, Inertia.js & Vue.js
• Membangun Website Toko Online Dengan Laravel, Inertia.js & React.js