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