Weave Code
React Starter Kit Laravel Package
laravel/react-starter-kit
Modern Laravel + React starter kit powered by Inertia. Includes React 19, TypeScript, Tailwind, shadcn/ui and Radix UI components, plus fast Vite builds. Ideal for SPA-like apps using classic Laravel routing and controllers.
At a glance
Frequently asked questions about React Starter Kit
- How do I install the Laravel React Starter Kit in an existing Laravel project?
- Use Composer to install the starter kit via `composer create-project laravel/react-starter-kit my-project`. For existing projects, follow the [official migration guide](https://laravel.com/docs/starter-kits#migrating-existing-projects) to replace Blade with Inertia page components and update your asset pipeline to Vite. Ensure your Laravel version is 10.x or 11.x for compatibility.
- Does this starter kit work with Laravel 9 or older versions?
- No, the Laravel React Starter Kit is designed for Laravel 10.x and 11.x only. It leverages modern features like Vite 5 and React 19, which require PHP 8.1+. If you’re on Laravel 9, consider alternatives like the older `laravel-react` package or manually setting up Inertia.js with Laravel Mix.
- How does Inertia.js handle form submissions and CSRF protection in this setup?
- Inertia.js automatically handles CSRF protection by integrating with Laravel’s built-in middleware. Forms submit to Laravel routes just like Blade, but the response is rendered as React components. No extra configuration is needed—Laravel’s default CSRF token handling works seamlessly with Inertia’s page components.
- Can I use Redux or Zustand for state management with this starter kit?
- Yes, the starter kit doesn’t enforce a state management solution, so you can integrate Redux, Zustand, or React Context. The kit includes TypeScript support, which simplifies state typing. For global state shared between frontend and backend, consider Laravel’s session or a dedicated API layer for complex data.
- Will Vite cause conflicts with Laravel’s existing asset pipeline (e.g., Laravel Mix)?
- Yes, Vite replaces Laravel Mix entirely, so you’ll need to migrate all asset configurations (e.g., `webpack.mix.js` to `vite.config.js`). The starter kit provides a preconfigured Vite setup, but you may need to adjust plugins or optimizations. Test your build process thoroughly in a staging environment before full migration.
- How do I optimize SEO for a React frontend built with Inertia.js?
- Inertia.js renders pages client-side by default, which can hurt SEO. To improve rankings, use Laravel’s server-side rendering (SSR) via Inertia’s `@inertia` directive with SSR enabled, or implement static site generation (SSG) with tools like Laravel Vapor. Pre-render critical pages and ensure meta tags are dynamically injected via Laravel’s Blade or API responses.
- Is shadcn/ui mandatory, or can I replace it with another component library?
- shadcn/ui is optional but preconfigured for rapid UI development. You can easily replace it by removing its dependencies (`@radix-ui/react-*`, `class-variance-authority`, etc.) and swapping components. The starter kit’s Tailwind CSS setup remains intact, so you can use any library (e.g., Mantine, Chakra UI) or build custom components.
- How do I test React components that use Inertia.js in Laravel?
- Test Inertia page components with Vitest or Jest for frontend logic, and use Laravel’s testing helpers (e.g., `actingAs`, `assertGuest`) for backend integration. For E2E tests, Playwright or Laravel Dusk can simulate user flows across frontend and backend. Mock Inertia’s `$page` prop in unit tests to isolate component behavior.
- What’s the recommended deployment strategy for this starter kit in production?
- Deploy the frontend (Vite) and backend (Laravel) separately or together, depending on your architecture. Use Laravel Forge/Vapor for backend hosting and configure Vite’s `base` path in `vite.config.js` to match your domain. For CI/CD, GitHub Actions or Laravel Envoyer can handle parallel builds. Enable Laravel’s asset optimization and Vite’s production mode for performance.
- Are there alternatives to this starter kit for Laravel + React integration?
- Yes, alternatives include manually setting up Inertia.js with Laravel Mix or Vite, or using packages like `laravel-react` (older) or `laravel-vite-plugin`. For full-stack frameworks, consider Next.js with Laravel API routes, but this starter kit offers the tightest Laravel integration with minimal boilerplate. Evaluate based on your need for TypeScript, shadcn/ui, or specific tooling.
Weaver
How can I help you explore Laravel packages today?