Senin, 04 July 2022

Penggunaan Inertia.js dengan Laravel Vite: Panduan Lengkap

Karena laravel sekarang by default sudah menggunakan Vite, maka kita akan belajar bagaimana mengintegrasikan nya dengan Inertia.js. Dan kita akan mulai dari awal pastinya dari instalasi laravel.

Laravel
Inertia
Vite

Karena laravel sekarang by default sudah menggunakan Vite, maka kita akan belajar bagaimana mengintegrasikan nya dengan Inertia.js. Dan kita akan mulai dari awal pastinya dari instalasi laravel.

laravel new vite-inertia

Jika sudah, silakan cd ke vite-inertia dan lakukan instalasi untuk inertiajs/inertia-laravel seperti:

composer require inertiajs/inertia-laravel

Setelah itu, silakan instal semua node package yang ada by default dengan menjalankan perintah berikut:

npm install

Jika sudah, sekarang Anda bisa memilih client-side yang Anda inginkan, jika Anda ingin Vue, maka Anda bisa lakukan perintah seperti:

npm install @inertiajs/inertia @inertiajs/inertia-vue3

Kemudian, jika Anda ingin react maka Anda bisa lakukan

npm install @inertiajs/inertia @inertiajs/inertia-react [email protected] [email protected] @inertiajs/progress

Dalam tutorial ini saya akan mencontohkan dengan menggunakan react ya. Jika sudah, sekarang Anda bisa buka file vite.config.js yang di dalam root directory. Dan silakan replace dengan script berikut:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

Disini kita mengarahkan ada folder resources/js/app.jsx, sehingga Anda harus memastikan bahwa file tersebut ada, harusnya file tersebut ada. Namun tidak berekstensi .jsx melainkan .js seperti:

resources/js
├── app.js
└── bootstrap.js

Silakan rename app.js menjadi app.jsx. Jika sudah, pada file tersebut harusnya yang ada saat ini hanyalah import './bootstrap';, maka sekarang silahkan replace itu dengan

import './bootstrap';
import '../css/app.css';

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

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

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

InertiaProgress.init({ color: '#4B5563' });

Perhatikan, disini kita langsung melakukan impor untuk css nya, sehingga nanti kita tidak perlu memasukkannya pada file blade nya.

Jika sudah, sekarang Anda bisa rename welcome.blade.php menjadi app.blade.php dan masukkan markup seperti berikut:

<!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>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
        {{-- @routes --}}
        @viteReactRefresh
        @vite('resources/js/app.jsx')
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

Disini saya sengaja beri komentar untuk directive @routes hanya karena kita belum install packagenya. Dan Anda tahu, bahwa sebenarnya juga itu pilihan. Jika Anda tidak ingin memakai fungsi route pada jsx maka jangan install itu. Tetapi jika Anda tetap ingin memakai nya, Anda bisa lakukan instalasi seperti:

composer require tightenco/ziggy

Maka Anda bisa menghilangkan komentar untuk directive itu seperti:

<!-- Before -->
{{-- @routes --}}

<!-- After -->
@routes

Sekarang, Anda bisa generasi middleware yang diberikan inertia dengan cara:

php artisan inertia:middleware

Anda bisa melihat file itu di app/Http/Middleware/HandleInertiaRequests.php.

Sekarang, Anda bisa buat 1 controller dengan nama HomeController

php artisan make:controller HomeController -i

Setelah itu, buat route untuk pergi ke sana, buka routes/web.php dan masukkan route nya seperti:

use Illuminate\Support\Facades\Route;

Route::get('/', \App\Http\Controllers\HomeController::class);

Buka HomeController.php dan buat return inertia seperti:

class HomeController extends Controller
{
    public function __invoke()
    {
        return inertia('Home');
    }
}

Sekarang, silakan buat folder Pages di dalam resources/js dan di dalamnya buat file Home.jsx.

resources/js
├── Pages
│   └── Home.jsx
├── app.jsx
└── bootstrap.js

Buka Home.jsx dan masukkan script seperti berikut:

import React from 'react'

export default function Home() {
  return (
    <div>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Laborum repudiandae quibusdam ipsam in!</p>
    </div>
  )
}

Jika sudah, Anda bisa run sekarang aplikasi nya dengan

php artisan serve

Kemudian buka tab baru, dan jalankan vite nya dengan cara

npm run dev

Sekarang Anda bisa buka di browser http://127.0.0.1:8000.

Sekarang mari kita coba untuk passing data dari controller ke dalam react nya. Buka HomeController.

return inertia('Home', [
    'user' => [
        'name' => 'Irsyad A. Panjaitan',
        'username' => 'irsyadadl'
    ],
    'app_name' => config('app.name'),
]);

Buka Home.jsx dan silakan replace yang tadi dengan ini.

import React from 'react';

export default function Home({ user, app_name }) {
    return (
        <div>
            <h1>{app_name}</h1>
            <p>
                My name is {user.name} you can follow me on twitter: @{user.username}
            </p>
        </div>
    );
}

Harusnya sekarang sudah jelas bahwa yang tampil adalah

Laravel

My name is Irsyad A. Panjaitan you can follow me on twitter: @irsyadadl

Jika sudah, berarti Anda sudah berhasil menggunakan inertia dengan vite.

Jika Anda ingin melihat bagaimana integrasi dengan Tailwind CSS, Anda bisa lihat itu disini. Dan jika Anda ingin source code nya, Anda bisa fork project ini di github.

Semoga artikel ini bermanfaat, see you next time.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

Irsyad A. PanjaitanGo to Irsyad A. Panjaitan profile

Follow me on