Inertia.js dengan Laravel 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.

4 min read

Published on 04 Jul, 2022 (updated: 25 Nov, 2022)

Written by Irsyad A. Panjaitan

Fill in LaravelViteInertia

ArticlesInertia.js dengan Laravel 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

bashCopy

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

composer require inertiajs/inertia-laravel

bashCopy

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

npm install

bashCopy

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

bashCopy

Kemudian, jika Anda ingin react maka Anda bisa lakukan

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

bashCopy

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

jsCopy

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

bashCopy

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

jsCopy

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:[email protected];600;700&display=swap">
        {{-- @routes --}}
        @viteReactRefresh
        @vite('resources/js/app.jsx')
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

htmlCopy

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

bashCopy

Maka Anda bisa menghilangkan komentar untuk directive itu seperti:

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

<!-- After -->
@routes

bladeCopy

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

php artisan inertia:middleware

bashCopy

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

bashCopy

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

phpCopy

Buka HomeController.php dan buat return inertia seperti:

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

phpCopy

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

bashCopy

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

jsxCopy

Jika sudah, Anda bisa run sekarang aplikasi nya dengan

php artisan serve

bashCopy

Kemudian buka tab baru, dan jalankan vite nya dengan cara

npm run dev

bashCopy

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

phpCopy

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

jsxCopy

Harusnya sekarang sudah jelas bahwa yang tampil adalah

Laravel

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

bashCopy

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.
Sponsor Saweria
7

Share on

Ready to binge

Laravel 8 Dari AwalBelajar Tailwind CSS 3Test Driven Laravel - TDDBelajar Laravel Queues Dari AwalMari Kita Belajar Basic React JSDatatable Dengan Laravel InertiaRealtime Dengan Laravel Echo & PusherMembangun Toko Online Dengan Payment GatewayMore
Parsinta is a online learning platform intended for web developers.Through series-series such as Laravel, Reactjs, Vuejs, InertiaJs, HTML, Bootstrap, Tailwind CSS, and more.

Parsinta is a Trademark of Irsyad A. Panjaitan.

© Copyright 2022 Parsinta. All rights reserved. Yes, all of them (EC00202255558).