↓ Skip to main content
Royce Chua
Royce Chua

Setting up React and InertiaJS for Laravel

·372 words·2 mins

Create new Laravel app
#

laravel new <name of app>

Install react and react-dom
#

npm install react react-dom

Install @vitejs/plugin-react
#

If you would like to build your frontend using the React framework, then you will also need to install the @vitejs/plugin-react plugin:

npm install --save-dev @vitejs/plugin-react

You may then include the plugin in your vite.config.js configuration file:

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

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
        react(),
    ],
});

Install InertiaJS
#

Server-side setup
#

Install dependencies
#

Using composer, install InertiaJS on the server

composer require inertiajs/inertia-laravel

Then rename welcome.blade.php to app.blade.php located at resources/views folder

Root template
#

Next, setup the root template that will be loaded on the first page visit to your application. This template should include your site’s CSS and JavaScript assets, along with the @inertia 1 and @inertiaHead directives.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @vite('resources/js/app.jsx')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>
Important

For React applications, it’s recommended to include the @viteReactRefresh directive before the @vite directive to enable Fast Refresh in development.

Inertia middleware
#

Next we need to setup the Inertia middleware. You can accomplish this by publishing the HandleInertiaRequests middleware to your application, which can be done using the following Artisan command.

php artisan inertia:middleware

Once the middleware has been published, append the HandleInertiaRequests middleware to the web middleware group in your application’s bootstrap/app.php file.

use App\Http\Middleware\HandleInertiaRequests;

->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
})

Client-side setup
#

Install dependencies
#

First, install the Inertia client-side adapter

npm install @inertiajs/react

Initialize the Inertia app
#

Next, update your main JavaScript file resources/js/app.js to boot your Inertia app. Rename app.js to app.jsx.

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
    return pages[`./Pages/${name}.jsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
})

Setting up Pages
#

You can now make a Pages folder under resources/js where you can route pages from inside the routes/web.php

Take note

php artisan serve should be run with npm run dev for it to work.

  1. Think of @inertia as <div id="app"></div> ↩︎

Royce Chua
Author
Royce Chua
IT Professional | Aspiring Network Engineer | Linux Enthusiast | Home Labber | Coffee & Music