DocBrazandeh
بازگشت
فهرست ها

Starter Kits

Introduction

To give you a head start building your new Laravel application, we are happy to offer application starter kits. These starter kits give you a head start on building your next Laravel application, and include the routes, controllers, and views you need to register and authenticate your application's users. The starter kits use Laravel Fortify to provide authentication.

While you are welcome to use these starter kits, they are not required. You are free to build your own application from the ground up by simply installing a fresh copy of Laravel. Either way, we know you will build something great!

Creating an Application Using a Starter Kit

To create a new Laravel application using one of our starter kits, you should first install PHP and the Laravel CLI tool. If you already have PHP and Composer installed, you may install the Laravel installer CLI tool via Composer:


composer global require laravel/installer

Then, create a new Laravel application using the Laravel installer CLI. The Laravel installer will prompt you to select your preferred starter kit:


laravel new my-app

After creating your Laravel application, you only need to install its frontend dependencies via NPM and start the Laravel development server:


cd my-app

npm install && npm run build

composer run dev

Once you have started the Laravel development server, your application will be accessible in your web browser at http://localhost:8000.

Available Starter Kits

React

Our React starter kit provides a robust, modern starting point for building Laravel applications with a React frontend using Inertia.

Inertia allows you to build modern, single-page React applications using classic server-side routing and controllers. This lets you enjoy the frontend power of React combined with the incredible backend productivity of Laravel and lightning-fast Vite compilation.

The React starter kit utilizes React 19, TypeScript, Tailwind, and the shadcn/ui component library.

Svelte

Our Svelte starter kit provides a robust, modern starting point for building Laravel applications with a Svelte frontend using Inertia.

Inertia allows you to build modern, single-page Svelte applications using classic server-side routing and controllers. This lets you enjoy the frontend power of Svelte combined with the incredible backend productivity of Laravel and lightning-fast Vite compilation.

The Svelte starter kit utilizes Svelte 5, TypeScript, Tailwind, and the shadcn-svelte component library.

Vue

Our Vue starter kit provides a great starting point for building Laravel applications with a Vue frontend using Inertia.

Inertia allows you to build modern, single-page Vue applications using classic server-side routing and controllers. This lets you enjoy the frontend power of Vue combined with the incredible backend productivity of Laravel and lightning-fast Vite compilation.

The Vue starter kit utilizes the Vue Composition API, TypeScript, Tailwind, and the shadcn-vue component library.

Livewire

Our Livewire starter kit provides the perfect starting point for building Laravel applications with a Laravel Livewire frontend.

Livewire is a powerful way of building dynamic, reactive, frontend UIs using just PHP. It's a great fit for teams that primarily use Blade templates and are looking for a simpler alternative to JavaScript-driven SPA frameworks like React, Svelte, and Vue.

The Livewire starter kit utilizes Livewire, Tailwind, and the Flux UI component library.

Starter Kit Customization

React

Our React starter kit is built with Inertia 3, React 19, Tailwind 4, and shadcn/ui. As with all of our starter kits, all of the backend and frontend code exists within your application to allow for full customization.

The majority of the frontend code is located in the resources/js directory. You are free to modify any of the code to customize the appearance and behavior of your application:


resources/js/

├── components/    # Reusable React components

├── hooks/         # React hooks

├── layouts/       # Application layouts

├── lib/           # Utility functions and configuration

├── pages/         # Page components

└── types/         # TypeScript definitions

To publish additional shadcn components, first find the component you want to publish. Then, publish the component using npx:


npx shadcn@latest add switch

In this example, the command will publish the Switch component to resources/js/components/ui/switch.tsx. Once the component has been published, you can use it in any of your pages:


import { Switch } from "@/components/ui/switch"

  

const MyPage = () => {

  return (

    <div>

      <Switch />

    </div>

  );

};

  

export default MyPage;

Available Layouts

The React starter kit includes two different primary layouts for you to choose from: a "sidebar" layout and a "header" layout. The sidebar layout is the default, but you can switch to the header layout by modifying the layout that is imported at the top of your application's resources/js/layouts/app-layout.tsx file:


import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; // [tl! remove]

import AppLayoutTemplate from '@/layouts/app/app-header-layout'; // [tl! add]

Sidebar Variants

The sidebar layout includes three different variants: the default sidebar variant, the "inset" variant, and the "floating" variant. You may choose the variant you like best by modifying the resources/js/components/app-sidebar.tsx component:


<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]

<Sidebar collapsible="icon" variant="inset"> [tl! add]

Authentication Page Layout Variants

The authentication pages included with the React starter kit, such as the login page and registration page, also offer three different layout variants: "simple", "card", and "split".

To change your authentication layout, modify the layout that is imported at the top of your application's resources/js/layouts/auth-layout.tsx file:


import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; // [tl! remove]

import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'; // [tl! add]

Svelte

Our Svelte starter kit is built with Inertia 3, Svelte 5, Tailwind, and shadcn-svelte. As with all of our starter kits, all of the backend and frontend code exists within your application to allow for full customization.

The majority of the frontend code is located in the resources/js directory. You are free to modify any of the code to customize the appearance and behavior of your application:


resources/js/

├── components/    # Reusable Svelte components

├── layouts/       # Application layouts

├── lib/           # Utility functions and configuration and Svelte rune modules

├── pages/         # Page components

└── types/         # TypeScript definitions

To publish additional shadcn-svelte components, first find the component you want to publish. Then, publish the component using npx:


npx shadcn-svelte@latest add switch

In this example, the command will publish the Switch component to resources/js/components/ui/switch/switch.svelte. Once the component has been published, you can use it in any of your pages:


