React Starter Kit

Overview of the New Laravel Ecosystem Laravel recently shifted its approach to application scaffolding. By replacing legacy packages like Jetstream and Breeze, the team introduced a series of dedicated starter kits tailored to specific frontend preferences. The React Starter Kit serves as a complete, ready-to-go application rather than a dependent package. This means the code belongs to you from day one, allowing for total customization without the constraints of an underlying vendor library. It bridges the gap between a robust PHP backend and a dynamic React frontend. Prerequisites and Tooling To follow this guide, you should have a solid grasp of Laravel fundamentals, React component architecture, and the command line. You will need the following tools: - **PHP 8.2+** and **Composer** - **Node.js** and **NPM** - **Laravel Installer**: The easiest way to scaffold new projects. - **Laravel Herd**: Recommended for a seamless local development environment, including built-in mail trapping. Key Libraries & Tools - Inertia.js: The essential bridge that connects server-side routing with client-side components. - Tailwind CSS 4: The latest utility-first CSS framework for rapid UI development. - ShadCN UI: A collection of re-usable components that you copy and paste into your apps. - Vite: The lightning-fast build tool for modern frontend development. Code Walkthrough: Installation and Layouts You can initiate a project using the Laravel installer. This process sets up the database, authentication, and frontend assets automatically. ```bash laravel new my-app --starter=react ``` Once installed, you can modify the application's look by swapping layouts. Unlike previous iterations, the React Starter Kit includes multiple built-in layout variations like `Simple`, `Card`, and `Split` for authentication, and `Sidebar` or `Header` for the main dashboard. ```javascript // resources/js/layouts/AppLayout.tsx import { AppSidebarLayout } from '@/components/app-sidebar-layout'; // Switch to AppHeaderLayout to move navigation to the top ``` Customizing the App Sidebar The sidebar is highly configurable. By adjusting the `variant` and `collapsible` props in the `AppSidebar` component, you can change the UI from a standard sidebar to a floating menu or an off-canvas overlay. ```javascript <Sidebar variant="floating" collapsible="icon" > {/* Navigation items */} </Sidebar> ``` Syntax Notes and Best Practices Tailwind CSS 4 removes the need for a `tailwind.config.js` by default, moving configuration directly into your `app.css`. Use CSS variables to define theme overrides like fonts or custom colors. When adding components via ShadCN UI, always check if you want to override existing logic; the kit includes many components out of the box that you can extend rather than replace. Tips & Gotchas - **Email Verification**: To enforce verification, implement the `MustVerifyEmail` interface on your `User` model and add the `verified` middleware to your routes. - **Database**: The kit defaults to SQLite, which is perfect for local prototyping but requires migration to MySQL or PostgreSQL for production. - **Environment**: Always update your `.env` file with local mail settings from Laravel Herd to test password resets and verification flows effectively.