Building a single-page application no longer means wrestling with fragmented tooling. With Laravel 13 streamlining backend APIs, React 19 refining client-side interactivity, and Tailwind CSS v4 delivering styles through a turbocharged compiler, the modern PHP and JavaScript stack has never felt more cohesive.
In this guide, you will scaffold a production-ready SPA from scratch. No assumptions, no skipped steps. Just a clean architecture that scales.
Why This Stack Matters Now
Each piece of this puzzle solves a specific developer pain point:
Laravel 13 doubles down on API-first primitives, native type-safe resources, and a leaner application skeleton designed for headless consumption.
React 19 ships with refined Server Components patterns for hybrids, improved hydration triggers, and leaner runtime overhead.
Tailwind CSS v4 replaces the old JavaScript compiler with a Rust-powered engine, cutting build times by orders of magnitude.
Prerequisites
Before you start, make sure your environment matches the following:
PHP 8.4 or higher
Node.js 22+ and npm
Composer 2.7+
A MySQL or PostgreSQL database ready for connections
Step 1: Bootstrapping the Laravel 13 API
Laravel 13 ships with an explicit API starter flag. Open your terminal and run the installer, then select the API option during scaffold. This strips default Blade views and pre-configures Sanctum for token-based authentication. The result is a slim backend that speaks JSON and nothing else.
Once installed, update your .env database credentials and run migrations. You should now be able to hit the base URL and receive a clean JSON welcome payload.
Configuring CORS and Routing
Your React frontend will live on a separate development port. Inside config/cors.php, allow your Vite dev server origin. Keep your routes inside routes/api.php and reach for Route::apiResource() whenever possible. It guards against accidental GET mutations and keeps route definitions terse.
Step 2: Integrating React 19
Laravel 13 still leans on Vite as the canonical bundler. Install React 19 alongside the official Vite plugin, then update vite.config.js to register the plugin and point to your new entry file at resources/js/app.jsx.
Inside resources/js/app.jsx, create a root component that mounts to the DOM. React 19 introduces subtle improvements to hydration; ensure your root setup checks for an existing DOM node before calling createRoot.
Installing a Router
React Router v7 pairs elegantly with this stack. Install it, then wrap your application in the router provider. Define a handful of starter routes and confirm that direct navigation works without 404 errors by letting a Laravel catch-all route return your index.html.
Step 3: Tailwind CSS v4 and the Rust Compiler
Tailwind v4 is a paradigm shift. Gone are the sprawling config files. Instead, you import Tailwind directly into CSS using native cascade layers.
Inside resources/css/app.css, import Tailwind. The v4 engine detects utility classes through an import tree rather than a JavaScript scanner, which explains the blistering rebuild speed. Then tell Vite to watch that CSS file. Your browser should now reflect utility changes almost instantly, even in large component trees.
Designing Components Without Leaving Your Markup
Tailwind v4 preserves the utility-first philosophy, but the new engine understands arbitrary values more predictably. Build a navigation bar using flex, gap, and backdrop-blur utilities. The compiler only ships the bytes you reference, keeping production bundles tiny.
Step 4: Fetching Data with Laravel API Resources
Modern SPAs deserve structured data. Laravel 13 API Resources act as transformation layers between your Eloquent models and JSON responses.
Create a Resource class for your primary model. Inside the toArray method, expose only the fields the frontend needs. Hide timestamps from public routes, append computed attributes, and nest related resources without recursive database hits. Eager-load relationships using with() in the controller, and your React components receive flat, predictable objects.
On the client, use a lightweight fetching library or React 19's native form actions if applicable. Always separate your fetch logic into a dedicated services/ directory to keep components presentational.
Step 5: Authentication with Sanctum
Laravel Sanctum remains the simplest bridge between a React SPA and a Laravel backend. Configure the Sanctum middleware on API routes, then issue tokens after credential validation.
In React, store tokens in memory or secure cookies. Avoid localStorage for sensitive sessions. Use an authentication context that provides login, logout, and current user state to every nested component. React 19's improved context selectors help avoid re-renders when user metadata changes.
Common Pitfalls and How to Avoid Them
Even polished stacks have sharp edges. Watch out for these traps:
Mismatching Vite ports: If Laravel and Vite default ports collide, explicitly set the server port in Vite config to prevent CORS headaches.
Over-fetching in lists: Always paginate Eloquent queries. Send meta and links objects from your Resource collection so React can render infinite-scroll or numbered pagination.
Ignoring Tailwind layers: When overriding framework styles, nest rules inside the proper layer to prevent specificity wars.
Leaking environment variables: Prefix sensitive Vite variables with VITE_ only when the frontend truly needs them.
Deployment Strategy
When you move from local development to production, treat the frontend build as an artifact.
Run the production Vite build to compile assets into public/build.
Point your web server root to Laravel's public/ directory.
Use a catch-all route in routes/web.php that returns index.html so React Router handles client-side navigation correctly.
Cache your API routes with Redis where appropriate, and queue heavy jobs via Laravel Horizon.
Enable gzip and Brotli on your web server; Tailwind's atomic classes compress extraordinarily well.
Closing Thoughts
Building a modern SPA is less about chasing trends and more about assembling tools that respect your time. Laravel 13 gives you a disciplined backend, React 19 delivers a resilient frontend runtime, and Tailwind CSS v4 removes the friction between design and implementation.
Ship fast. Refactor fearlessly. Scale quietly.
The architecture you have built today is ready for tomorrow's features. Start on that first resource route, style it with a utility class, and watch the pieces snap into place.