back buttonback button mobile

How to setup Inertia with React and Vite on Laravel?

2023-11-26

Setting up a Laravel Inertia Project with React can be quite a challenge, especially if you’re new to it. I know because I’ve been there too! But don’t worry, I’m here to help. I encountered a lot of issues along the way, but I managed to figure it out and create a boilerplate repository that you can use to get started. I’m happy to share my setup process with you, so you can avoid the same pitfalls I experienced. Let’s make this journey together!

Why Inertia?

If you have experience building applications in Ruby on Rails, you are likely familiar with Turbolinks. Inertia, a modern web development technology, draws inspiration from Turbolinks.

The difference is, Inertia is framework agnostic. You can use it with Laravel, RoR. And for client side you can use Vue, React, Svelte and there are some community supoprted plugins for other frameworks too.

Inertia is not a framework, It just provides a bridge between the server and the client and eliminates the need to build API. It makes developing server-driven Single Page Applications easier.

Who should use Inertia.js?

Inertia.js is a good choice for developers and teams who prioritize simplicity, flexibility, and the ability to incrementally adopt modern web development practices in their projects. It’s particularly well-suited for scenarios where a full-fledged API layer is not a strict requirement, and a more lightweight approach is desired. If you are working as a solo developer with a tight timeline, Inertia is a great option.

Setting up Inertia

Let’s use Laravel for this setup, if you don’t already have a laravel project Follow the official docs to create a new laravel project.

Server-side setup

On the server, we just need one package, inertiajs/inertia-laravel to act as a bridge between Laravel application and React. Let’s use Composer to install the package.

composer require inertiajs/inertia-laravel

Once the installation is done, We need to add the inertia middleware. To generate the middleware use the following command.

php artisan inertia:middleware

If you check the Middleware folder you’ll see a new middleware HandleInertiaRequests added in the folder. To use this middleware we need to include this in the web middleware group in app/Http/kernel.php

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

Your app’s starting point would be app.blade.php. You can create a new blade file or just rename welcome.blade.php to app.blade.php. You are not going to use welcome.blade.php anyway.

Now copy and paste the below code into the newly created app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset=" utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel</title>
  @viteReactRefresh
  @vite(['resources/css/app.css', 'resources/js/app.jsx'])
 @inertiaHead
</head>

<body>
@inertia
</body>
</html>

Let’s change the view in the routes file too. Edit routes/web.php and edit change the ’/’ route to the following

<?php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use Inertia\Inertia;

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

This will throw an error since we haven’t set up the client-side framework yet. and we don’t have the Main.jsx file. But this is everything we need to do on the backend. Let’s fix the client side.

Clent-side

we need to install Inertia and Inetria-react plugins first. Vite comes with laravel by default so we don’t have to install it separately.

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

After installation, change the vite config to include Inertia. Edit vite.config.js and add the below code

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

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

Now, Rename resources/js/app.js to resources/js/app.jsx and replace the existing code with the following:

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

createInertiaApp({
  // Below you can see that we are going to get all React components from resources/js/Pages folder
  resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`,import.meta.glob('./Pages/**/*.jsx')),
  setup({ el, App, props }) {
      createRoot(el).render()
  },
})

If you see the code, we are resolving the components from /Pages.

app.jsx is the starting point. So, let’s create the Pages directory inside resources/js. If you remember from earlier we used ‘Main’ as view for our ’/’ route. So let’s also create resources/js/Pages/Main.jsx and add the following code:

import React, { useState } from 'react';

const Main = () => {
    return (
        <h1 className="text-amber-950 text-2xl font-extrabold">Welcome To Inertia React!</h1>
    )
};

export default Main;

Ignore the tailwind classes, for now, We will set up tailwind later. This is everything we need to serve React components with Inertia. Let’s start the project and see the result.

To start the project use

// Start PHP server
php artisan serve
// start the client
npm run dev

If you go to localhost:8000 in your browser you should see Welcome To Inertia React!” on the screen.

Congratulation! You have successfully set up Inertia and React.

Tailwind configuration

Tailwind is completely optional, But it’s a great CSS framework and I prefer using Tailwind. To setup tailwind, you can just follow the official docs.

From the docs:

npm install -D tailwindcss postcss autoprefixer

This installs tailwind, postcss and autoprefixer. Now create a postcss.config.js in your app directory and add the below code

module.exports = {
  plugins: {
      tailwindcss: {},
      autoprefixer: {},
  }
}

Add the following to the content array in tailwind.config.js

export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.jsx",
    ],
/...

We have already required resources/css/app.css just add the following code to the file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now start the client again you should see tailwind styles applied to the content.

npm run dev

It can take time to set up inertia on your own. Consider Laravel Breeze for basic auth, or Laravel Jetstream for complex projects.

Github link for the boilerplate code

If you’re looking for a fuss-free installation of Laravel and Inertia, this repo is the way to go. No need to waste time on setup! By the way, I’ll be sharing how to deploy Laravel apps in a separate post.