Senin, 27 September 2021

Mengintegrasikan Laravel Inertia dengan Hot Reload

Jika Anda sudah terbiasa menggunakan Vuejs / Reactjs, pastinya akan sangat familiar dengan yang namanya hot reload, nah jika kita menggunakan inertia didalam Laravel, kita tidak akan mendapatkan itu by default, tetapi, kita bisa setup semua itu dari awal.

Jika Anda sudah terbiasa menggunakan Vuejs / Reactjs, pastinya akan sangat familiar dengan yang namanya hot reload, nah jika kita menggunakan inertia didalam Laravel, kita tidak akan mendapatkan itu by default, tetapi, kita bisa setup semua itu dari awal.

Disini kita tidak akan menggunakan yang namanya browserSync. Karena jika kita menggunakan browserSync, browser akan otomatis refresh jika kita sudah selesai memperbarui file. Sudah pasti yang kita inginkan bukan seperti itu, kita mau file yang kita ganti otomatis berubah tanpa refresh. Itulah yang disebut dengan hot reload.

Yang paling pertama, silahkan lakukan instalasi laravel nya.

laravel new inertia

Jika sudah silahkan masuk ke dalam inertia dengan cara cd inertia. Selanjutnya, silahkan lakukan instalasi package untuk inertia itu sendiri seperti berikut.

composer require inertiajs/inertia-laravel

Setelah itu, silahkan lakukan generasi middleware dengan cara menjalankan artisan command seperti berikut.

php artisan inertia:middleware

Jika sudah, silahkan buka Kernel.php untuk mendaftarkan HandleInertiaRequests middleware nya. Buka file App\Http\Kernel dan masukkan tepat didalam middlewareGroups seperti berikut.

protected $middlewareGroups = [
	'web' => [
	    \App\Http\Middleware\HandleInertiaRequests::class,
	    ...
	],

Jika sudah, sekarang silahkan buat satu file dengan nama app.blade.php dalam resources/views, didalamnya file tersebut, silahkan include js dan initial dari inertianya seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title inertia>Laravel Inertia</title>
    <!-- <link href="{{ mix('/css/app.css') }}" rel="stylesheet" /> -->
    <script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>
    @inertia
</body>
</html>

Jika sudah, silahkan buka file app.js yang ada di resources/js dan buat intial untuk client nya seperti berikut.

import React from 'react';
import { render } from 'react-dom';
import { createInertiaApp } from '@inertiajs/inertia-react';

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props }) {
        render(<App {...props} />, el);
    },
});

Sudah pasti, jika kita lihat script di atas, dia meminta untuk membuat satu folder didalam resources/js dengan nama Pages, maka sekarang silahkan buat foldernya, dan didalamnya silahkan buat satu file untuk contoh saja dengan nama Home.js dan buat boilerplate reactjs, oh ia, disini saya menjelaskan dengan inertia-react, bukan vue, makanya saya suruh buat Home.js bukan Home.vue.

import React from 'react'

export default function Home() {
    return (
        <div>
            Home
        </div>
    )
}

Jika sudah, silahkan buat satu file tepat pada root directory dengan nama webpack.config.js, didalamnya buat seperti ini.

const path = require('path');
module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
    output: {
        chunkFilename: 'js/[name].js?id=[chunkhash]',
    },
    devServer: {
        allowedHosts: 'all',
    },
};

Setelah itu silahkan buka webpack.mix.js dan pastinya masih di directory yang sama yaitu root directory. Silahkan include app.js dan juga webpack.config.js yang baru saja kita buat seperti berikut.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .react()
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

Setelah itu, silahkan buka web.php yang ada pada folder routes, silahkan buat satu route untuk menuju Home.js tersebut seperti berikut.

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', fn () => inertia('Home'));

Jika sudah, buka kembali terminal Anda dan lakukan instalasi react dan inertiajs nya seperti berikut.

yarn && yarn add react react-dom @inertiajs/inertia @inertiajs/inertia-react

Setelah itu, silahkan lakukan instalasi untuk react-refresh dan lain-lain seperti berikut.

yarn add -D @babel/preset-react @pmmmwh/react-refresh-webpack-plugin@^0.5.0-rc.0 react-refresh

Setelah itu, silahkan jalankan hot script seperti berikut.

yarn dev && yarn hot

Disini, kita awali dengan yarn dev, itu untuk diawal saja, selanjutnya, jika Anda ingin lanjut kerja, tidak perlu lagi memakai dev juga gak masalah, langsung aja yarn hot.

Jika semua sudah setup, silahkan buka tab baru di terminal Anda, dan lakukan artisan dev server seperti berikut.

php artisan serve

Maka harusnya dia akan memberikan Anda output seperti berikut.

Starting Laravel development server: http://127.0.0.1:8000
[Mon Sep 27 18:50:08 2021] PHP 8.0.10 Development Server (http://127.0.0.1:8000) started

Jika sudah, silahkan buka dibrowser dengan alamat yang diberikan http://127.0.0.1:8000

Harusnya sekarang yang muncul adalah tulisan Home. Dan sekarang buka kembali Home.js dan silahkan edit untuk melihat perubahannya.

Untuk setup laravel inertia dan hot reload sudah selesai. Tapi ingat, Anda belum melakukan setup untuk desain nya, karena jika Anda ingat, kita tidak ada eksekusi file css pada webpack.mix.js.

Baik, pada contoh kali ini, saya akan memasukkan tailwindcss kedalam project kita ini. ctrl + c untuk stop yarn hot nya, kemudian lakukan instalasi tailwindcss dan beberapa requirementnya seperti berikut.

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-import && npx tailwind init

Setelah itu, buka kembali file webpack.mix.js dan masukkan css nya seperti berikut.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .react()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
    mix.version();
}

Jika sudah, silahkan buka file app.css pada folder resources/css dan inisialisasi tailwind nya seperti berikut.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Jika sudah, silahkan hapus komentar pada app.blade.php seperti berikut.

<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/app.js') }}" defer></script>

Jika sudah, buka kembali terminal Anda dan jalankan kembali yarn hot. Setelah itu, buka kembali Home.js Anda, dan coba tambahkan class pada div yang ada didalamnya.

<div className="bg-red-500 min-h-screen">
    Home
</div>

Jika Anda buka browser dan background sudah berubah menjadi merah, itu artinya Anda sudah berhasil menggunakan tailwind css nya.

Jika Anda tertarik untuk mempelajari Laravel Inertia lebih jauh, Anda bisa lihat disini.

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