<script lang="ts">

    import { Switch } from '@/components/ui/switch'

</script>

  

<div>

    <Switch />

</div>

Available Layouts

The Svelte starter kit includes two different primary layouts for you to choose from: a "sidebar" layout and a "header" layout. The sidebar layout is the default, but you can switch to the header layout by modifying the layout that is imported at the top of your application's resources/js/layouts/AppLayout.svelte file:


import AppLayout from '@/layouts/app/AppSidebarLayout.svelte'; // [tl! remove]

import AppLayout from '@/layouts/app/AppHeaderLayout.svelte'; // [tl! add]

Sidebar Variants

The sidebar layout includes three different variants: the default sidebar variant, the "inset" variant, and the "floating" variant. You may choose the variant you like best by modifying the resources/js/components/AppSidebar.svelte component:


<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]

<Sidebar collapsible="icon" variant="inset"> [tl! add]

Authentication Page Layout Variants

The authentication pages included with the Svelte starter kit, such as the login page and registration page, also offer three different layout variants: "simple", "card", and "split".

To change your authentication layout, modify the layout that is imported at the top of your application's resources/js/layouts/AuthLayout.svelte file:


import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte'; // [tl! remove]

import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte'; // [tl! add]

Vue

Our Vue starter kit is built with Inertia 3, Vue 3 Composition API, Tailwind, and shadcn-vue. As with all of our starter kits, all of the backend and frontend code exists within your application to allow for full customization.

The majority of the frontend code is located in the resources/js directory. You are free to modify any of the code to customize the appearance and behavior of your application:


resources/js/

├── components/    # Reusable Vue components

├── composables/   # Vue composables / hooks

├── layouts/       # Application layouts

├── lib/           # Utility functions and configuration

├── pages/         # Page components

└── types/         # TypeScript definitions

To publish additional shadcn-vue components, first find the component you want to publish. Then, publish the component using npx:


npx shadcn-vue@latest add switch

In this example, the command will publish the Switch component to resources/js/components/ui/Switch.vue. Once the component has been published, you can use it in any of your pages:


<script setup lang="ts">

import { Switch } from '@/components/ui/switch'

</script>

  

<template>

    <div>

        <Switch />

    </div>

</template>

Available Layouts

The Vue starter kit includes two different primary layouts for you to choose from: a "sidebar" layout and a "header" layout. The sidebar layout is the default, but you can switch to the header layout by modifying the layout that is imported at the top of your application's resources/js/layouts/AppLayout.vue file:


import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // [tl! remove]

import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; // [tl! add]

Sidebar Variants

The sidebar layout includes three different variants: the default sidebar variant, the "inset" variant, and the "floating" variant. You may choose the variant you like best by modifying the resources/js/components/AppSidebar.vue component:


<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]

<Sidebar collapsible="icon" variant="inset"> [tl! add]

Authentication Page Layout Variants

The authentication pages included with the Vue starter kit, such as the login page and registration page, also offer three different layout variants: "simple", "card", and "split".

To change your authentication layout, modify the layout that is imported at the top of your application's resources/js/layouts/AuthLayout.vue file:


import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; // [tl! remove]

import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue'; // [tl! add]

Livewire

Our Livewire starter kit is built with Livewire 4, Tailwind, and Flux UI. As with all of our starter kits, all of the backend and frontend code exists within your application to allow for full customization.

The majority of the frontend code is located in the resources/views directory. You are free to modify any of the code to customize the appearance and behavior of your application:


resources/views

├── components            # Reusable components

├── flux                  # Customized Flux components

├── layouts               # Application layouts

├── pages                 # Livewire pages

├── partials              # Reusable Blade partials

├── dashboard.blade.php   # Authenticated user dashboard

├── welcome.blade.php     # Guest user welcome page

Available Layouts

The Livewire starter kit includes two different primary layouts for you to choose from: a "sidebar" layout and a "header" layout. The sidebar layout is the default, but you can switch to the header layout by modifying the layout that is used by your application's resources/views/layouts/app.blade.php file. In addition, you should add the container attribute to the main Flux component:


<x-layouts::app.header>

    <flux:main container>

        {{ $slot }}

    </flux:main>

</x-layouts::app.header>

Authentication Page Layout Variants

The authentication pages included with the Livewire starter kit, such as the login page and registration page, also offer three different layout variants: "simple", "card", and "split".

To change your authentication layout, modify the layout that is used by your application's resources/views/layouts/auth.blade.php file:


<x-layouts::auth.split>

    {{ $slot }}

</x-layouts::auth.split>

Authentication

All starter kits use Laravel Fortify to handle authentication. Fortify provides routes, controllers, and logic for login, registration, password reset, email verification, and more.

Fortify automatically registers the following authentication routes based on the features that are enabled in your application's config/fortify.php configuration file:

| Route                              | Method | Description                         |

| ---------------------------------- | ------ | ----------------------------------- |

| /login                           | GET    | Display login form                  |

| /login                           | POST   | Authenticate user                   |

| /logout                          | POST   | Log user out                        |

| /register                        | GET    | Display registration form           |

| /register                        | POST   | Create new user                     |

| /forgot-password                 | GET    | Display password reset request form |

| /forgot-password                 | POST   | Send password reset link            |

| /reset-password/{token}          | GET    | Display password reset form         |

| /reset-password                  | POST   | Update password                     |

| /email/verify                    | GET    | Display email verification notice   |

| /email/verify/{id}/{hash}        | GET    | Verify email address                |

| /email/verification-notification | POST   | Resend verification email           |

| /user/confirm-password           | GET    | Display password confirmation form  |

| /user/confirm-password           | POST   | Confirm password                    |

| /two-factor-challenge            | GET    | Display 2FA challenge form          |

| /two-factor-challenge            | POST   | Verify 2FA code                     |

The php artisan route:list Artisan command can be used to display all of the routes in your application.

Enabling and Disabling Features

You can control which Fortify features are enabled in your application's config/fortify.php configuration file:


use Laravel\Fortify\Features;

  

'features' => [

    Features::registration(),

    Features::resetPasswords(),

    Features::emailVerification(),

    Features::twoFactorAuthentication([

        'confirm' => true,

        'confirmPassword' => true,

    ]),

],

To disable a feature, comment out or remove that feature entry from the features array. For example, remove Features::registration() to disable public registration.

When using the React, Svelte or Vue starter kits, you will also need to remove any references to the disabled feature's routes in your frontend code. For example, if you disable email verification, you should remove the imports and references to the verification routes in your React, Svelte, or Vue components. This is necessary because these starter kits use Wayfinder for type-safe routing, which generates route definitions at build time. If you reference routes that no longer exist, your application will fail to build.

Customizing User Creation and Password Reset

When a user registers or resets their password, Fortify invokes action classes located in your application's app/Actions/Fortify directory:

| File                          | Description                           |

| ----------------------------- | ------------------------------------- |

| CreateNewUser.php           | Validates and creates new users       |

| ResetUserPassword.php       | Validates and updates user passwords  |

| PasswordValidationRules.php | Defines password validation rules     |

For example, to customize your application's registration logic, you should edit the CreateNewUser action:


public function create(array $input): User

{

    Validator::make($input, [

        'name' => ['required', 'string', 'max:255'],

        'email' => ['required', 'email', 'max:255', 'unique:users'],

        'phone' => ['required', 'string', 'max:20'], // [tl! add]

        'password' => $this->passwordRules(),

    ])->validate();

  

    return User::create([

        'name' => $input['name'],

        'email' => $input['email'],

        'phone' => $input['phone'], // [tl! add]

        'password' => Hash::make($input['password']),

    ]);

}

Two-Factor Authentication

Starter kits include built-in two-factor authentication (2FA), allowing users to secure their accounts using any TOTP-compatible authenticator app. 2FA is enabled by default via Features::twoFactorAuthentication() in your application's config/fortify.php configuration file.

The confirm option requires users to verify a code before 2FA is fully enabled, while confirmPassword requires password confirmation before enabling or disabling 2FA. For more details, see Fortify's two-factor authentication documentation.

Rate Limiting

Rate limiting prevents brute-forcing and repeated login attempts from overwhelming your authentication endpoints. You can customize Fortify's rate limiting behavior in your application's FortifyServiceProvider:


use Illuminate\Support\Facades\RateLimiter;

use Illuminate\Cache\RateLimiting\Limit;

  

RateLimiter::for('login', function ($request) {

    return Limit::perMinute(5)->by($request->email.$request->ip());

});

Teams

The React, Svelte, Vue, and Livewire starter kits may also be generated with team support. When the teams feature is enabled, each user belongs to one or more teams and has a current team. During registration, new users are automatically given a personal team. The starter kits also include team management screens for creating teams, switching between teams, inviting members, and updating team details.

When a route is scoped to the current team, the current team's slug is included in the URL. For example, the dashboard route becomes /{current_team}/dashboard, while team management pages use routes such as settings/teams/{team}. When using the {current_team} and {team} route parameters, the starter kits automatically ensure that the authenticated user belongs to the requested team before allowing access to the route.

To make generating team-aware URLs more convenient, the starter kits register URL defaults for the authenticated user's current team. This allows calls to helpers such as route('dashboard') to automatically include the current team's slug. When a user signs in, registers, or switches teams, the starter kits update the current team and refresh these URL defaults so generated links continue to use the correct team context.

When creating or renaming a team, the starter kits also prevent users from choosing reserved names that could produce unsafe or conflicting route segments. For example, names that would collide with route prefixes such as settings, login, or dashboard may not be used.

WorkOS AuthKit Authentication

By default, the React, Svelte, Vue, and Livewire starter kits all utilize Laravel's built-in authentication system to offer login, registration, password reset, email verification, and more. In addition, we also offer a WorkOS AuthKit powered variant of each starter kit that offers:

  • Social authentication (Google, Microsoft, GitHub, and Apple)

  • Passkey authentication

  • Email based "Magic Auth"

  • SSO

Using WorkOS as your authentication provider requires a WorkOS account. WorkOS offers free authentication for applications up to 1 million monthly active users.

To use WorkOS AuthKit as your application's authentication provider, select the WorkOS option when creating your new starter kit powered application via laravel new.

Configuring Your WorkOS Starter Kit

After creating a new application using a WorkOS powered starter kit, you should set the WORKOS_CLIENT_ID, WORKOS_API_KEY, and WORKOS_REDIRECT_URL environment variables in your application's .env file. These variables should match the values provided to you in the WorkOS dashboard for your application:


WORKOS_CLIENT_ID=your-client-id

WORKOS_API_KEY=your-api-key

WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

Additionally, you should configure the application homepage URL in your WorkOS dashboard. This URL is where users will be redirected after they log out of your application.

Configuring AuthKit Authentication Methods

When using a WorkOS powered starter kit, we recommend that you disable "Email + Password" authentication within your application's WorkOS AuthKit configuration settings, allowing users to only authenticate via social authentication providers, passkeys, "Magic Auth", and SSO. This allows your application to totally avoid handling user passwords.

Configuring AuthKit Session Timeouts

In addition, we recommend that you configure your WorkOS AuthKit session inactivity timeout to match your Laravel application's configured session timeout threshold, which is typically two hours.

Inertia SSR

The React, Svelte, and Vue starter kits are compatible with Inertia's server-side rendering capabilities. To build an Inertia SSR compatible bundle for your application, run the build:ssr command:


npm run build:ssr

For convenience, a composer dev:ssr command is also available. This command will start the Laravel development server and Inertia SSR server after building an SSR compatible bundle for your application, allowing you to test your application locally using Inertia's server-side rendering engine:


composer dev:ssr

Community Maintained Starter Kits

When creating a new Laravel application using the Laravel installer, you may provide any community maintained starter kit available on Packagist to the --using flag:


laravel new my-app --using=example/starter-kit

Creating Starter Kits

To ensure your starter kit is available to others, you will need to publish it to Packagist. Your starter kit should define its required environment variables in its .env.example file, and any necessary post-installation commands should be listed in the post-create-project-cmd array of the starter kit's composer.json file.

Frequently Asked Questions

How do I upgrade?

Every starter kit gives you a solid starting point for your next application. With full ownership of the code, you can tweak, customize, and build your application exactly as you envision. However, there is no need to update the starter kit itself.

How do I enable email verification?

Email verification can be added by uncommenting the MustVerifyEmail import in your App/Models/User.php model and ensuring the model implements the MustVerifyEmail interface:


<?php

  

namespace App\Models;

  

use Illuminate\Contracts\Auth\MustVerifyEmail;

// ...

  

class User extends Authenticatable implements MustVerifyEmail

{

    // ...

}

After registration, users will receive a verification email. To restrict access to certain routes until the user's email address is verified, add the verified middleware to the routes:


Route::middleware(['auth', 'verified'])->group(function () {

    Route::get('dashboard', function () {

        return Inertia::render('dashboard');

    })->name('dashboard');

});

[!NOTE]

Email verification is not required when using the WorkOS variant of the starter kits.

How do I modify the default email template?

You may want to customize the default email template to better align with your application's branding. To modify this template, you should publish the email views to your application with the following command:


php artisan vendor:publish --tag=laravel-mail

This will generate several files in resources/views/vendor/mail. You can modify any of these files as well as the resources/views/vendor/mail/themes/default.css file to change the look and appearance of the default email template.

استارتر کیت‌ها (Starter Kits)

مقدمه (Introduction)

برای اینکه در شروع ساخت اپلیکیشن لاراول خود یک قدم جلوتر باشید، خوشحالیم که application starter kits (استارتر کیت‌های اپلیکیشن) را به شما ارائه دهیم. این استارتر کیت‌ها به روند توسعه پروژه بعدی شما سرعت می‌بخشند و شامل تمام routes، controllers و views مورد نیاز برای ثبت‌نام و احراز هویت (authenticate) کاربران اپلیکیشن هستند. این استارتر کیت‌ها از Laravel Fortify برای مدیریت احراز هویت استفاده می‌کنند.

هرچند استفاده از این استارتر کیت‌ها را به شما پیشنهاد می‌کنیم، اما الزامی برای این کار وجود ندارد. شما آزاد هستید که با نصب یک نسخه‌ی خام از Laravel، اپلیکیشن خود را کاملاً از پایه بسازید. در هر دو صورت، می‌دانیم که چیز فوق‌العاده‌ای خلق خواهید کرد!

ایجاد یک اپلیکیشن با استفاده از یک استارتر کیت (Creating an Application Using a Starter Kit)

برای ایجاد یک اپلیکیشن لاراولی جدید با استفاده از استارتر کیت‌های ما، ابتدا باید PHP و ابزار لاراول CLI را نصب کنید. اگر از قبل PHP و Composer روی سیستم شما نصب است، می‌توانید ابزار Laravel installer CLI را از طریق Composer نصب کنید:

composer global require laravel/installer

سپس، با استفاده از این ابزار، یک اپلیکیشن لاراولی جدید ایجاد کنید. ابزار نصب لاراول از شما می‌خواهد تا استارتر کیت مورد نظر خود را انتخاب کنید:

laravel new my-app

پس از ایجاد اپلیکیشن، کافی است وابستگی‌های frontend آن را از طریق NPM نصب کرده و سرور توسعه‌ی لاراول (development server) را راه‌اندازی کنید:

cd my-app
npm install && npm run build
composer run dev

به محض اجرای سرور توسعه‌ی لاراول، اپلیکیشن شما از طریق مرورگر وب در آدرس http://localhost:8000 قابل دسترسی خواهد بود.

استارتر کیت‌های موجود (Available Starter Kits)

React

استارتر کیت React ما، یک نقطه‌ی شروع قدرتمند و مدرن برای ساخت اپلیکیشن‌های لاراول با یک frontend مبتنی بر React و با استفاده از Inertia فراهم می‌کند.

ابزار Inertia به شما اجازه می‌دهد اپلیکیشن‌های تک‌صفحه‌ای (single-page) و مدرن با React بسازید، در حالی که همچنان از سیستم سنتی server-side routing و controllers استفاده می‌کنید. این قابلیت به شما امکان می‌دهد از قدرت frontend در React به همراه بازدهی فوق‌العاده‌ی backend در Laravel و کامپایل موشکی Vite به صورت یک‌جا بهره‌مند شوید.

این استارتر کیت از React 19، TypeScript، Tailwind و کتابخانه‌ی کامپوننت shadcn/ui استفاده می‌کند.

Svelte

استارتر کیت Svelte ما، یک نقطه‌ی شروع قدرتمند و مدرن برای ساخت اپلیکیشن‌های لاراول با یک frontend مبتنی بر Svelte و با استفاده از Inertia فراهم می‌کند.

ابزار Inertia به شما اجازه می‌دهد اپلیکیشن‌های تک‌صفحه‌ای (single-page) و مدرن با Svelte بسازید، در حالی که از سیستم سنتی server-side routing و controllers استفاده می‌کنید. این ویژگی به شما امکان می‌دهد قدرت frontend در Svelte را با کارایی بی‌نظیر backend در Laravel و کامپایل فوق‌سریع Vite ترکیب کنید.

استارتر کیت Svelte از Svelte 5، TypeScript، Tailwind و کتابخانه‌ی کامپوننت shadcn-svelte استفاده می‌کند.

Vue

استارتر کیت Vue ما، یک نقطه‌ی شروع عالی برای ساخت اپلیکیشن‌های لاراول با یک frontend مبتنی بر Vue و با استفاده از Inertia ارائه می‌دهد.

ابزار Inertia به شما اجازه می‌دهد اپلیکیشن‌های تک‌صفحه‌ای (single-page) و مدرن با Vue بسازید، در حالی که از سیستم سنتی server-side routing و controllers استفاده می‌کنید. این کار به شما امکان می‌دهد از قدرت بخش frontend در Vue در کنار بازدهی شگفت‌انگیز backend در Laravel و کامپایل سریع Vite بهره ببرید.

استارتر کیت Vue از Vue Composition API، TypeScript، Tailwind و کتابخانه‌ی کامپوننت shadcn-vue استفاده می‌کند.

Livewire

استارتر کیت Livewire ما، یک نقطه‌ی شروع بی‌نقص برای ساخت اپلیکیشن‌های لاراول با یک frontend قدرت‌گرفته از Laravel Livewire است.

ابزار Livewire یک روش قدرتمند برای ساخت UIهای پویا و واکنشی (reactive) برای بخش frontend است، آن هم صرفاً با استفاده از PHP. این ابزار انتخاب فوق‌العاده‌ای برای تیم‌هایی است که عمدتاً از تمپلیت‌های Blade استفاده می‌کنند و به دنبال یک جایگزین ساده‌تر برای فریم‌ورک‌های SPA مبتنی بر جاوااسکریپت (مانند React، Svelte و Vue) هستند.

استارتر کیت Livewire از Livewire، Tailwind و کتابخانه‌ی کامپوننت Flux UI استفاده می‌کند.

شخصی‌سازی استارتر کیت (Starter Kit Customization)

React

استارتر کیت React ما با Inertia 3، React 19، Tailwind 4 و shadcn/ui ساخته شده است. همانند تمام استارتر کیت‌های ما، تمامی کدهای backend و frontend در داخل اپلیکیشن شما قرار دارند تا دست شما برای شخصی‌سازی کامل باز باشد.

بخش عمده‌ای از کدهای frontend در دایرکتوری resources/js قرار دارد. شما می‌توانید هر کدام از این کدها را برای شخصی‌سازی ظاهر و رفتار اپلیکیشن خود تغییر دهید:

resources/js/
├── components/    # کامپوننت‌های ری‌اکت با قابلیت استفاده مجدد
├── hooks/         # هوک‌های ری‌اکت
├── layouts/       # لی‌اوت‌های اپلیکیشن
├── lib/           # توابع کمکی و تنظیمات
├── pages/         # کامپوننت‌های مربوط به صفحات
└── types/         # تعاریف تایپ‌اسکریپت (TypeScript)

برای اضافه کردن کامپوننت‌های بیشتر از shadcn، ابتدا کامپوننت مورد نظر خود را پیدا کنید. سپس با استفاده از دستور npx آن را منتشر (publish) کنید:

npx shadcn@latest add switch

در این مثال، دستور بالا کامپوننت Switch را در مسیر resources/js/components/ui/switch.tsx ایجاد می‌کند. پس از ایجاد، می‌توانید از آن در هر یک از صفحات خود استفاده کنید:

import { Switch } from "@/components/ui/switch"

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  );
};

export default MyPage;

لایه های موجود (Available Layouts)

استارتر کیت React شامل دو لایه اصلی برای انتخاب است: لایه نوار کناری ("sidebar") و لایه هدر ("header"). لایه نوار کناری گزینه پیش‌فرض است، اما می‌توانید با تغییر فایل ایمپورت‌شده در بالای مسیر resources/js/layouts/app-layout.tsx، آن را به لایه هدر تغییر دهید:

import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; // [tl! remove]
import AppLayoutTemplate from '@/layouts/app/app-header-layout'; // [tl! add]

انواع نوار کناری (Sidebar Variants)

لایه نوار کناری شامل سه حالت مختلف است: حالت پیش‌فرض (sidebar)، حالت تو رفته (inset) و حالت شناور (floating). شما می‌توانید حالت دلخواه خود را با تغییر کامپوننت resources/js/components/app-sidebar.tsx انتخاب کنید:

<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]
<Sidebar collapsible="icon" variant="inset"> [tl! add]

انواع لایه صفحات احراز هویت

صفحات احراز هویت موجود در استارتر کیت React (مانند صفحه لاگین و ثبت‌نام) نیز سه نوع لی‌اوت مختلف دارند: ساده ("simple")، کارتی ("card") و دو تیکه ("split").

برای تغییر لی‌اوت احراز هویت، ایمپورت بالای فایل resources/js/layouts/auth-layout.tsx اپلیکیشن خود را تغییر دهید:

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; // [tl! remove]
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'; // [tl! add]

Svelte

استارتر کیت Svelte ما با Inertia 3، Svelte 5، Tailwind و shadcn-svelte ساخته شده است. تمام کدهای لایه backend و frontend در ساختار پروژه شما قرار گرفته تا امکان شخصی‌سازی کامل فراهم باشد.

بخش زیادی از کدهای فرانت‌اند در دایرکتوری resources/js قرار دارد و برای تغییر ظاهر و رفتار برنامه کاملاً قابل ویرایش است:

resources/js/
├── components/    # کامپوننت‌های Svelte با قابلیت استفاده مجدد
├── layouts/       # لی‌اوت‌های اپلیکیشن
├── lib/           # توابع کمکی، تنظیمات و ماژول‌های Svelte rune
├── pages/         # کامپوننت‌های صفحات
└── types/         # تعاریف تایپ‌اسکریپت

برای افزودن کامپوننت‌های دیگر shadcn-svelte، پس از یافتن کامپوننت مورد نظر، دستور زیر را در npx اجرا کنید:

npx shadcn-svelte@latest add switch

این دستور کامپوننت را در مسیر resources/js/components/ui/switch/switch.svelte ایجاد می‌کند تا بتوانید به این شکل از آن استفاده کنید:

<script lang="ts">
    import { Switch } from '@/components/ui/switch'
</script>

<div>
    <Switch />
</div>

لایه‌های موجود (Available Layouts)

تغییر لی‌اوت نوار کناری پیش‌فرض به لی‌اوت هدر در Svelte با ویرایش فایل resources/js/layouts/AppLayout.svelte انجام می‌شود:

import AppLayout from '@/layouts/app/AppSidebarLayout.svelte'; // [tl! remove]
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte'; // [tl! add]

انواع نوار کناری (Sidebar Variants)

تغییر استایل کامپوننت نوار کناری در فایل resources/js/components/AppSidebar.svelte:

<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]
<Sidebar collapsible="icon" variant="inset"> [tl! add]

انواع لایه صفحات احراز هویت

تغییر ساختار صفحات ورود و ثبت‌نام در فایل resources/js/layouts/AuthLayout.svelte:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte'; // [tl! remove]
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte'; // [tl! add]

Vue

استارتر کیت Vue ما با استفاده از Inertia 3، Vue 3 Composition API، Tailwind و shadcn-vue توسعه یافته است. این کیت نیز دسترسی کامل به کدهای بک‌اند و فرانت‌اند را برای شخصی‌سازی ارائه می‌دهد.

محل قرارگیری فایل‌های فرانت‌اند در دایرکتوری resources/js است:

resources/js/
├── components/    # کامپوننت‌های Vue با قابلیت استفاده مجدد
├── composables/   # کامپوزبل‌ها و هوک‌های اختصاصی Vue
├── layouts/       # لی‌اوت‌های اپلیکیشن
├── lib/           # توابع کمکی و تنظیمات پروژه
├── pages/         # کامپوننت‌های صفحات
└── types/         # تعاریف تایپ‌اسکریپت

برای نصب کامپوننت‌های جدید از shadcn-vue، پس از انتخاب کامپوننت، دستور زیر را وارد کنید:

npx shadcn-vue@latest add switch

فایل خروجی در مسیر resources/js/components/ui/Switch.vue ذخیره می‌شود و به این صورت قابل استفاده است:

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<template>
    <div>
        <Switch />
    </div>
</template>

لایه‌های موجود (Available Layouts)

تغییر لی‌اوت در نسخه Vue با اصلاح فایل resources/js/layouts/AppLayout.vue صورت می‌گیرد:

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // [tl! remove]
import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; // [tl! add]

انواع نوار کناری (Sidebar Variants)

ویرایش استایل سایدبار در فایل resources/js/components/AppSidebar.vue:

<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]
<Sidebar collapsible="icon" variant="inset"> [tl! add]

انواع لایه صفحات احراز هویت

تغییر قالب صفحات احراز هویت در فایل resources/js/layouts/AuthLayout.vue:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; // [tl! remove]
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue'; // [tl! add]

Livewire

استارتر کیت Livewire بر پایه‌ی Livewire 4، Tailwind و Flux UI پیاده‌سازی شده است.

به دلیل ماهیت این فریم‌ورک، کدهای فرانت‌اند به جای جاوااسکریپت در مسیر resources/views قرار دارند:

resources/views
├── components            # کامپوننت‌های با قابلیت استفاده مجدد
├── flux                  # کامپوننت‌های شخصی‌سازی شده Flux
├── layouts               # لی‌اوت‌های اپلیکیشن
├── pages                 # صفحات Livewire
├── partials              # فایل‌های تکه‌ای (Partials) در Blade
├── dashboard.blade.php   # داشبورد کاربر لاگین شده
├── welcome.blade.php     # صفحه فرود کاربران مهمان

لایه‌های موجود (Available Layouts)

برای تغییر به لایه هدر در نسخه Livewire، فایل resources/views/layouts/app.blade.php را ویرایش کرده و اِتریبیوت container را به کامپوننت اصلی Flux اضافه کنید:

<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

انواع لایه صفحات احراز هویت

برای جابجایی بین لی‌اوت‌های بخش احراز هویت، فایل resources/views/layouts/auth.blade.php را تغییر دهید:

<x-layouts::auth.split>
    {{ $slot }}
</x-layouts::auth.split>

احراز هویت (Authentication)

تمامی استارتر کیت‌ها از Laravel Fortify جهت مدیریت فرآیند احراز هویت استفاده می‌کنند. این پکیج تمامی مسیرها، کنترلرها و منطق‌های لازم برای ورود، ثبت‌نام، بازیابی رمز عبور، تایید ایمیل و... را ارائه می‌دهد.

