How to Set Up a New Laravel Project with Inertia.js

When starting a new Laravel project, one of the first architectural decisions is how to build the frontend.

You can use Blade templates, build a separate frontend application that communicates with Laravel through an API, or use Inertia.js to connect Laravel routes and controllers directly to frontend components.

Inertia provides an interesting middle ground: you can build a modern single-page application experience with React or Vue while keeping Laravel responsible for routing, controllers, middleware, and server-side business logic.

In this guide, we'll set up a new Laravel project using Inertia.js and React.

1. Create a Laravel project

Make sure you have PHP, Composer, Node.js, and npm installed.

Create a new Laravel application:

composer create-project laravel/laravel my-inertia-app
cd my-inertia-app

Start by configuring your environment and database in the .env file. For a local setup, Laravel's default SQLite configuration is also a convenient option if you don't need a separate database server.

2. Install the Inertia starter kit

For a new application, the recommended starting point is Laravel's official React starter kit, which already integrates Inertia.js and provides a frontend structure.

Using the Laravel installer:

laravel new my-inertia-app

During the interactive setup, select the React starter kit and your preferred authentication and testing options. If you already created the project with Composer, you can instead create a fresh application through the installer to benefit from the integrated starter-kit setup.

The starter kit gives you a working foundation rather than requiring you to configure every frontend dependency manually.

Version note: Laravel's installer options and starter-kit structure can change between major releases. Check the prompts provided by your installed Laravel installer and the current official documentation before following version-specific instructions.

Official references:

• Laravel documentation
• Inertia.js documentation
• Laravel starter kits

3. Understand the project structure

An Inertia application keeps Laravel's backend and the frontend in the same project.

The main responsibilities are typically divided as follows:

Unlike a traditional API-driven architecture, you don't need to create a separate endpoint for every page just to pass data from Laravel to React.

4. Create your first Inertia page

In a standard Laravel application configured with Inertia and React, a controller can render a frontend page and provide it with data.

For example:

<?php
 
namespace App\Http\Controllers;
 
use Inertia\Inertia;
use Inertia\Response;
 
class WelcomeController extends Controller
{
    public function index(): Response
    {
        return Inertia::render('Welcome', [
            'message' => 'Welcome to my Laravel application!',
        ]);
    }
}

This example assumes that Inertia has already been configured and that a corresponding React page exists.

Register the route:

use App\Http\Controllers\WelcomeController;
use Illuminate\Support\Facades\Route;
 
Route::get('/', [WelcomeController::class, 'index']);

Then create the corresponding React page in the frontend pages directory configured by your starter kit. In many setups, this is resources/js/pages/Welcome.tsx:

import { Head } from '@inertiajs/react';
 
type WelcomeProps = {
    message: string;
};
 
export default function Welcome({ message }: WelcomeProps) {
    return (
        <>
            <Head title="Welcome" />
 
            <main>
                <h1>{message}</h1>
            </main>
        </>
    );
}

The exact directory and component conventions depend on the starter kit and its version.

The important idea is that Laravel passes the message prop through Inertia, and React renders it without requiring a separate API request.

5. Run the application

Install frontend dependencies if they have not already been installed:

npm install

Start the frontend development server:

npm run dev

In another terminal, start Laravel:

php artisan serve

Open the local URL displayed by Laravel in your browser.

When using a Laravel starter kit, the frontend tooling and Inertia integration should already be configured, so you can focus on building pages and application features.

6. Why choose Inertia.js?

Inertia is especially useful when you want to retain Laravel's conventions while building a modern frontend.

Its main advantages include:

• No separate API required for page navigation: Controllers can return Inertia pages and props directly.
• Shared application architecture: Backend and frontend code live in one repository.
• Laravel integration: Routes, middleware, validation, authentication, and authorization remain within Laravel's ecosystem.
• Modern frontend development: React or Vue components can provide interactive interfaces.
• Progressive development: You can start with a simple page and introduce more complex frontend behavior as the application grows.

Inertia is not a replacement for every API architecture. If your application also serves mobile clients or independent third-party consumers, a dedicated API may still be appropriate.

Conclusion

Laravel with Inertia.js is a practical choice for developers who want the productivity of Laravel on the backend and the flexibility of a modern JavaScript framework on the frontend.

For a new project, starting with the official Laravel React or Vue starter kit is generally easier than assembling the integration manually. Once the initial setup is complete, you can focus on your routes, controllers, page components, and business logic rather than maintaining a separate API layer for every screen.