Overview: The Shift Toward Code Literacy in 2026 Software development has reached a tipping point where the ability to read and verify code is becoming more valuable than the mechanical act of typing it. Laravel 13 remains the gold standard for PHP development by providing a structured, expressive environment that pairs perfectly with modern AI agents like Claude Code. This guide explores how to build functional web applications—from landing pages to authenticated CRUD systems—using Laravel as the backbone and AI as the engine. The core of the framework revolves around the Model-View-Controller (MVC) architecture. By separating the data logic (Models), the user interface (Views), and the glue that connects them (Controllers), Laravel creates a predictable environment. For developers in 2026, the goal is to understand these architectural pillars so they can direct AI agents effectively and debug the results with precision. Prerequisites and Environment Setup Before launching a new project, you must have a local PHP environment. The most streamlined recommendation is Laravel Herd, a zero-config development environment for macOS and Windows. It handles PHP, web servers, and local domain management effortlessly. Key tools you should have installed: * **PHP 8.3+**: The engine behind Laravel. * **Composer**: The package manager for PHP. * **Node.js & NPM**: Essential for compiling modern CSS and JavaScript. * **Database**: SQLite is the default for zero-config setups, but MySQL is preferred for scaling. Key Libraries & Tools * Laravel 13: The primary PHP framework. * Tailwind CSS 4: A utility-first CSS framework for rapid UI styling, pre-configured in new projects. * Vite: The modern frontend build tool that manages asset compilation. * **Eloquent ORM**: Laravel's built-in database mapper that allows you to interact with data using PHP syntax instead of raw SQL. * **Blade**: The powerful templating engine for generating dynamic HTML. * Pest: The elegant, human-readable testing framework now standard in the ecosystem. * Livewire: A full-stack framework for Laravel that builds dynamic interfaces without leaving the comfort of PHP. Code Walkthrough: Routing and Controllers The entry point for any Laravel request is the `routes/web.php` file. This file maps URLs to specific logic. In a clean architecture, we offload that logic to Controllers. ```php // routes/web.php use App\Http\Controllers\PostController; use Illuminate\Support\Facades\Route; // Basic GET route returning a view Route::get('/', function () { return view('welcome'); }); // Resource routing for CRUD Route::resource('posts', PostController::class); ``` The `Route::resource` command is a shortcut that automatically generates routes for index, create, store, show, edit, update, and destroy actions. Inside the `PostController`, we handle the interaction between the user and the database: ```php // App/Http/Controllers/PostController.php public function index() { // Fetching data via Eloquent $posts = Post::with('category')->latest()->paginate(10); return view('posts.index', compact('posts')); } ``` Database Integration and Eloquent Models Laravel uses Migrations to version-control your database schema. Instead of sharing SQL dumps, you share PHP files that define table structures. To define a relationship, such as a post belonging to a category, we use expressive PHP methods in the Model files. ```php // App/Models/Post.php class Post extends Model { protected $fillable = ['title', 'slug', 'content', 'category_id']; public function category(): BelongsTo { return $this->belongsTo(Category::class); } } ``` To populate these tables with test data, we use Factories and Seeders. Running `php artisan db:seed` allows you to instantly generate hundreds of realistic records, which is crucial for testing UI layouts and pagination. Syntax Notes: Route Model Binding A signature feature of Laravel is Route Model Binding. When you define a route like `/posts/{post}`, and type-hint the `$post` variable in your controller method, Laravel automatically fetches the record from the database. If the ID doesn't exist, it triggers a 404 page immediately without requiring manual `if` checks. Practical Examples 1. **Public Marketing Sites**: Using simple routes and Blade templates to manage high-performance landing pages. 2. **Content Management**: Utilizing Eloquent relationships to link authors, categories, and tags in a blog system. 3. **SaaS Dashboards**: Leveraging starter kits like Laravel Breeze or Jetstream to handle user authentication, profile management, and password resets out of the box. Tips & Gotchas * **Mass Assignment**: Always define `$fillable` or `$guarded` in your models to prevent malicious users from injecting data into fields like `is_admin`. * **Environment Security**: Never commit your `.env` file to version control. It contains sensitive database passwords and API keys. * **The N+1 Problem**: When listing records, use `with('relationship')` to eager load data. Forgetting this can cause your application to run hundreds of unnecessary database queries, tanking performance.
Vite
Products
- Mar 20, 2026
- Mar 19, 2026
- Mar 10, 2026
- Jan 10, 2026
- Dec 23, 2025
Overview Hard-coding URLs in your frontend components is a fragile practice. When a route changes in your Laravel backend, your Vue or React components break silently. Laravel Wayfinder solves this by generating TypeScript functions for your routes. This gives you autocomplete, type checking, and instant feedback directly in your frontend IDE, ensuring your application remains perfectly in sync. Prerequisites To get the most out of this guide, you should be comfortable with: - Laravel basics (Routing and Controllers) - Modern frontend development (Vite and TypeScript) - Inertia.js (helpful but not strictly required) Key Libraries & Tools - **Laravel Wayfinder**: The core package that maps backend routes to frontend assets. - **Artisan**: The Laravel CLI used to trigger the generation process. - **Vite**: Can be configured to automate route regeneration during development. Code Walkthrough 1. Generating Route Definitions Run the generator command to scan your `routes/web.php` file and create the necessary TypeScript files. ```bash php artisan wayfinder:generate ``` This creates an `actions` and `routes` directory inside `resources/js`. These directories contain functions mapped to your controllers and named routes. 2. Implementing in a Component Instead of passing a string like `"/demo/show"` to a link, import the generated helper function. Wayfinder provides an object containing both the `url` and the HTTP `method`. ```typescript import { show } from '@/actions/Http/Controllers/DemoMethodController'; // Use directly with Inertia Link <Link :href="show().url">View Details</Link> ``` 3. Using Named Routes and Invocable Controllers Wayfinder handles all route types. For named routes, it nests helpers based on the dot-notation name. ```typescript import { named } from '@/routes/demo'; const routeData = named(); // Returns { url: '/demo/named', method: 'GET' } ``` Syntax Notes Wayfinder uses a **namespaced directory structure** for actions. If your controller lives in `App\Http\Controllers\Api`, your TypeScript import will mirror that path. This makes finding the correct route helper intuitive for anyone familiar with the backend structure. Practical Examples - **Dynamic Navigation**: Generate a sidebar menu where links are automatically updated if the backend URI changes. - **Form Submissions**: Use the `.method` property from the helper to ensure your frontend `axios` or `fetch` calls always use the correct HTTP verb (POST vs PUT) defined in Laravel. Tips & Gotchas - **Automate with Vite**: Add the Wayfinder plugin to your `vite.config.js` so that routes regenerate every time you save a PHP file. - **Inertia Compatibility**: When using Inertia.js, you can often pass the entire Wayfinder object to the `Link` component, and it will automatically extract the URL.
Dec 20, 2025Overview Laravel VPS introduces a streamlined method for provisioning virtual private servers directly through the Laravel Forge dashboard. Unlike traditional cloud providers where manual configuration can eat up your afternoon, this tool automates server hardening and software installation. It bridges the gap between raw infrastructure and managed platforms, giving you a ready-to-use environment for PHP applications in under a minute. Prerequisites To follow this workflow, you need a Laravel Forge account and an active subscription. Familiarity with Git version control and basic PHP environment configurations will help you navigate the advanced settings. You should also have an application repository ready on a provider like GitHub. Key Libraries & Tools * **Laravel Forge**: The primary management platform for provisioning and deploying servers. * **Laravel VPS**: A specific server instance type optimized for rapid deployment. * **Composer**: The PHP dependency manager used during the site build process. * **NPM**: Used for compiling frontend assets like CSS and JavaScript through Vite or Webpack. Code Walkthrough Deploying a site involves connecting your repository and triggering a build script. While Laravel Forge handles most of this via the UI, the deployment script typically executes the following logic: ```bash Standard deployment flow for a Laravel app composer install --no-interaction --prefer-dist --optimize-autoloader php artisan migrate --force npm install npm run build ``` The `composer install` command fetches your backend libraries. The `--force` flag on migrations ensures the database updates without an interactive prompt, which is critical for automated CI/CD pipelines. If your site doesn't load styles correctly after the first provision, manually trigger these NPM commands via the Forge terminal interface. Syntax Notes Pay attention to the on-forge.com naming convention. This service provides free subdomains for testing. When configuring your site, using a pattern like `app-name.on-forge.com` allows you to bypass DNS configuration during the initial staging phase. Tips & Gotchas Laravel VPS differs from Laravel Cloud because it provides full SSH access. While Laravel Cloud manages scaling for you, a VPS requires you to manage the underlying OS. Always store your server credentials immediately after provisioning; Forge only shows them once. If your application requires specific PHP extensions, verify them in the **Advanced Settings** before hitting create to avoid rebuilds later.
Oct 1, 2025The Unification of Modern Web Development Web development often feels like a sprawling construction site where every trade speaks a different language. Laravel has long served as the general contractor that brings sanity to this chaos, but Laracon US 2025 marks a moment where the framework is moving beyond simple coordination toward total integration. The event served as a showcase for a philosophy that prioritizes developer speed without sacrificing the artisanal quality of the final product. This isn't just about writing code faster; it is about creating an environment where the tools get out of the way so the developer can focus on the problem at hand. From the high-performance internals of Vue.js to the radical simplicity of Livewire 4, the recurring theme is the removal of friction. Developers are being equipped with "chainsaws"—powerful, automated tools that can clear entire forests of boilerplate code in seconds. However, as the ecosystem matures, the challenge shifts from how to write code to how to manage the vast capabilities now at our fingertips. The transition from manual labor to high-level orchestration is the defining characteristic of this new era in the PHP and JavaScript ecosystems. JavaScript Tooling and the VoidZero Vision Evan You, the creator of Vue and Vite, introduced a transformative vision for the future of JavaScript infrastructure through his new venture, VoidZero. For years, the JavaScript ecosystem has been plagued by fragmentation. To build a modern application, a developer must stitch together a dozen disparate tools: parsers, transformers, minifiers, and bundlers, each written in different languages with varying levels of performance. It is a fragile pipeline that often breaks under the weight of its own complexity. VoidZero aims to unify this entire stack under a single, high-performance architecture written primarily in Rust. At the heart of this initiative is **Rolldown**, a new bundler designed to combine the extreme speed of **esbuild** with the sophisticated feature set of **Rollup**. This is not merely a theoretical exercise in performance; it represents a fundamental shift in how production builds are handled. By aligning the APIs and behaviors across development and production, VoidZero eliminates the "works in dev, breaks in prod" nightmare that has haunted JavaScript developers for a decade. Furthermore, the introduction of **Vapor Mode** for Vue 3.6 demonstrates a commitment to performance that rivals even the most lightweight modern frameworks. By compiling Vue components directly to efficient DOM-manipulation code and bypassing the virtual DOM where appropriate, Vue.js is reclaiming its position at the absolute edge of performance benchmarks. This granular opt-in approach allows developers to maintain the stability of their existing applications while selectively "supercharging" performance-critical pages. The Logic of Vibe Coding and AI on a Leash One of the most discussed concepts at the conference was "vibe coding," a term popularized by Andre Karpathy that describes a workflow where AI agents do the heavy lifting while the human developer focuses on the high-level intent. While the term may sound casual, the underlying technical reality is anything but. It represents a shift from imperative programming—telling the computer *how* to do something—to declarative intent—telling the computer *what* you want to achieve. Colin D. Carlo provided a rigorous framework for navigating this new reality. He argued that to use AI effectively, we must move beyond the "copy-paste" era of ChatGPT and into the integrated era of agents. Modern models like Claude 3.5 Sonnet are now scoring over 70% on the **SWE-bench**, meaning they can identify, locate, and fix real-world bugs in production repositories with high accuracy. This isn't just an assistant; it is a pair programmer with a photographic memory of your entire codebase. However, the power of these agents requires a new set of disciplines. Dave Hicking emphasized that while AI can generate code, it cannot generate "taste." Taste is the result of expertise, judgment, and human empathy. The future belongs to the developer who can keep the AI on a leash—directing its raw power toward meaningful ends while maintaining the rigorous standards of software engineering. The "chainsaw" of vibe coding is incredibly efficient, but without a steady human hand, it is also the fastest way to create technical debt. Livewire 4 and the Death of the Virtual DOM Caleb Porzio took the stage to announce Livewire 4, a release that aims to unify the diverse ways developers currently build components. The introducing of the **Single File Component** (SFC) in Livewire is a major step toward reducing the cognitive load of switching between class files and template files. By collocating logic, template, and even tests into a single directory or file, Livewire is embracing a pattern that has proven successful in the Vue and React ecosystems. Perhaps the most technically impressive feature introduced was **Blaze**, a compiler optimization that utilizes "code folding." In traditional Blade rendering, every component call involves a significant runtime overhead of resolving views, merging arrays, and checking conditions. Blaze analyzes the template at compile-time and "folds" static components directly into pure PHP strings. The results are staggering: a page with 25,000 components that previously took 500 milliseconds to render can now be processed in under 20 milliseconds. It effectively vaporizes the runtime cost of components, making architectural decisions about component size and frequency irrelevant to performance. Livewire 4 also introduces **Islands**, a feature that allows developers to isolate expensive parts of a page. By wrapping a slow database query in an island tag, the rest of the page remains reactive and instant. When the user interacts with the island, only that specific part of the DOM is updated, without triggering a full-page rerender. This brings the performance characteristics of sophisticated Single Page Applications (SPAs) to the traditional server-side rendering model, proving that the "Livewire way" is not just easier to write, but increasingly faster to run. Mastering the Terminal Workflow While high-level frameworks and AI agents capture the headlines, the day-to-day efficiency of a developer often comes down to their mastery of basic tools. Alex Six made a compelling case for the terminal as the ultimate productivity multiplier. By leveraging Tmux, a terminal multiplexer, developers can move away from a cluttered desktop of a dozen terminal tabs toward a structured, persistent, and portable environment. Tmux operates on a client-server architecture, meaning your development sessions live on even if your terminal emulator crashes or your laptop dies. This persistence is a massive boon for "deep work," allowing a developer to switch between different projects and feature branches without losing their context. When combined with tools like **Git Worktrees**, Tmux allows a developer to have multiple versions of the same codebase open simultaneously, each with its own dedicated terminal session and environment. It is a level of organization that makes the transition between complex tasks seamless and error-free. Resilience and Global Ambition The closing sessions of the conference focused on the "why" behind the software we build. Whether it was Susanna's fast-paced deep dive into resilient code—anticipating failures before they crash the application—or Tom Kra's inside look at the scaling of Laravel as a company, the message was clear: we are building for a global audience that expects perfection. Laravel is no longer a niche framework for hobbyists; it is an enterprise-ready powerhouse that powers some of the largest web properties in the world. Will King provided the ultimate distillation of the conference's spirit: "No one can be ambitious for you." The tools have never been better, the community has never been larger, and the barrier to entry has never been lower. Whether you are building a randomly generated dungeon based on audio frequencies or a multi-million dollar SAS platform, the framework for ambitious projects is ready. The only remaining variable is the human artisan at the keyboard.
Jul 31, 2025Overview of Type-Safe Routing Bridging the gap between a PHP backend and a JavaScript frontend often involves manually syncing route names and URLs. This process is fragile and prone to silent failures when a controller method changes or a route is renamed. Laravel Wayfinder solves this by generating fully-typed, importable TypeScript functions for every route and controller action in your Laravel application. It ensures your frontend calls remain in sync with your backend without manual overhead. Prerequisites To get the most out of this tutorial, you should be comfortable with Laravel 10 or 11 and have a basic understanding of Inertia.js. Familiarity with TypeScript is essential, as the primary benefit of this tool is generating types. You should also have a Laravel project set up with Vite for asset bundling. Key Libraries & Tools - **Laravel Wayfinder**: The core package that transpile PHP routes into TypeScript functions. - **Inertia.js**: A framework for building single-page apps using classic server-side routing. - **Vite Plugin Run**: A utility that triggers the generation command whenever PHP files change. - **Ziggy**: While optional, Wayfinder serves as a type-safe alternative or companion to Ziggy's named routes. Code Walkthrough: Installation and Automation First, pull the package into your project using Composer. Although the tool is in beta, it provides immediate value for React or Vue starters. ```bash composer require laravel/wayfinder ``` You can manually generate types using `php artisan wayfinder:generate`. However, to make this truly seamless, integrate it into your `vite.config.js` using the `vite-plugin-run` package. This ensures your types update the moment you save a PHP file. ```javascript import run from 'vite-plugin-run'; export default defineConfig({ plugins: [ run([ { name: 'generate wayfinder', run: ['php', 'artisan', 'wayfinder:generate'], pattern: ['routes/**/*.php', 'app/Http/Controllers/**/*.php'], }, ]), ], }); ``` Implementing Typed Actions In a standard Inertia form, you might use `form.post(route('login'))`. With Wayfinder, you switch to the `submit` method and pass the imported action directly. This removes the need for magic strings. ```typescript import { store } from '@/actions/RegisteredUserController'; const { data, setData, submit } = useForm({ /* ... */ }); const submitForm = () => { submit(store()); }; ``` Syntax Notes and Best Practices Wayfinder uses a functional approach. Instead of referencing a route by a string like `'user.store'`, you import the actual `store` function. This enables IDE features like "Go to Definition," which takes you straight to the PHP controller. For cleaner imports, configure a Vite alias for your generated routes directory. Tips & Gotchas Always check the HTTP method when using the `submit` helper. Wayfinder understands if an action requires `POST`, `PUT`, or `DELETE`, so you don't have to specify the method manually in your frontend code. If a new route isn't appearing, ensure your Vite watcher is running or trigger a manual generation to refresh the TypeScript definitions.
Apr 9, 2025Overview Laravel has fundamentally shifted how developers kickstart projects by replacing traditional packages like Breeze and Jetstream with dedicated application starter kits. The Vue Starter Kit represents a modern bridge between Laravel 12 and the reactive frontend power of Vue 3. Unlike previous versions that felt like external dependencies, these kits are now complete, ready-to-go applications. You own the code from the second you install it, allowing for deep customization without fighting against a vendor-locked library. Prerequisites To follow along, you should have a solid grasp of PHP and JavaScript. Familiarity with the Laravel framework's routing and MVC architecture is essential. On the frontend, you should understand Vue 3's Composition API and Tailwind CSS. You will also need Composer and Node.js installed on your local environment. Key Libraries & Tools * **Inertia.js**: The "glue" that connects Laravel's server-side routing with Vue's client-side reactivity. * **Shadcn Vue**: A port of the popular Shadcn UI library, providing accessible and customizable Vue components. * **Pest**: A elegant PHP testing framework included by default for robust backend verification. * **Vite**: The lightning-fast build tool used for frontend asset compilation. * **SQLite**: The default database configuration for rapid local prototyping. Code Walkthrough Installing the kit is most efficient using the Laravel Installer. Execute the following command to start a new project: ```bash laravel new my-vue-app ``` Once installed, you can modify the application layout dynamically. Navigate to `resources/js/layouts/AppLayout.vue`. The kit provides built-in flexibility to switch between a sidebar or a header-based navigation by simply changing the imported component. For example, to adjust the sidebar behavior, you can modify the `Sidebar` component props: ```vue <app-sidebar collapsible="icon" variant="inset" /> ``` Changing `collapsible` to `off-canvas` or `none` and `variant` to `floating` allows you to reshape the entire dashboard UX in seconds. Authentication logic is found in `routes/web.php` and `routes/auth.php`, utilizing Inertia to render Vue components directly from your controllers. Syntax Notes The kit utilizes the **MustVerifyEmail** contract to gate access to the dashboard. By simply adding this interface to your `User` model, the Laravel backend handles the redirection logic automatically. Furthermore, the use of **Inertia::render()** in your routes ensures that data is passed to your Vue templates as props, eliminating the need for a separate REST or GraphQL API. Practical Examples Beyond standard CRUD, this kit is perfect for building SaaS dashboards. You can easily integrate new UI elements from Shadcn Vue. For instance, if you want to add a toggle for email notifications, you can install the Switch component and drop it into your `Dashboard.vue` file. This modularity ensures your application grows with your business requirements rather than being limited by the starter kit's original scope. Tips & Gotchas Currently, the Vue Starter Kit uses Tailwind 3, whereas the React and Livewire kits have moved to Tailwind 4. This is due to Shadcn Vue currently requiring Tailwind 3 for its styling conventions. When adding new components, always ensure you check if they exist in your local `components/ui` directory to avoid overwriting custom changes during manual updates.
Mar 4, 2025The Shift to Component-First Starter Kits Laravel recently overhauled its ecosystem by introducing a new generation of starter kits. These aren't just mere packages to install; they are complete, standalone application templates. Unlike the older Jetstream or Breeze versions that felt like external dependencies, these new kits belong to you from day one. When you initialize a project using the Livewire starter kit, every line of code—from authentication logic to UI components—is copied into your local directory. This provides total freedom to refactor, delete, or extend the codebase without fighting a vendor folder. Prerequisites and the Modern Stack Before diving in, ensure you have a firm grasp of PHP and the Laravel framework fundamentals. You should also be comfortable with Tailwind CSS for styling. This kit leverages a powerful tech stack: * **Livewire**: The engine for reactive components without writing custom JavaScript. * **Volt**: A functional API for Livewire that allows single-file components. * **Flux**: A high-quality UI component library by Caleb Porzio that provides pre-built buttons, switches, and layouts. * **Vite**: The lightning-fast build tool for managing assets. Code Walkthrough: Collocation with Volt One of the most significant changes in this kit is the move toward Volt components. In traditional Livewire, you manage a PHP class file and a separate Blade file. With Volt, these are collocated into a single `.blade.php` file. ```php <?php use function Livewire\Volt\{state}; state(['notifications' => true]); ?> <div> <flux:switch wire:model="notifications" label="Enable Alerts" /> </div> ``` In the example above, the PHP logic resides in the top block, while the HTML sits directly below. This pattern reduces context switching. When you need to add a feature to the dashboard, you can run `php artisan make:volt notifications` to generate a new component that handles its own state and view in one place. Customizing Layouts and Middleware The kit provides remarkable flexibility for UI structure. By modifying the `application` layout, you can toggle between a `sidebar` or a `header` navigation style instantly. This goes beyond just visuals; it integrates deeply with Laravel's middleware. For instance, to force a user to re-verify their credentials before accessing a sensitive area like password settings, you simply apply the `password.confirm` middleware to the route. This baked-in logic handles the redirection and session management automatically. Syntax Notes and Best Practices Pay close attention to the Flux syntax. It uses the `<flux:component-name />` convention, which mirrors modern frontend frameworks while remaining purely Blade-based. Always keep your Volt components lean; if a component's PHP logic grows too complex, it might be a sign to extract that logic into a dedicated service class. Finally, always run the included Pest tests after modifying authentication flows to ensure your customizations haven't broken core security features.
Feb 28, 2025Overview 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.
Feb 26, 2025Overview Modern web development demands speed without sacrificing architectural integrity. Laravel Cloud solves this by providing a friction-less deployment path for the new Laravel 12 starter kits. This guide demonstrates how to move from a local `laravel new` command to a fully hosted environment in under five minutes, utilizing Livewire and Flux UI for a robust, production-ready foundation. Prerequisites To follow this workflow, you need a basic understanding of PHP and Git. Ensure you have the Laravel Installer (v5.0+) and Composer installed globally. You will also need a GitHub account to act as your source control provider for the cloud sync. Key Libraries & Tools * **Laravel 12**: The core framework providing the application backbone. * **Livewire**: A full-stack framework for building dynamic interfaces without leaving PHP. * **Flux UI**: The official UI component library for Livewire starter kits. * **Pest**: A developer-focused testing framework used for quality assurance. * **Laravel Cloud**: The hosting platform specifically optimized for Laravel applications. Code Walkthrough 1. Project Initiation Start by generating a fresh application with the starter kit flags. This command scaffolds authentication and the UI layer immediately. ```bash laravel new ship-to-cloud --livewire --auth --pest ``` 2. Local Development Orchestration Instead of managing multiple terminal tabs, use the `composer dev` command. This single process manages the PHP server, Vite assets, and Laravel Pail for real-time logging. ```bash composer dev ``` 3. Deployment Configuration Once pushed to GitHub, connect the repository to the Laravel Cloud dashboard. Crucially, ensure your deployment settings include the migration flag to prepare your database on the first boot. ```bash php artisan migrate --force ``` Syntax Notes Notice the use of the `--force` flag in the migration command. In production environments, Laravel protects against accidental data loss by preventing migrations; the force flag overrides this safeguard for automated CI/CD pipelines. Additionally, Laravel 12 utilizes Flux UI components which use a clean, declarative syntax like `<x-layouts.app.sidebar />` to manage complex layouts. Practical Examples This setup is ideal for **SaaS Prototyping**. By creating a "New Feature" branch in Git, Laravel Cloud can automatically spin up a dedicated preview environment. This allows you to test database-heavy changes in isolation before merging into the main production branch. Tips & Gotchas When setting up multiple environments, remember that Laravel Cloud can share a single database cluster across different branches. However, you should create separate database names within that cluster to avoid schema collisions between your `main` and `feature` branches.
Feb 24, 2025The Observability Frontier: Scaling with Laravel Nightwatch Jess Archer kicked off Day 2 by introducing Laravel Nightwatch, a tool that represents the next phase of Laravel's observability story. While Laravel Pulse serves as a self-hosted entry point, Nightwatch is an external service designed to handle billions of events. This distinction is critical: Pulse is limited by the overhead of your local MySQL or PostgreSQL database, while Nightwatch offloads that ingestion to dedicated infrastructure. Architectural Efficiency and Low Impact The Nightwatch Agent operates with a "low-level, memory-sensitive" approach. It avoids higher-level abstractions like Laravel Collections during the critical data-gathering phase to minimize the observer effect. The agent batches data locally on the server, waiting for either 10 seconds or 8 megabytes of data before gzipping and transmitting it. This ensures that performance monitoring doesn't become the bottleneck for high-traffic applications. Real-World Data: The Forge Case Study The power of Nightwatch was demonstrated through a case study of Laravel Forge. In a single month, Forge generated 1.5 billion database queries and 119 million requests. Nightwatch identified a specific issue where a cache-clearing update in a package caused hydration errors when old cached objects couldn't find their missing classes. Archer's team used Nightwatch to pinpoint this 500 error spike and resolve it within five minutes. This level of granularity—tracing a request to a specific queued job and then to a specific cache miss—is what sets Nightwatch apart from traditional logging. The Virtue of Contribution: Open Source as a Growth Engine Chris Morell shifted the focus from tools to the people who build them. His session wasn't just a technical guide to git workflows; it was a philosophical exploration of how open-source contribution serves as a mechanism for personal and professional growth. He utilized Aristotle's "Nicomachean Ethics" to frame the act of submitting a Pull Request (PR) as a practice of virtues like courage, moderation, and magnanimity. Tactical Moderation in PRs The most successful contributions are often the smallest. Morell echoed Taylor Otwell's preference for "two lines changed with immense developer value." This requires a developer to practice moderation—stripping away non-essential features and avoiding the temptation to rewrite entire files based on personal stylistic preferences. A key takeaway for new contributors is the "Hive Mind" approach: spend more time reading existing code to understand the "vibes" and conventions of a project before writing a single line. This ensures that your code looks like it was always meant to be there, increasing the likelihood of a merge. The Live Pull Request In a demonstration of courage, Morell submitted a live PR to the Laravel Framework during his talk. The PR introduced a string helper designed to format comments in Otwell's signature three-line decreasing length style. By using GitHub Desktop to manage upstream syncs and ensuring all tests passed locally, Morell illustrated that the barrier to entry is often psychological rather than technical. Even with a 50% rejection rate for his past PRs, he argued that the resulting community connections and skill leveling make the effort a "win-win." Testing Refinement: Advanced Features in PHPUnit 12 Sebastian Bergman, the creator of PHPUnit, provided a deep dive into the nuances of testing. With PHPUnit 12 launching, Bergman addressed the common misconception that Pest replaces PHPUnit. In reality, Pest is a sophisticated wrapper around PHPUnit's event system. PHPUnit 10 was a foundational shift to an event-based architecture, and PHPUnit 12 continues this trend by removing deprecated features and refining the "outcome versus issues" model. Managing Deprecations and Baselines A common headache for developers is a test suite cluttered with deprecation warnings from third-party vendors. PHPUnit now allows developers to define "first-party code" in the XML configuration. This enables the test runner to ignore indirect deprecations—those triggered in your code but called by a dependency—or ignore warnings coming strictly from the vendor directory. For teams that cannot fix all issues immediately, the "Baseline" feature allows them to record current issues and ignore them in future runs, preventing "warning fatigue" while ensuring new issues are still caught. Sophisticated Code Coverage Bergman urged developers to look beyond 100% line coverage. Line coverage is a coarse metric that doesn't account for complex branching logic. Using Xdebug for path and branch coverage provides a dark/light shade visualization in reports. A dark green line indicates it is explicitly tested by a small, focused unit test, while a light green line indicates it was merely executed during a large integration test. This distinction is vital for mission-critical logic where "executed" is not the same as "verified." Fusion and the Hybrid Front-End Evolution Aaron Francis introduced Fusion, a library that pushes Inertia.js to its logical extreme. Fusion enables a single-file component experience where PHP and Vue.js (or React) coexist in the same file. Unlike "server components" in other ecosystems where the execution environment is often ambiguous, Fusion maintains a strict boundary: PHP runs on the server, and JavaScript runs on the client. Automated Class Generation Behind the scenes, Fusion uses a Vite plugin to extract PHP blocks and pass them to an Artisan command. This command parses the procedural PHP code and transforms it into a proper namespaced class on the disk. It then generates a JavaScript shim that handles the reactive state synchronization. This allows for features like `prop('name')->syncQueryString()`, which automatically binds a PHP variable to a URL parameter and a front-end input without the developer writing a single route or controller. The Developer Experience Francis focused heavily on the developer experience (DX), specifically Hot Module Reloading (HMR) for PHP. When a developer changes a PHP variable in a Vue file, Fusion detects the change, re-runs the logic on the server, and "slots" the new data into the front end without a page refresh. This eliminates the traditional "save and reload" loop, bringing the rapid feedback of front-end development to backend logic. Francis's message was one of empowerment: despite being a former accountant, he built Fusion by "sticking with the problem," encouraging others to build their own "hard parts." Mobile Mastery: PHP on the iPhone Simon Hamp demonstrated what many thought impossible: a Laravel and Livewire application running natively on an iPhone. NativePHP for Mobile utilizes a statically compiled PHP library embedded into a C/Swift wrapper. This allows PHP code to run directly on the device's hardware, rather than just in a remote browser. Bridging to Native APIs The technical challenge lies in calling native hardware functions (like the camera or vibration motor) from PHP. Hamp explained the use of "weak functions" in C that serve as stubs. When the app is compiled, Swift overrides these stubs with actual implementations using iOS-specific APIs like CoreHaptics. On the PHP side, the developer simply calls a function like `vibrate()`. This allows a web developer to build a mobile app using their existing skills in Tailwind CSS and Livewire while still accessing the "Native" feel of the device. The App Store Reality Critically, Hamp proved that Apple's review process is no longer an insurmountable barrier for PHP. His demo app, built on Laravel Cloud, passed review in three days. This marks a turning point for the ecosystem, potentially opening a new market for "web-first" mobile applications that don't require learning React Native or Flutter. While current app sizes are around 150MB due to the included PHP binary, the tradeoff is a massive increase in productivity for the millions of existing PHP developers. Conclusion: The Expanding Village The conference concluded with Cape Morell's moving talk on the "Laravel Village." She highlighted that the technical tools we build—whether it's the sleek new Laravel.com redesign by David Hill or the complex API automation of API Platform—are ultimately about nurturing the community. The $57 million investment from Accel was framed not as a "sell-out," but as an investment in the village's future, ensuring that the framework remains a beacon for productivity and craftsmanship. As the ecosystem moves toward Laravel 12 and the full launch of Laravel Cloud, the focus remains on the "Artisan"—the developer who cares deeply about the "why" behind the code.
Feb 4, 2025Overview Livewire revolutionized the Laravel ecosystem by allowing developers to build dynamic, reactive interfaces without ever leaving the comfort of PHP. However, the broader JavaScript world possesses a massive head start in terms of component libraries and complex client-side utilities. If you need a sophisticated graphing library like Tremor or advanced physics-based animations from Motion, you often face a difficult choice: stick with Livewire and build from scratch, or migrate the entire project to Inertia.js. MingleJS provides a middle ground. It functions as a bridge that lets you embed React or Vue components directly inside your Livewire architecture. This approach means you can keep 95% of your application in standard Blade and Livewire while using "Islands" of JavaScript frameworks for the specific pieces that require them. This hybrid model preserves developer productivity while ensuring you never hit a ceiling when client-side complexity increases. Prerequisites To get the most out of this workflow, you should be comfortable with the following: * **Laravel 10+**: Basic routing, controllers, and Vite configuration. * **Livewire 3**: Understanding component lifecycles, properties, and event dispatching. * **React or Vue**: Familiarity with JSX/SFC syntax and the concept of props. * **Node.js & NPM**: Experience installing packages and running build scripts. Key Libraries & Tools * MingleJS: The primary package providing the `HasMingles` trait and scaffolding commands. * React: A popular UI library for building component-based interfaces. * Vue: A progressive framework used for building user interfaces, also supported by MingleJS. * Motion: A modern animation library (formerly Framer Motion) used for fluid UI transitions. * Vite: The build tool used by Laravel to compile and serve JavaScript assets. Code Walkthrough: Building a Hybrid Component Integrating MingleJS begins with a dedicated artisan command. Unlike standard Livewire components, a "mingled" component consists of both a PHP class and a corresponding JavaScript file. 1. Generating the Component Run the following command to scaffold a React-based mingled component: ```bash php artisan make:mingle ReactMessage ``` This creates two files: `ReactMessage.php` and `ReactMessage.jsx`. The PHP file acts as the Livewire controller, while the `.jsx` file contains your frontend logic. 2. The PHP Logic (Data Provider) In `ReactMessage.php`, you use the `HasMingles` trait. This trait adds a `mingleData()` method where you define the data passed to your JavaScript component. ```python namespace App\Livewire; use UI\Mingle\HasMingles; use Livewire\Component; class ReactMessage extends Component { use HasMingles; public function mingleData() { return [ 'message' => 'Hello from the Server!', 'user_id' => auth()->id(), ]; } public function sendServerAlert($payload) { // Logic to handle data sent back from React logger($payload); } } ``` 3. The React Frontend (Data Consumer) In `ReactMessage.jsx`, MingleJS automatically injects a `wire` object and your `mingleData`. You can interact with the server using `wire.call()`. ```javascript import React from 'react'; export default function ReactMessage({ wire, mingleData }) { const handleClick = () => { // Calling the PHP method directly from React wire.call('sendServerAlert', 'Hello from React!'); }; return ( <div className="p-4 bg-white shadow"> <h1>{mingleData.message}</h1> <button onClick={handleClick} className="btn-primary"> Talk to Livewire </button> </div> ); } ``` 4. Handling Events Across Boundaries MingleJS supports Livewire's event system. If a standard Livewire component on the page dispatches an event, your React component can listen for it using `wire.on()`. ```javascript // Inside your React component useEffect or setup wire.on('item-added', (data) => { console.log('React heard an event from PHP:', data); }); ``` Syntax Notes * **The Wire Prop**: This is the most critical piece of the MingleJS bridge. It mimics the behavior of Livewire's `wire:click` or `wire:model` but within a JavaScript framework context. * **Lazy Loading**: You can mark components as lazy by using the `#[Lazy]` attribute in your PHP class. MingleJS will then handle the deferred loading of the JavaScript assets until the component is visible in the viewport. * **MingleData Serialization**: All data returned in `mingleData()` must be JSON-serializable. Avoid passing complex PHP objects; instead, pass arrays or simple primitives. Practical Examples Advanced Dashboard Charts While Livewire can render basic charts via SVG, a library like Tremor (built for React) offers much deeper interactivity. You can fetch your analytics in PHP, pass the raw data through `mingleData`, and let React handle the complex rendering and tooltips. Rich Text Editors Integrating heavy JavaScript editors like Tiptap or Quill into Livewire often results in "DOM clobbering" issues when Livewire updates the page. By containerizing the editor in a MingleJS React component, you isolate the editor's DOM state from Livewire's diffing engine, preventing the cursor from jumping or the editor from resetting. Migration Bridge If you are gradually moving a legacy Vue SPA into a newer Laravel project, you don't have to rewrite every component as a Livewire class immediately. You can wrap existing Vue components in MingleJS, allowing them to function within your new Blade layouts while they wait for their eventual refactor. Tips & Gotchas * **Avoid Over-Mingling**: Use MingleJS sparingly. If a component can be built with Alpine.js and standard Livewire, that will always be more performant than loading the entire React runtime. * **Asset Sizes**: Every framework you add (React, Vue, etc.) increases your JavaScript bundle. If you use MingleJS for React on one page and Vue on another, your users are downloading both runtimes. Stick to one JavaScript framework if possible. * **State Persistence**: Remember that when Livewire refreshes the parent component, the MingleJS component might re-mount. Ensure you are either syncing state back to the server using `wire.call` or utilizing Livewire's `wire:ignore` to prevent unwanted re-renders. * **Vite Configuration**: Ensure your `vite.config.js` is properly set up to handle the specific framework you are using. If you are using React, you need the `@vitejs/plugin-react` plugin active.
Jan 28, 2025