Fortify با توجه به قابلیت‌هایی که در فایل تنظیمات config/fortify.php فعال کرده‌اید، مسیرهای زیر را به صورت خودکار ثبت می‌کند:

مسیر (Route) متد توضیحات
/login GET نمایش فرم ورود
/login POST احراز هویت کاربر
/logout POST خروج کاربر از سیستم
/register GET نمایش فرم ثبت‌نام
/register POST ساخت کاربر جدید
/forgot-password GET نمایش فرم درخواست بازیابی رمز عبور
/forgot-password POST ارسال لینک بازیابی رمز عبور
/reset-password/{token} GET نمایش فرم ثبت رمز عبور جدید
/reset-password POST به‌روزرسانی رمز عبور
/email/verify GET نمایش اعلان تایید ایمیل
/email/verify/{id}/{hash} GET تایید آدرس ایمیل
/email/verification-notification POST ارسال مجدد ایمیل تاییدیه
/user/confirm-password GET نمایش فرم تایید رمز عبور
/user/confirm-password POST تایید نهایی رمز عبور
/two-factor-challenge GET نمایش فرم چالش احراز هویت دو مرحله‌ای (2FA)
/two-factor-challenge POST تایید کد 2FA

دستور php artisan route:list برای مشاهده تمام مسیرهای ثبت‌شده در برنامه کاربرد دارد.

فعال‌سازی و غیرفعال‌سازی قابلیت‌ها (Enabling and Disabling Features)

مدیریت ویژگی‌های فعال پکیج Fortify از طریق آرایه features در فایل config/fortify.php انجام می‌شود:

use Laravel\Fortify\Features;

'features' => [
    Features::registration(),
    Features::resetPasswords(),
    Features::emailVerification(),
    Features::twoFactorAuthentication([
        'confirm' => true,
        'confirmPassword' => true,
    ]),
],

برای غیرفعال کردن یک ویژگی، کافی است خط مربوط به آن را کامنت یا حذف کنید؛ مثلاً حذف Features::registration() ثبت‌نام عمومی را می‌بندد.

در استارتر کیت‌های React، Svelte و Vue، در صورت غیرفعال کردن یک ویژگی، باید ارجاعات فرانت‌اند به آن مسیر را نیز پاک کنید. این کیت‌ها از ابزار Wayfinder برای کارهای مسیر‌یابی امن (type-safe routing) بهره می‌برند که تعاریف خود را در زمان build ایجاد می‌کند و ارجاع به مسیرهای ناموجود، فرآیند کامپایل را با خطا مواجه خواهد کرد.

شخصی‌سازی فرآیند ساخت کاربر و بازیابی رمز عبور

هنگام ثبت‌نام یا بازیابی رمز عبور، کلاس‌های اکشن در مسیر app/Actions/Fortify توسط Fortify فراخوانی می‌شوند:

فایل توضیحات
CreateNewUser.php اعتبارسنجی و ساخت کاربر جدید
ResetUserPassword.php اعتبارسنجی و به‌روزرسانی رمز عبور کاربر
PasswordValidationRules.php تعیین قوانین اعتبارسنجی رمز عبور

به عنوان مثال، جهت افزودن فیلد شماره تلفن (phone) به منطق ثبت‌نام، فایل CreateNewUser را به این صورت ویرایش کنید:

public function create(array $input): User
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'email', 'max:255', 'unique:users'],
        'phone' => ['required', 'string', 'max:20'], // [tl! add]
        'password' => $this->passwordRules(),
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'], // [tl! add]
        'password' => Hash::make($input['password']),
    ]);
}

احراز هویت دو مرحله‌ای (Two-Factor Authentication)

استارتر کیت‌ها به سیستم داخلی احراز هویت دو مرحله‌ای (2FA) مجهز هستند که به کاربران اجازه می‌دهد امنیت حساب خود را با اپلیکیشن‌های تولید رمز یکبار مصرف (TOTP) ارتقا دهند. این قابلیت به صورت پیش‌فرض فعال است.

آپشن confirm کاربر را ملزم می‌کند پیش از فعال‌سازی نهایی، یک‌بار کد را تایید کند؛ گزینه confirmPassword نیز قبل از فعال یا غیرفعال کردن 2FA، رمز عبور فعلی کاربر را جهت تایید هویت می‌خواهد.

محدودیت نرخ درخواست (Rate Limiting)

برای جلوگیری از حملات حدس رمز عبور (brute-force)، می‌توانید رفتار محدودکننده نرخ درخواست فرآیند ورود را در FortifyServiceProvider به شکل زیر شخصی‌سازی کنید:

use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Cache\RateLimiting\Limit;

RateLimiter::for('login', function ($request) {
    return Limit::perMinute(5)->by($request->email.$request->ip());
});

تیم‌ها (Teams)

تمام استارتر کیت‌ها قابلیت ایجاد به همراه سیستم مدیریت تیم را دارا هستند. در صورت فعال بودن این ویژگی، هر کاربر می‌تواند عضو یک یا چند تیم باشد و یک تیم فعال (current team) داشته باشد. در زمان ثبت‌نام، به هر کاربر یک تیم شخصی اختصاص داده می‌شود. همچنین صفحات مدیریت اعضا، ساخت تیم، دعوت کاربران و تغییر مشخصات تیم نیز در پروژه‌ها گنجانده شده است.

در مسیرهای مربوط به تیم، اسلاگ تیم فعال در آدرس وب قرار می‌گیرد (مانند /{current_team}/dashboard یا settings/teams/{team}). استارتر کیت‌ها به طور خودکار قبل از دسترسی به مسیر، بررسی می‌کنند که آیا کاربر واقعاً عضو تیم درخواستی هست یا خیر.

