Laravel Inertia React

3 min readFeb 10, 2023

Hello, this time I will share a tutorial of the Laravel PHP framework using Inertia. What is Inertia? Inertia is a small library that allows users to render Single Page Applications such as Vue, React, etc from your Laravel backend.

First, create a Laravel project using this command

composer create-project laravel/laravel laravel-inertia-react

Install Inertia Server Side

Run the composer command below to install inertia on Laravel.

composer require inertiajs/inertia-laravel

Configure Inertia Middleware

Next, we will configure Inertia middleware. Run the command below.

php artisan inertia:middleware

If the command runs successfully, it will create a file in app/Http/Middleware/HandleInertiaRequests.php.

Now you need to add the middleware on your kernel at app/Http/Kernel.php. Search the “web” item in the bottom file under “$middlewareGroups” variable, and add the below code.

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],

The setup for Inertia on the server side has been done. We will move to the next step.

Create a root view file in resource/views/app.blade.php and paste the below code.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Inertia</title>
    @viteReactRefresh
    @vite('resources/js/app.jsx')
</head>
<body>
  @inertia
</body>
</html>

This will call Javascript and CSS files and generate your react pages.

Install Inertia Client Side

Next, install Inertia React dependencies by running the code below.

npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom @vitejs/plugin-react

Now rename your app.js in the folder “resources/js” to app.jsx and update the code inside it. This step was meant to initialize Inertia app in the root of your javascript page. Add the code below.

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

import React from "react";
import {createInertiaApp} from "@inertiajs/inertia-react";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import {createRoot} from "react-dom/client";

createInertiaApp({
    resolve: (name) => resolvePageComponent(`./pages/${name}.jsx`, import.meta.glob('./pages/**/*.jsx')),
    setup({el, App, props}) {
        const root = createRoot(el)
        return root.render(<App {...props}/>);
    }
});

InertiaProgress.init({ color: "#414042" });

By adding this code, it will import all pages inside the “resources/js/pages” folder. In the future, you just need to add your page to this folder.

Now, we will create a testing page to test all the configurations we have set up. Create a page component inside “resources/js/pages” named home.js and fill it with the below code.

import React from 'react';

export default function Home() {
    return (
        <h1>
          Hello, This Is Laravel Inertia
        </h1>
    )
}

To show the page we need to create a controller and route it. Create HomeController.php in “app/controller” or you can run the command below provided by Laravel.

php artisan make:controller HomeController

After that, add a new function as the code below.

public function show() {
     return Inertia::render('home');
}

The code means will render a file with the name “home” inside pages.

Now add the routing of this controller. Add a new route in “routes/web.php” with the below code.

Route::get('/home', 'HomeController@show');

Since we are using vite, we need to configure vite for react. Change the code inside vite.config.js in root project to the code below.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

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

Finally, we can test our project by running these 2 commands in different terminals or cmd.

npm run dev

php artisan serve

Conclusion

This is the end of our tutorial for installing Inertia in Laravel. You can access the page by calling “{your-laravel-url}/home”. Hope this tutorial could help you. Thank You :)

Laravel Inertia React

Install Inertia Server Side

Configure Inertia Middleware

Install Inertia Client Side

Conclusion

Written by Putri Damayanti

No responses yet