Laravel React Starter Kit

The Laravel + React Starter Kit is a modern foundation for building full-stack applications. It uses Inertia.js to bridge the gap between a Laravel backend and a React frontend, allowing you to build single-page applications (SPAs) using classic server-side routing and controllers instead of building a separate API.

Key Technologies:

• Frontend Framework: React 19
• Language: TypeScript
• Styling: Tailwind CSS
• Component Libraries: shadcn/ui and radix-ui
• Build Tool: Vite
• Glue Layer: Inertia.js

The application's core behavior is controlled through the config/app.php file, which primarily pulls values from the .env file using the env() helper. You can configure the application name, environment, debug mode, URL, and localization settings by setting the corresponding environment variables.

APP_NAME=MyApplication
APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost
APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US

You can manage the application's maintenance mode status using different drivers. The maintenance.driver setting determines how the status is tracked, and maintenance.store determines where it is stored.

Supported drivers for driver:

• file (default)
• cache (recommended for multi-machine setups)
• array

APP_MAINTENANCE_DRIVER=cache
APP_MAINTENANCE_STORE=database

You can prevent the command from installing Node dependencies or building assets by setting specific environment variables. This is useful if you manage dependencies or asset compilation through a different pipeline.

• To skip npm install and npm run build: Set LARAVEL_INSTALLER_NO_NODE=true in your environment.
• To defer installer hooks: Set LARAVEL_INSTALLER_DEFER_HOOKS=true (Note: providing the --answers flag will override this and prevent deferral).

The ESLint configuration uses eslint-plugin-import with a TypeScript resolver to correctly handle module resolution. If you modify the project structure, ensure the project key in the import/resolver settings points to your tsconfig.json.

// Current configuration in eslint.config.js
settings: {
    'import/resolver': {
        typescript: {
            alwaysTryTypes: true,
            project: './tsconfig.json',
        },
        node: true,
    },
}

Laravel uses an encryption key to secure data. The key configuration is loaded from APP_KEY. For seamless key rotation, you can provide multiple keys via a comma-separated list in the APP_PREVIOUS_KEYS environment variable. The default cipher used is AES-256-CBC.

APP_KEY=base64:your-random-32-character-string
APP_PREVIOUS_KEYS=base64:old-key-1,base64:old-key-2

Use the cn utility function to conditionally merge CSS classes. It combines the functionality of clsx (for conditional logic) and tailwind-merge (to resolve Tailwind class conflicts). This is the standard way to handle dynamic class names in this project while ensuring that conflicting Tailwind classes are correctly overridden.

import { cn } from '@/lib/utils';

// Example usage with conditional classes and Tailwind conflict resolution
const className = cn('px-2 py-1 text-sm', isPrimary && 'bg-blue-500', isLarge && 'text-lg');

The toUrl function normalizes Inertia link destinations. Since InertiaLinkProps['href'] can be either a plain string or an object containing a url property, toUrl ensures you always receive a consistent string representation of the URL.

import { toUrl } from '@/lib/utils';
import type { InertiaLinkProps } from '@inertiajs/react';

const href: InertiaLinkProps['href'] = { url: '/dashboard' };
const urlString = toUrl(href); // Returns '/dashboard'

The following paths are explicitly ignored by ESLint in this project:

• vendor (PHP dependencies)
• node_modules
• public
• bootstrap/ssr
• tailwind.config.js
• vite.config.ts
• resources/js/actions/**
• resources/js/components/ui/*
• resources/js/routes/**
• resources/js/wayfinder/**

To automate the install:features command and bypass interactive prompts, use the --answers option. This option expects a JSON-encoded string representing the answers to the questions defined in your chisel.php script.

Example of providing answers for a multiselect question:

php artisan install:features --answers='["option-a", "option-b"]'