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


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Laravel, Inertia.js & React.js #3 : Installasi & Konfigurasi Inertia.js "client-side"

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/inertia@0.11.0
npm install @inertiajs/inertia-react@0.8.1
npm install @inertiajs/progress@0.2.7
npm install react@17.0.2 react-dom@17.0.2

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/inertia": "^0.11.0",
    "@inertiajs/inertia-react": "^0.8.1",
    "@inertiajs/progress": "^0.2.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
}

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 React from 'react';
import { render } from 'react-dom';
import { createInertiaApp } from '@inertiajs/inertia-react';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});

InertiaProgress.init();

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';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
});

Langkah 4 - Melakukan Proses Compiling (Vite)

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



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami