Laravel Herd

Overview of Social Authentication Integrating Google and GitHub login options is a standard requirement for modern SaaS applications. This technique removes the friction of manual registration, allowing users to authenticate via trusted third-party providers. By utilizing Laravel Socialite, developers can manage the complex OAuth2 flow through a clean, expressive API, ensuring secure token exchanges and user data retrieval without writing custom integration logic for every provider. Prerequisites To follow this guide, you should have a solid grasp of PHP and the Laravel framework. You will need a local development environment set up with Laravel Herd or a similar tool. Familiarity with Eloquent ORM and basic database migrations is essential for handling user records. Key Libraries & Tools * **Laravel Socialite**: An official package that simplifies OAuth authentication with various social providers. * **Expose**: A tunneling service by Beyond Code that makes local sites accessible via a public URL for webhook and OAuth testing. * **Flux**: A UI component library used here to create clean, accessible login buttons within the Livewire ecosystem. Code Walkthrough First, install the package via Composer: ```bash composer require laravel/socialite ``` Configure your routes to handle the redirect and the callback. Using a variable provider slug allows a single controller method to handle multiple services: ```python Route::get('/auth/{provider}/redirect', [SocialiteController::class, 'redirect'])->name('socialite.redirect'); Route::get('/auth/{provider}/callback', [SocialiteController::class, 'callback']); ``` In the `SocialiteController`, use `stateless()` when testing with tunneling services like Expose to avoid session mismatches. The `firstOrCreate` method ensures users are matched by email or created if they are new: ```python public function callback($provider) { $socialUser = Socialite::driver($provider)->stateless()->user(); $user = User::firstOrCreate( ['email' => $socialUser->getEmail()], [ 'name' => $socialUser->getName(), 'provider' => $provider, 'provider_id' => $socialUser->getId(), ] ); Auth::login($user); return redirect('/dashboard'); } ``` Syntax Notes Laravel Socialite uses a fluent interface. The `driver($provider)` method dynamically selects the authentication logic based on the string passed (e.g., 'google'). The `stateless()` call is a specific convention used to disable session state verification, which is often necessary when the redirect URL differs from the local domain during development. Practical Examples Beyond simple login, this setup allows for "Social Linking" where an existing user can connect their GitHub account to their profile to enable repository integrations. In a SaaS context, this provides the foundation for pulling user data like avatars directly from social profiles to populate the application UI. Tips & Gotchas One common pitfall involves the `users` table schema. Since social users don't provide a password, you must make the `password` column `nullable` in your migration. Additionally, always update your `.env.example` file when adding provider credentials so your team knows which keys are required for their local setups.

