Inertia.js

Overview of the Inertia Approach Building single-page applications (SPAs) often feels like managing two separate worlds: a complex JavaScript frontend and a robust PHP backend. Usually, this requires building a messy REST API and managing client-side routing, which adds significant overhead. Inertia.js solves this by acting as an adapter rather than a framework. It allows you to build fully client-side rendered SPAs using classic server-side routing and controllers. You get the snappy feel of a modern web app without the pain of manual state synchronization or token-based authentication. Prerequisites Before diving into the code, ensure you have a firm grasp of Laravel fundamentals, particularly routing and controllers. Since Inertia.js lets you use your favorite frontend tools, you should be comfortable with either Vue.js or React. You will also need Node.js and Composer installed on your local machine to manage dependencies. Key Libraries & Tools - **Laravel Installer**: The command-line utility for bootstrapping new projects. - **Laravel Breeze**: A minimal starter kit that provides a perfect starting point for Inertia.js projects. - **Inertia Adapters**: Specialized packages for Vue.js or React that bridge the gap between the backend and the frontend. Code Walkthrough: Data Exchange In a standard app, a link click reloads the whole page. Inertia.js intercepts these clicks and performs an AJAX request instead. On the backend, your controller looks surprisingly familiar: ```php use Inertia\Inertia; public function index() { return Inertia::render('Dashboard', [ 'users' => User::all(), ]); } ``` Instead of returning a Blade view, we use `Inertia::render`. This sends a JSON response containing the component name ('Dashboard') and the data (props). On the frontend, Inertia.js receives this data and swaps the current page component with the new one dynamically. Syntax Notes & Best Practices Always use the `<Link>` component provided by the Inertia.js library rather than standard `<a>` tags. Standard tags trigger a full browser refresh, defeating the purpose of the SPA. ```javascript import { Link } from '@inertiajs/vue3' <Link href="/users">View Users</Link> ``` Tips & Gotchas Don't try to use Inertia.js for public-facing websites where SEO is the top priority unless you implement Server Side Rendering (SSR). For internal dashboards and complex SaaS products, however, it shines. Remember that because Inertia.js shares the same session as your Laravel backend, you don't need to worry about OAuth or JWT for internal navigation. Use the standard Laravel auth guards you already know.

The Architecture of Choice in Laravel 8 Laravel 8 marks a significant shift in how we approach the front-end, or more accurately, how we don't. By default, the framework remains entirely agnostic. When you run `laravel new`, you get Blade templates and nothing else. No Tailwind, no Vue, and certainly no forced architectural patterns. This is intentional. The goal is to provide a clean slate while offering powerful, optional scaffolding for those who want to move faster. Much of the recent noise in the community suggests that using tools like Inertia.js or Livewire is a requirement or a "betting of the farm" on immature tech. This fundamentally misunderstands what these tools do. Inertia isn't a massive framework; it's a bridge that lets you use Laravel's routing to hydrate Vue components. It keeps you productive by removing the need for a separate API repository, which is often a productivity killer for solo developers and small teams. Demystifying the Starter Kits: Breeze and Jetstream To understand where you should start, you have to look at the complexity of your requirements. Laravel Breeze represents the baseline. It is a simple, minimal implementation of all Laravel's authentication features—login, registration, password reset—using simple controllers and routes that you can actually see and modify in your app. It’s the spiritual successor to the old `make:auth` command, but modernized with Tailwind. Laravel Jetstream sits at the other end of the spectrum. It is essentially the free, open-source core of what used to be Laravel Spark. We moved all the non-billing features—team management, two-factor authentication, and API token management—out of Spark and into Jetstream. It uses Laravel Fortify as its headless backend. This means Jetstream handles the UI (via either Inertia or Livewire), while Fortify handles the heavy lifting of authentication logic in the background. Passport vs. Sanctum: Choosing Your API Guard The most persistent confusion in our ecosystem revolves around Laravel Passport and Laravel Sanctum. The decision tree is actually quite simple: if you need to build a full OAuth2 server—the kind where users can "Sign in with Your App" on third-party sites—you need Passport. It is a robust, compliant implementation built on the league/oauth2-server. However, most developers don't actually need OAuth2. They just need to secure an API or a Single Page Application (SPA). For these use cases, Passport is a sledgehammer. Sanctum was built to solve the "API for myself" problem. It provides a lightweight way to issue personal access tokens and, more importantly, a way to authenticate SPAs using secure, stateful cookies. The Secret Sauce of SPA Authentication Sanctum's true power lies in its ability to toggle between token-based and cookie-based authentication. When your SPA sits on the same top-level domain as your Laravel API, you shouldn't be messing with JWT storage in `localStorage`. It’s insecure and unnecessary. Instead, Sanctum allows your SPA to call a login endpoint, which uses standard Laravel session guards to issue a secure HTTP-only cookie. The browser then handles that cookie automatically for every subsequent request. If a request comes in without a cookie, the Sanctum guard looks for a `Bearer` token in the header. This dual-layer approach allows the same API routes to serve your first-party SPA via cookies and third-party mobile apps or SDKs via tokens. It’s the most secure and streamlined way to handle modern web authentication without the overhead of a full OAuth2 handshake. Community Dynamics and Open Contributions There is a narrative that the Laravel ecosystem is a closed circle, but the data proves otherwise. With over 2,800 contributors, the "inner circle" is massive. Developers like Paris Malhotra prove that anyone can show up, submit high-quality pull requests to core packages like Laravel Horizon, and get them merged. This isn't about personal friendships; it's about labor and merit. People like Caleb Porzio and Jonathan Reinink earned their status through hundreds of hours of free work to make the ecosystem better. We want people who bring positive energy and a desire to make programming more enjoyable. If you're here to armchair quarterback, you're missing the point of what we're building.