Dapatkan diskon up to 40% untuk pembelian di bulan Ramadhan.

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.

5 min read

Published on 27 Sep, 2021 (updated: 23 Sep, 2022)

Written by Irsyad A. Panjaitan

ArticlesLaravel 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.

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

bashCopy

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

bashCopy

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

php artisan inertia:middleware

bashCopy

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,
	    ...
	],

phpCopy

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>

htmlCopy

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

jsCopy

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

jsxCopy

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

jsCopy

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

jsCopy

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

phpCopy

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

bashCopy

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

yarn add -D @babel/preset-react @pmmmwh/[email protected]^0.5.0-rc.0 react-refresh

bashCopy

Setelah itu, silahkan jalankan hot script seperti berikut.

yarn dev && yarn hot

bashCopy

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

bashCopy

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

bashCopy

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 [email protected] [email protected] [email protected] postcss-import && npx tailwind init

bashCopy

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

jsCopy

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

cssCopy

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>

htmlCopy

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>

jsxCopy

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

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