Overview Selecting a starter kit for a Laravel SaaS is a pivotal decision that impacts long-term maintainability. A starter kit provides the scaffolding for authentication, profile management, and UI layouts, allowing you to focus on unique business logic. The goal is to find a balance between modern features—like Tailwind CSS 4—and a low barrier to entry for backend developers who may not want to manage complex frontend build steps. Prerequisites To follow this implementation, you should have a baseline understanding of PHP and the Laravel framework. Familiarity with the terminal, Composer, and basic Blade templating is essential. You should also have Laravel Herd or a similar local environment installed to serve your application. Key Libraries & Tools * **Livewire**: A full-stack framework for Laravel that builds dynamic interfaces using PHP. * **Flux**: A UI component library (free version included) that powers the modern starter kit aesthetics. * **Tailwind CSS**: The utility-first CSS framework used for styling. * **Laravel Breeze**: A minimal authentication starter kit often used for simple Blade-based projects. Code Walkthrough Initial installation begins with the Laravel installer. Choosing the Livewire stack ensures you have access to modern UI components while remaining compatible with standard Blade workflows. ```bash laravel new my-saas-app Select Livewire when prompted Select No for Laravel Volt if you prefer standard Class-based components Run the frontend build npm install && npm run build ``` Once installed, you can create standard routes and views without touching Livewire logic if you prefer a traditional controller-based approach. For instance, creating an "About" page involves defining a route and extending the application layout. ```php // routes/web.php Route::get('/about', function () { return view('pages.about'); })->name('about'); ``` In the view, use the provided layout component to maintain a consistent sidebar and navigation design. ```html <!-- resources/views/pages/about.blade.php --> <x-layouts.app> <div class="p-6"> <h1 class="text-2xl font-bold">About Our SaaS</h1> <p>This page uses standard Blade syntax within the Livewire starter kit.</p> </div> </x-layouts.app> ``` Syntax Notes The Livewire starter kit utilizes **Blade Components** (prefixed with `x-`) and **Flux Components**. Notice the `<x-layouts.app>` tag; this is a component-based approach to layout management that replaces the older `@extends` and `@section` directives. It simplifies data passing and maintains a cleaner HTML structure. Practical Examples This setup is ideal for building multi-tenant applications or subscription-based platforms. By utilizing the built-in Livewire components for profile management and two-factor authentication, you save dozens of hours of development time. You can then layer your specific SaaS features—like billing or team management—using standard Laravel controllers and Blade views. Tips & Gotchas Avoid the trap of choosing older starter kits like Laravel Breeze with Tailwind CSS 3 if you want the easiest upgrade path to future Laravel versions. While community kits like Lara Fast or Sassy Kit offer more features out of the box, they introduce third-party dependencies that may not be updated as frequently as official first-party tools.

Overview Modern dashboard development often forces a choice between heavy JavaScript frameworks or bare-bones styling. TailAdmin Laravel bridges this gap by offering a comprehensive, Tailwind-based UI designed specifically for the Laravel ecosystem. This guide demonstrates how to utilize the TailAdmin Laravel Starter Kit to implement essential authentication and dynamic data tables without the overhead of React or Vue. Prerequisites To follow this walkthrough, you need a basic understanding of PHP and the Laravel MVC pattern. Familiarity with Tailwind CSS for styling and Blade for templating is required. You should have a local development environment (like Laravel Herd) ready for a fresh installation. Key Libraries & Tools - **TailAdmin**: A high-quality Tailwind CSS admin dashboard template. - **Blade Components**: Laravel's native templating system used for reusable UI elements. - **Alpine.js**: A minimal framework for handling client-side interactions like dropdowns and sidebar toggles. - **Laravel Daily Starter Kit**: The underlying foundation for the authentication logic. Code Walkthrough: Implementing Dynamic Tables To move beyond the hard-coded demos, you must connect the UI components to your database. Here is how to create a dynamic user list. 1. Controller and Routing Define a standard resource route and fetch data in your controller. ```php // routes/web.php Route::resource('users', UserController::class); // app/Http/Controllers/UserController.php public function index() { $users = User::paginate(10); return view('users.index', compact('users')); } ``` 2. Customizing the Blade View Replace the TailAdmin placeholder data with a Blade `@foreach` loop to render actual database records. ```html <!-- resources/views/users/index.blade.php --> <x-app-layout> <div class="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5"> <table class="w-full table-auto"> <thead> <tr class="bg-gray-2 text-left"> <th class="py-4 px-4 font-medium text-black">Name</th> <th class="py-4 px-4 font-medium text-black">Email</th> </tr> </thead> <tbody> @foreach($users as $user) <tr> <td class="border-b border-[#eee] py-5 px-4">{{ $user->name }}</td> <td class="border-b border-[#eee] py-5 px-4">{{ $user->email }}</td> </tr> @endforeach </tbody> </table> </div> </x-app-layout> ``` Syntax Notes This implementation relies on **Blade Components** (using the `x-` prefix). The starter kit utilizes a **Menu Helper** class to manage the sidebar programmatically. Instead of hard-coding links in the HTML, you add arrays to the helper to maintain a clean, centralized navigation structure. Practical Examples This kit is ideal for internal management tools, SaaS backends, or MVP projects where speed of delivery is paramount. It provides out-of-the-box support for **Dark Mode** and **Profile Management**, allowing you to focus on core business logic rather than UI boilerplate. Tips & Gotchas When copying components from the original TailAdmin demo, ensure you remove the `x-data` Alpine.js attributes if you are handling the data rendering via PHP. Keeping unnecessary Alpine logic can lead to conflicts if you attempt to mix server-side rendering with client-side state management incorrectly.

Overview Laravel just released versions 12.34 and 12.35, introducing powerful tools to manage asynchronous tasks and system resilience. These updates focus on improving the user experience by moving heavy workloads out of the request-response cycle and providing robust failover mechanisms for mission-critical services like Redis. Prerequisites To follow along, you should have a solid grasp of: * PHP 8.2 or higher * Basic understanding of the Laravel Service Container and Queues * Familiarity with `config/cache.php` and `config/queue.php` structures Key Libraries & Tools * **Laravel Framework**: The core PHP framework receiving these updates. * **Redis**: Often used as the primary driver for both caching and queuing. * **Laravel Herd**: A local development environment used to demonstrate service management. The Deferred Queue Connection One of the most impactful additions is the `deferred` queue connection. Unlike the standard `sync` driver—which blocks the user's browser until the job finishes—the `deferred` driver processes the job immediately after the HTTP response is sent to the client. ```php // In your Controller ProcessNewPost::dispatch($post)->onConnection('deferred'); return redirect()->route('posts.index'); ``` By switching to the `deferred` connection, the user sees an immediate redirect, while the "heavy" logic runs in the background. This provides the speed of an asynchronous worker without needing to configure a separate daemon for local development. Implementing Failover Strategies Systems fail. Laravel now provides a native `failover` driver for both Cache and Queues. If your primary Redis instance goes down, the system automatically falls back to your secondary store. ```php // config/cache.php 'stores' => [ 'failover' => [ 'driver' => 'failover', 'stores' => ['redis', 'database', 'array'], ], ] ``` Syntax Notes * **Fluent Configuration**: The `failover` driver expects a prioritized list of stores in the `stores` array. * **Driver Switching**: You must update your `.env` file (e.g., `CACHE_STORE=failover`) to activate these strategies. Tips & Gotchas * **Persistence**: Remember that the `array` cache driver is not persistent across requests; use `database` as a secondary fallback if data persistence is required during Redis outages. * **Debugging**: When using the `deferred` connection, use `Log::info()` to verify job completion since you won't see errors in the browser once the response is sent.

Overview of Custom Starter Kits While Laravel provides polished official starter kits for Livewire, Vue, and React, the framework's beauty lies in its flexibility. Developers often have unique requirements—perhaps a Svelte frontend or a pre-configured SaaS boilerplate. The Laravel Installer now bridges this gap by supporting community-created starter kits. This allows you to bootstrap entire applications from any GitHub repository, ensuring your preferred architecture is ready to go in seconds. Prerequisites To follow this guide, you should have a solid grasp of PHP and the Laravel framework. You must have the Laravel Installer (version 5.0 or higher) installed globally. Familiarity with Composer and the command line is essential for managing dependencies and project initialization. Key Libraries & Tools * **Laravel Installer**: The command-line utility used to create new projects. * **Laravel Herd**: A fast, lightweight development environment for macOS and Windows. * **Wave**: A popular community starter kit by DevDojo specifically for SaaS development. Code Walkthrough: Using the New Parameter The core of this update is the `--using` parameter. Instead of relying on the interactive prompt to select official kits, you point the installer directly to a GitHub repository. ```bash laravel new my-awesome-project --using="devdojo/wave" ``` The installer performs several tasks behind the scenes. First, it clones the repository specified in the `vendor/repo` format. Once the files are local, it handles the standard Laravel setup. Finally, it prompts you to run asset compilation: ```bash The installer will ask: "Would you like to run npm install and npm build?" ``` By selecting yes, the installer finishes the frontend scaffolding, leaving you with a fully functional, customized application environment. Syntax Notes The `--using` flag follows a specific convention: `organization/repository`. This mirrors how you require packages in Composer. Unlike official kits, community kits skip many interactive prompts (like database or testing suite selection) because the starter kit author typically hardcodes these choices into the repository structure. Practical Examples and One-Click Installs A powerful new feature is the integration with Laravel Herd. On repository pages like Wave, you may now see an "Install with Herd" link. Clicking this triggers a browser protocol that opens Laravel Herd directly, allowing you to name the project and set its local path through a GUI rather than the terminal. This creates a seamless bridge between finding a tool on GitHub and running it on your local machine. Tips & Gotchas Always verify the source of a community kit before running it. Since the installer clones and executes code from these repositories, ensure you trust the maintainer. If your custom kit requires specific environment variables, remember to check the `.env.example` file immediately after installation, as the generic Laravel setup might not cover every custom configuration option.

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.

Overview: Why Modern Starter Kits Matter Building a robust authentication system from scratch is a repetitive, error-prone task that can stall the momentum of a new project. Laravel has long solved this with Breeze and Jetstream, but the latest evolution of Laravel Starter Kits shifts the focus toward modern UI aesthetics and developer experience. These kits aren't just boilerplate; they are a curated selection of industry-best tools like Tailwind CSS V4 and Shadcn UI, providing a professional-grade foundation for SaaS applications. By leveraging these kits, you bypass the hours spent configuring build tools, setting up dark mode, and designing responsive sidebars. Instead, you start with a fully functional, high-fidelity dashboard that is ready for production. This tutorial explores the React and Livewire flavors of these kits, demonstrating how to install, customize, and extend them to fit your specific application needs. Prerequisites To follow along with this guide, you should have a baseline understanding of the following: * **PHP & Laravel:** Basic familiarity with the Laravel framework, including Eloquent models and routing. * **Terminal Usage:** Comfort using the command line to run `composer` and `php artisan` commands. * **Local Development Environment:** Tools like Laravel Herd or Valet to serve your local `.test` sites. * **Frontend Basics:** A working knowledge of either React (for the Inertia kit) or Blade templates (for the Livewire kit). Key Libraries & Tools Before we dive into the code, let's identify the heavy lifters in these new kits: * **Laravel Starter Kits:** The official scaffolding packages for rapid application setup. * **Shadcn UI:** A collection of re-usable components built using Radix UI and Tailwind CSS. Unlike a traditional library, these are copied directly into your project for total control. * **Tailwind CSS V4:** The newest version of the utility-first CSS framework, featuring improved performance and a simplified configuration process. * **Inertia.js V2:** The bridge between Laravel and modern frontend frameworks like React or Vue. * **Livewire & Volt:** A full-stack framework for Laravel that allows you to build dynamic interfaces using PHP. Volt adds an elegant, single-file functional API to Livewire. * **Pest:** A delightful PHP testing framework focused on simplicity and readability. Code Walkthrough: Installing and Customizing React The React starter kit uses Inertia.js to deliver a seamless single-page application (SPA) experience. Let's look at the installation process and how to toggle between different visual layouts. 1. Installation Start by using the Laravel installer to create a new project. You will be prompted to choose your stack. Select React and choose the built-in Laravel authentication unless you specifically need WorkOS integration. ```bash Create a new React project laravel new react-app ``` During installation, you can opt for Pest as your testing framework. The installer uses a "drift" plugin to automatically convert standard PHPUnit tests into the Pest syntax, ensuring your test suite is modern from day one. 2. Switching Layouts in React The new kits include multiple authentication layouts: `Simple`, `Card`, and `Split`. To change the appearance of your login or registration pages, you only need to modify a single import in the Inertia layout file. Navigate to `resources/js/layouts/auth-layout.tsx` (or the equivalent `.js` file). You can swap the layout component being used: ```javascript // resources/js/layouts/auth-layout.tsx // To change to a split layout with a quote and image on the left: import { AuthSplitLayout } from '@/layouts/auth/auth-split-layout'; export default function AuthLayout({ children }) { return <AuthSplitLayout children={children} />; } ``` 3. Adding Shadcn Components Because Shadcn UI components are just files in your `resources` directory, adding new ones is a matter of running an `npx` command. For instance, to add a toggle switch to your dashboard: ```bash npx shadcn-ui@latest add switch ``` Then, import it directly into your dashboard page: ```javascript // resources/js/pages/dashboard.tsx import { Switch } from "@/components/ui/switch"; export default function Dashboard() { return ( <div> <h1>Dashboard</h1> <Switch /> </div> ); } ``` Deep Dive: Livewire, Volt, and Functional PHP If you prefer staying within the PHP ecosystem while maintaining a dynamic frontend, the Livewire kit is the primary choice. This kit heavily utilizes Volt, which allows you to define your component logic and Blade template in the same file. 1. Creating a Volt Component A Volt component represents a modern way to handle state in Laravel. Instead of having a separate Class file and Blade file, everything is co-located. ```bash php artisan make:volt counter ``` This creates a file at `resources/views/livewire/counter.blade.php`. Here is how you write a functional counter using the Volt API: ```php <?php use function Livewire\Volt\{state}; state(['count' => 0]); $increment = fn () => $this->count++; ?> <div> <h1>{{ $count }}</h1> <button wire:click="increment">+</button> </div> ``` 2. Livewire Routing Livewire components can be served as full-page components. In your `routes/web.php`, you can map a URL directly to a Volt component without needing a controller: ```php use Livewire\Volt\Volt; Volt::route('/counter', 'counter'); ``` This approach dramatically reduces the "boilerplate" code required to get a functional page onto the screen. Syntax Notes * **Class Names:** In React components, remember to use `className` instead of `class`. When working with the Split Layout, ensure your text colors (like `text-white`) are applied to visible containers, or they may be obscured by background divs. * **Middleware:** The kits come with `password.confirm` middleware pre-configured. Applying this to a route forces the user to re-enter their password before viewing sensitive settings. * **Email Verification:** To enable mandatory email verification, simply ensure your `User` model implements the `MustVerifyEmail` contract and uncomment the relevant line in your model file. Practical Examples * **SaaS Dashboard:** Use the `SidebarLayout` as the foundation for a multi-tenant dashboard. Since the sidebar is fully customizable, you can easily add dynamic menu items based on the user's subscription tier. * **Marketing Pages:** The `AuthSplitLayout` is perfect for modern landing pages where you want a high-resolution brand image or customer testimonial to sit alongside the sign-up form. * **Internal Tools:** Use the Livewire kit with Shadcn equivalents to build rapid CRUD interfaces. The ability to keep logic and views in a single Volt file makes maintaining dozens of internal forms much easier. Tips & Gotchas * **Asset Watcher:** Always keep `npm run dev` or `vite` running in the background. If your layout changes aren't appearing, it's likely because the asset watcher isn't picking up your file saves. * **Shadcn Portability:** Remember that Shadcn UI isn't a package you update via `composer` or `npm`. If you want the latest version of a component, you generally re-run the `add` command and overwrite the existing file. * **Vue Compatibility:** If you choose the Vue starter kit, be aware that as of early 2025, some Shadcn Vue components may still be catching up to Tailwind CSS V4. Check the official documentation for the latest compatibility patches. * **Testing:** Use Pest to verify your customizations. If you delete a component you think is unused, run `vendor/bin/pest` to ensure you haven't broken a dependency in the authentication flow.