How to Install the Laravel React Starter Kit Step by Step

Pairing Laravel's backend routing, Eloquent ORM, and queue workers with a modern React frontend gives engineering teams the speed of a monolithic framework and the interactivity of a single-page application. Understanding how to install the Laravel React starter kit properly ensures your project starts with clean TypeScript definitions, Inertia.js server-driven routing, Tailwind CSS styling, and accessible UI components out of the box.

This step-by-step guide walks through installing the official Laravel React starter kit on a brand-new repository, configuring the local development server, enabling Server-Side Rendering (SSR), and adding the stack to an existing project.

Prerequisites Before Installing the Laravel React Starter Kit

Before running the installer, verify that your local development machine meets these environment requirements:

If you do not have the global Laravel installer or prefer updated versions, update it via Composer first:

composer global require laravel/installer

Make sure Composer's global vendor/bin directory is added to your system $PATH so the laravel binary is accessible from any terminal session.

Step 1: Create a New Project with the Laravel React Starter Kit

The cleanest way to bootstrap a new application is through the laravel new CLI command. Navigate to your workspace directory and run:

laravel new my-saas-app

When prompted by the interactive installer, select the following options:

1. Which starter kit would you like to install? Select React.
2. Which authentication provider do you prefer? Choose Laravel's built-in authentication (unless your organization explicitly requires WorkOS).
3. Which testing framework do you prefer? Choose Pest (recommended for expressive syntax) or PHPUnit.
4. Would you like to run npm install and npm run build? Select Yes.

Non-Interactive CLI Installation

If you prefer a single-command setup for CI pipelines or automated scripts, pass the --react flag directly:

laravel new my-saas-app --react --pest

Under the hood, the installer scaffolds a modern stack powered by React 19, TypeScript, Inertia.js, Tailwind CSS, and shadcn/ui primitives pre-wired with full authentication flows (login, registration, password reset, email verification, and profile settings).

Step 2: Configure Environment Variables and Database Migrations

Navigate into your newly created project directory:

cd my-saas-app

Inspect the generated .env file. By default, Laravel configures SQLite (DB_CONNECTION=sqlite) and creates a database/database.sqlite file so you can start coding immediately without configuring an external database server.

If you are building a production SaaS application and want to use PostgreSQL or MySQL locally, update your .env credentials:

APP_NAME="My SaaS App"
APP_URL=http://localhost:8000

DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=my_saas_app
DB_USERNAME=postgres
DB_PASSWORD=secret

Once your database connection is configured, run the initial migrations to create the users, sessions, cache, and jobs tables:

php artisan migrate

Step 3: Launch the Concurrent Development Server

Modern Laravel starter kits include a unified dev script inside composer.json that boots the PHP server, the queue listener, real-time log tailing (pail), and the Vite React Hot Module Replacement (HMR) server in a single terminal window.

Start the stack with:

composer run dev

Open http://localhost:8000 in your browser. You will see the starter landing page along with working Log in and Register routes. Create a test account to verify that Inertia page transitions and React state updates work without full-page browser reloads.

Understanding the Laravel React Directory Structure

Once you know how to install the Laravel React starter kit, familiarizing yourself with its file organization saves hours during feature development:

my-saas-app/
├── app/
│   └── Http/
│       ├── Controllers/
│       │   ├── Auth/                 # Authentication & verification controllers
│       │   └── Settings/             # Profile & password update controllers
│       └── Middleware/
│           └── HandleInertiaRequests.php  # Shares auth user & flash data with React
├── resources/
│   ├── css/
│   │   └── app.css                   # Tailwind CSS imports & theme variables
│   └── js/
│       ├── components/
│       │   ├── ui/                   # Editable shadcn/ui React components
│       │   └── app-sidebar.tsx       # Responsive application sidebar navigation
│       ├── layouts/
│       │   ├── app-layout.tsx        # Authenticated dashboard shell
│       │   └── auth-layout.tsx       # Clean centered card layout for login/signup
│       ├── pages/
│       │   ├── auth/                 # Login, Register, ForgotPassword React views
│       │   ├── settings/             # Profile, Password, Appearance (Dark/Light) views
│       │   └── dashboard.tsx         # Main authenticated dashboard screen
│       ├── types/
│       │   └── index.d.ts            # Shared TypeScript interfaces (User, PageProps)
│       ├── app.tsx                   # Client-side Inertia + React entry point
│       └── ssr.tsx                   # Server-side rendering entry point
└── routes/
    ├── web.php                       # Core web & dashboard routes
    ├── auth.php                      # Authentication endpoints
    └── settings.php                  # User settings endpoints

How Data Flows from Laravel to React

Unlike decoupled SPAs where you have to write custom REST or GraphQL fetch hooks for every view, Inertia passes controller data directly as typed props to your React components:

// routes/web.php
use Inertia\Inertia;
use Illuminate\Support\Facades\Route;

Route::middleware(['auth', 'verified'])->get('/projects', function () {
    return Inertia::render('projects/index', [
        'projects' => auth()->user()->projects()->latest()->get(),
    ]);
})->name('projects.index');

Inside resources/js/pages/projects/index.tsx, your React component receives projects directly as a prop with full TypeScript autocomplete.

Alternative: Installing via Laravel Breeze on an Existing Project

If you are working with an existing project or prefer the minimal Laravel Breeze scaffolding, you can install the React + Inertia stack manually via Composer:

composer require laravel/breeze --dev
php artisan breeze:install react --typescript
npm install
npm run build
php artisan migrate

passing --typescript configures .tsx files, tsconfig.json path aliases (@/* mapped to resources/js/*), and typed Inertia page props. If you are adding this to a project that already has custom routes and models, read our guide on how to add a starter kit to an existing Laravel project first to prevent migration or route overwrites.

Enabling Inertia Server-Side Rendering (SSR)

For public marketing pages, blogs, and SEO-sensitive landing pages, enabling Server-Side Rendering ensures search engine crawlers receive fully rendered HTML on the initial request.

1. Build the client and SSR bundles:

   npm run build:ssr
   

2. Start the Node SSR daemon via Artisan:

   php artisan inertia:start-ssr
   

In production environments managed by Laravel Forge, Ploi, or Docker, run php artisan inertia:start-ssr as a persistent background supervisor process alongside your queue workers.

Troubleshooting Common Installation Issues

1. Vite manifest not found at: public/build/manifest.json

This error occurs when you visit the Laravel app in the browser without running Vite or building production assets. Fix it by running composer run dev for local development or npm run build for production.

2. TypeScript Path Alias @/ Not Resolving in IDE

Ensure your tsconfig.json includes the paths mapping pointing to resources/js/*:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./resources/js/*"]
    }
  }
}

Restart your editor's TypeScript server after modifying tsconfig.json.

3. Adding Additional shadcn/ui Components

Because the starter kit is pre-configured with components.json, you can add new accessible Radix/Tailwind primitives at any time using the official CLI:

npx shadcn@latest add dialog table tabs

New components are placed directly inside resources/js/components/ui/ so you can customize their markup and styles freely.

Ship Your Laravel & React Application Faster

Knowing how to install the Laravel React starter kit gives you a clean baseline for authentication and routing. When you are ready to skip weeks of building billing portals, multi-tenant workspaces, data tables, and marketing pages, start from a production-ready template:

• Explore All Laravel Templates
• Browse React Templates & UI Kits
• Compare Full-Stack SaaS Starter Kits
• Discover Turnkey Starter Kits
• Read Next: Which Laravel Starter Kit to Use for Your Next Project