Setting Up React with Inertia in a Laravel 11 Application with Breeze

In this tutorial, we will set up a new Laravel 11 application and integrate React using Inertia.js, alongside Breeze for authentication. We will also customize the dashboard with example code.

Prerequisites

Make sure you have the following installed on your machine:

PHP (>= 8.1)
Composer
Node.js (>= 14.x)
npm or Yarn

Step 1: Create a New Laravel Project

First, create a new Laravel project using Composer. Open your terminal and run:

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

Navigate into your project directory:

cd laravel-inertia-react

Step 2: Install Laravel Breeze

Next, we will install Laravel Breeze for authentication:

composer require laravel/breeze --dev
php artisan breeze:install

Now, run the migration to set up the authentication tables:

php artisan migrate

Step 3: Install Inertia.js

Now let’s add Inertia.js. Run the following command to install the necessary packages:

composer require inertiajs/inertia-lighthouse

Then, install the Inertia.js adapters for React:

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

Step 4: Set Up React

Next, install React and ReactDOM:

npm install react react-dom

Now, install the necessary npm packages for your front-end:

npm install

Step 5: Configure Inertia.js

Open app/Http/Controllers/Controller.php and extend it to use Inertia. Add the following use statement:

use Inertia\Inertia;

Next, ensure your routes are set up to use Inertia for rendering views. Check your routes in routes/web.php and use the Inertia::render() method:

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Dashboard');
});

Step 6: Create React Components

Create a new directory for your React components:

mkdir resources/js/Pages

Next, create a new file called Dashboard.jsx inside resources/js/Pages/:

// resources/js/Pages/Dashboard.jsx

import React from 'react';

const Dashboard = () => {
    return (
        <div>
            <h1>Dashboard</h1>
            <p>Welcome to your dashboard!</p>
        </div>
    );
}

export default Dashboard;

Step 7: Set Up Inertia’s Entry Point

Update your resources/js/app.js to set up the Inertia app:

// resources/js/app.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from '@inertiajs/inertia-react';
import { InertiaApp } from '@inertiajs/inertia-react';

const app = document.getElementById('app');

if (app) {
    const root = createRoot(app);
    root.render(
        <InertiaApp
            initialPage={JSON.parse(app.dataset.page)}
            resolveComponent={(name) => import(`./Pages/${name}`).then(module => module.default)}
        />
    );
}

Step 8: Modify Your Layout

Go to your resources/views/layouts/app.blade.php file to ensure it prepares the Inertia view correctly:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title inertia>{{ config('app.name', 'Laravel') }}</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <div id="app" data-page="{{ json_encode($page) }}"></div>
    <script src="{{ mix('js/app.js') }}" defer></script>
</body>
</html>

Step 9: Customize the Dashboard

You can now customize the dashboard by adding more components and styles as needed. For example, let’s modify the Dashboard.jsx to include a simple user greeting and a custom button:

// resources/js/Pages/Dashboard.jsx

import React from 'react';

const Dashboard = () => {
    return (
        <div className="container">
            <h1 className="text-2xl font-bold">Dashboard</h1>
            <p>Welcome to your dashboard!</p>
            <button className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">View Profile</button>
        </div>
    );
}

export default Dashboard;

Step 10: Compile Assets

After all changes, compile your assets using:

npm run dev

Step 11: Run the Application

Now, you can run your Laravel application:

php artisan serve

Visit http://localhost:8000 in your browser. You should see your React dashboard rendered using Inertia.

Conclusion

You have successfully set up a Laravel 11 application with Inertia.js and React, using Breeze for authentication. You can further customize your dashboard by adding more components, routes, and logic as needed. Happy coding!

Avinash Tirumala