Installing Inertia - React in Laravel Project

Inertia ships with official server-side adapters for Laravel. In this article, we will install Inertia.js in Laravel with React.js.

First, we will perform server-side installation and then continue with the client-side installation.

Step 1 - Install the Inertia package in your Laravel project

Run the command below to install the Inertia package in your project via composer:

composer require inertiajs/inertia-laravel

Step 2 - Add root template

Create a new file, app.blade.php in resources/views and paste the below code. This file will be loaded on the first page visit. This will be used to load your site assets (CSS and JavaScript), and will also contain a root <div> to boot your JavaScript application in.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale-1.0, maximum-scale=1.0" />
        <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
        <script src="{{ mix('/js/app.js') }}" defer></script>
    </head>
    <body>
        @inertia
    </body>
</html>

Step 3 - Setup Middleware

Next, set up the Inertia middleware. Run the below command to do the same. php artisan inertia:middleware

Once generated, register the HandleInertiaRequests middleware in your App\\Http\\Kernel, as the last item in your web middleware group.

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

Now, our server-side installation is done.

Next, we will perform the client-side installation.

Step 4 - Install client-side dependencies

Install the Inertia client-side adapters using NPM or Yarn.

npm install @inertiajs/inertia @inertiajs/inertia-react

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

Step 5 - Initialize the app

Next, update your main JavaScript file app.js in resources/js/app.js. If you have existing app.js in that folder, rename the old file, create a new app.js, and write the below code in that file. What we're doing here is initializing the client-side framework with the base Inertia component.

import React from "react";
import { render } from "react-dom";
import { createinertiaApp } from "@inertiajs/inertia-react";

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

Step 6 - Install Babel plugins

Why do we need Babel? Code splitting breaks apart the various pages of your application into smaller bundles, which are then loaded on demand when visiting new pages. This can significantly reduce the size of the initial JavaScript bundle, improving the time first to render. To use code splitting with Inertia, you'll need to enable dynamic imports. That’s why you'll need a Babel plugin to make this work.

Run the below commands to install the babel plugins:

npm install @babel/plugin-syntax-dynamic-import 
yarn add @babel/plugin-syntax-dynamic-import

Next, create a new file .babelrc in your project and add the following code.

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Step 7 - Create a Test.js component

Now, create a new Test.js component in resources/js/Pages for testing if our integration is successful.

import React from 'react';
import { Head } from '@inertiajs/inertia-react';

export default function Test() {
    return (
        <h1>Welcome</h1>
    )
}

Step 8 - Make controller and route

To render the component, make TestController and add a new route in web.php.

<?php 

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia; 

class TestController extends Controller 
{
    public function show() {
        return Inertia::render('Test');
    }
}

Route::group([
    "middleware" => ["auth"],
], function(){
    Route::get('/test', 'TestController@show');
});

Conclusion

That’s it. Try to call the route project_url/test, and your inertia with React in Laravel integration is done. Hope you found this article helpful.

Installing Inertia - React in Laravel Project

Comments

More from this blog

OpenClaw.ai — Your Personal AI That Actually Does Things

Exploring Anti-Design Through a Neo-Brutalist Product Experience

Building a Self-Healing CI/CD System with an AI Agent

Building an Autonomous Multi-Agent Fraud Detection System in Under 200ms

A Real-Time AI Fraud Decision Engine Under 50ms

Step 1 - Install the Inertia package in your Laravel project

Step 2 - Add root template

Step 3 - Setup Middleware

Step 4 - Install client-side dependencies

Step 5 - Initialize the app

Step 6 - Install Babel plugins

Step 7 - Create a Test.js component

Step 8 - Make controller and route

Conclusion

Command Palette

Comments

More from this blog

Step 1 - Install the Inertia package in your Laravel project

Step 2 - Add root template

Step 3 - Setup Middleware

Step 4 - Install client-side dependencies

Step 5 - Initialize the app

Step 6 - Install Babel plugins

Step 7 - Create a Test.js component

Step 8 - Make controller and route

Conclusion