برای راحتی در تولید آدرس‌ها، مقادیر پیش‌فرض ساختار آدرس‌دهی بر روی تیم فعلی کاربر تنظیم می‌شود و فراخوانی ساده تابع route('dashboard') به شکل خودکار اسلاگ تیم فعال را جای‌گذاری می‌کند. در زمان تغییر تیم یا ثبت‌نام، این تنظیمات به صورت داینامیک به‌روزرسانی می‌شوند.

در زمان ساخت یا تغییر نام تیم، سیستم از انتخاب نام‌های رزرو شده (مانند settings یا login) که باعث تداخل در آدرس‌های سیستم می‌شوند جلوگیری به عمل می‌آورد.

احراز هویت با WorkOS AuthKit (WorkOS AuthKit Authentication)

در کنار سیستم احراز هویت بومی لاراول، یک نسخه مبتنی بر سرویس WorkOS AuthKit نیز برای تمام استارتر کیت‌ها عرضه شده که امکانات زیر را ارائه می‌دهد:

  • ورود از طریق شبکه‌های اجتماعی (Google, Microsoft, GitHub, Apple)
  • ورود با کلیدهای امنیتی (Passkey)
  • ورود بدون رمز عبور از طریق ایمیل (Magic Auth)
  • سیستم ورود یکپارچه (SSO)

استفاده از این قابلیت نیازمند داشتن حساب کاربری در WorkOS است. سرویس WorkOS خدمات احراز هویت خود را تا سقف ۱ میلیون کاربر فعال ماهانه به صورت رایگان ارائه می‌دهد.

برای راه‌اندازی این نسخه، در زمان اجرای دستور laravel new گزینه مربوط به WorkOS را انتخاب کنید.

تنظیمات استارتر کیت WorkOS

پس از ایجاد پروژه، متغیرهای زیر را در فایل .env خود با توجه به مقادیر داشبورد ورک‌اواس تکمیل کنید:

WORKOS_CLIENT_ID=your-client-id
WORKOS_API_KEY=your-api-key
WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

همچنین آدرس صفحه اصلی سایت خود را در پنل WorkOS تنظیم کنید تا کاربران پس از خروج به آنجا منتقل شوند.

غیرفعال کردن حالت ایمیل و پسورد

توصیه می‌شود در تنظیمات پنل WorkOS قابلیت "Email + Password" را غیرفعال کنید تا کاربران صرفاً از راه‌های بدون رمز عبور (مثل Passkey یا گوگل) وارد شوند. این کار امنیت برنامه را بالا برده و شما را از چالش‌های ذخیره پسورد کاربران رها می‌کند.

تنظیم زمان منقضی شدن نشست‌ها

بهتر است زمان منقضی شدن نشست کاربری (Inactivity Timeout) در پنل WorkOS را با مقدار پیش‌فرض جلسات لاراول (که معمولاً دو ساعت است) هماهنگ و یکسان‌سازی کنید.

Inertia SSR

استارتر کیت‌های فرانت‌اند مدرن با قابلیت رندر سمت سرور یا همان SSR در Inertia سازگار هستند. جهت گرفتن خروجی SSR دستور زیر را اجرا کنید:

npm run build:ssr

برای تست محلی فرآیند رندر سمت سرور و اجرای همزمان سرور لاراول و Inertia SSR، می‌توانید از دستور زیر استفاده کنید:

composer dev:ssr

استارتر کیت‌های توسعه داده شده توسط کامیونیتی

برای استفاده از کیت‌های متفرقه‌ای که در پلتفرم Packagist منتشر شده‌اند، می‌توانید از فلگ --using استفاده کنید:

laravel new my-app --using=example/starter-kit

ساخت استارتر کیت شخصی

برای انتشار کیت خود، آن را در سایت Packagist آپلود کنید. متغیرهای محیطی مورد نیاز را در فایل .env.example قرار داده و دستورات پس از نصب را در آرایه post-create-project-cmd فایل composer.json تنظیم کنید.

سوالات متداول (Frequently Asked Questions)

چطور استارتر کیت را آپدیت کنم؟

استارتر کیت صرفاً یک نقطه شروع است و پس از دانلود، مالکیت کامل کدها با شماست. نیازی به آپدیت خودِ استارتر کیت در آینده وجود ندارد و شما فقط کدهای پروژه خود را توسعه می‌دهید.

چطور قابلیت تایید ایمیل را فعال کنم؟

این قابلیت با اضافه کردن اینترفیس و ایمپورت MustVerifyEmail در مدل App/Models/User.php فعال می‌شود:

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
// ...

class User extends Authenticatable implements MustVerifyEmail
{
    // ...
}

برای محدود کردن دسترسی به آدرس‌های خاص تا زمان تایید ایمیل، میدل‌ور verified را به مسیرها اضافه کنید:

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('dashboard', function () {
        return Inertia::render('dashboard');
    })->name('dashboard');
});

[!NOTE] در صورت استفاده از نسخه WorkOS، نیازی به فعال‌سازی تایید ایمیل در لاراول ندارید.

چطور قالب پیش‌فرض ایمیل‌های ارسالی را تغییر دهم؟

برای شخصی‌سازی ظاهر قالب ایمیل لاراول، ابتدا با دستور زیر فایل‌های قالب را به پوشه پروژه خود منتقل کنید:

php artisan vendor:publish --tag=laravel-mail

فایل‌های خروجی در مسیر resources/views/vendor/mail ساخته می‌شوند و استایل‌های ظاهری نیز از طریق فایل resources/views/vendor/mail/themes/default.css قابل ویرایش هستند.