Section courante

A propos

Section administrative du site

Ensembles de démarrage

Pour vous aider à démarrer rapidement le développement de votre nouvelle application Laravel, les concepteurs de Laravel vous proposes des ensembles de démarrage. Ces ensembles vous permettent de vous lancer facilement dans la création de votre prochaine application Laravel et incluent les routes, les contrôleurs et les vues nécessaires à l'inscription et à l'authentification des utilisateurs. Ils utilisent Laravel Fortify pour l'authentification.

Bien que vous puissiez utiliser ces ensembles de démarrage, ils ne sont pas obligatoires. Vous pouvez tout à fait créer votre propre application en installant simplement une copie de Laravel.

Création d'une application à l'aide d'un ensembles de démarrage

Pour créer une nouvelle application Laravel à l'aide d'un ensemble de démarrage, vous devez d'abord installer PHP et l'interface de ligne de commande Laravel (CLI). Si PHP et Composer sont déjà installés, vous pouvez installer l'outil d'installation Laravel via Composer :

composer global require laravel/installer

Ensuite, créez une nouvelle application Laravel à l'aide de l'interface de ligne de commande de l'installateur Laravel. L'installateur Laravel vous invitera à sélectionner vos ensembles de démarrage préféré :

laravel new my-app

Après avoir créé votre application Laravel, il vous suffit d'installer ses dépendances frontend via NPM et de démarrer le serveur de développement Laravel :

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

Une fois le serveur de développement Laravel démarré, votre application sera accessible dans votre navigateur web à l'adresse http://localhost:8000.

Ensembles de démarrage disponibles

React

L'ensemble de démarrage React offre un point de départ robuste et moderne pour la création d'applications Laravel avec un frontend React grâce à Inertia.

Inertia vous permet de développer des applications React monopages modernes utilisant le routage et les contrôleurs côté serveur classiques. Vous bénéficiez ainsi de la puissance frontend de React, combinée à l'incroyable productivité backend de Laravel et à la compilation ultra-rapide de Vite.

L'ensemble de démarrage React utilise React 19, TypeScript, Tailwind et la bibliothèque de composantes shadcn/ui.

Vue

L'ensemble de démarrage Vue constitue un excellent point de départ pour la création d'applications Laravel avec un frontend Vue grâce à Inertia.

Inertia vous permet de développer des applications Vue monopages modernes utilisant le routage et les contrôleurs côté serveur classiques. Vous bénéficiez ainsi de la puissance frontend de Vue, combinée à l'incroyable productivité backend de Laravel et à la compilation ultra-rapide de Vite.

L'ensemble de démarrage Vue utilise l'API de composition Vue, TypeScript, Tailwind et la bibliothèque de composantes shadcn-vue.

Livewire

L'ensemble de démarrage Livewire constitue le point de départ idéal pour développer des applications Laravel avec une interface utilisateur Laravel Livewire.

Livewire est une solution performante pour créer des interfaces utilisateur dynamiques et réactives en utilisant uniquement PHP. Elle convient parfaitement aux équipes utilisant principalement des gabarits Blade et recherchent une alternative plus simple aux cadres d'applications SPA basés sur JavaScript comme React et Vue.

L'ensemble de démarrage Livewire utilise Livewire, Tailwind CSS et la bibliothèque de composantes Flux UI.

Personnalisation de l'ensemble de démarrage

React

L'ensemble de démarrage React est conçu avec Inertia 2, React 19, Tailwind 4 et shadcn/ui. Comme pour tous les ensembles de démarrage, l'intégralité du code backend et frontend est intégrée à votre application, vous offrant ainsi une personnalisation complète.

La majeure partie du code frontend se trouve dans le répertoire resources/js. Vous pouvez modifier librement ce code pour personnaliser l'apparence et le comportement de votre application :

resources/js/
+-- components/    # Composantes React réutilisables
+-- hooks/         # Crochets React
+-- layouts/       # Modèles d'application
+-- lib/           # Fonctions utilitaires et configuration
+-- pages/         # Composantes de la page
+-- types/         # Définitions TypeScript

Pour publier des composantes shadcn supplémentaires, commencez par trouver le composant que vous souhaitez publier. Ensuite, publiez la composante à l'aide de npx :

npx shadcn@latest add switch

Dans cet exemple, la commande publiera la composante Switch dans resources/js/components/ui/switch.tsx. Une fois la composante publié, vous pourrez l'utiliser sur n'importe laquelle de vos pages :

  1. import { Switch } from "@/components/ui/switch"
  2.  
  3. const MyPage = () => {
  4.   return (
  5.     <div>
  6.       <Switch />
  7.     </div>
  8.   );
  9. };
  10.  
  11. export default MyPage;

Agencements disponibles

L'ensemble de démarrage React propose deux agencements principaux : un agencement «barre latérale» et un agencement «en-tête». L'agencement «barre latérale» est celui par défaut, mais vous pouvez opter pour l'agencement «entête» en modifiant l'agencement importé en haut du fichier resources/js/layouts/app-layout.tsx de votre application :

  1. import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; 
  2. import AppLayoutTemplate from '@/layouts/app/app-header-layout'; 

Variantes de la barre latérale

La mise en page de la barre latérale propose trois variantes : la variante par défaut, la variante «encastrée» et la variante «flottante». Vous pouvez choisir la variante vous convenant le mieux en modifiant la composante resources/js/components/app-sidebar.tsx :

  1. <Sidebar collapsible="icon" variant="sidebar"> 
  2. <Sidebar collapsible="icon" variant="inset"> 

Variantes de mise en page pour la page d'authentification

Les pages d'authentification incluses dans l'ensemble de démarrage React, telles que la page de connexion et la page d'inscription, proposent trois variantes de mise en page : «simple», «card» et «split».

Pour modifier la mise en page de votre page d'authentification, modifiez le fichier de mise en page importé en haut du répertoire resources/js/layouts/auth-layout.tsx de votre application :

  1. import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; 
  2. import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'; 

Vue

L'ensemble de démarrage Vue est conçu avec Inertia 2, l'API de composition Vue 3, Tailwind et shadcn-vue. Comme pour tous nos ensembles de démarrage, l'intégralité du code backend et frontend est intégrée à votre application, vous offrant ainsi une personnalisation complète.

La majeure partie du code frontend se trouve dans le répertoire `resources/js`. Vous pouvez modifier librement ce code pour personnaliser l'apparence et le comportement de votre application.

resources/js/
+-- components/    # Composantes Vue réutilisables
+-- composables/   # Composantes/crochets Vue
+-- layouts/       # Modèles d'application
+-- lib/           # Fonctions utilitaires et configuration
+-- pages/         # Composantes de la page
+-- types/         # Définitions TypeScript

Pour publier des composants shadcn-vue supplémentaires, commencez par trouver la composante que vous souhaitez publier. Ensuite, publiez-le à l'aide de npx :

npx shadcn-vue@latest add switch

Dans cet exemple, la commande publiera la composante Switch dans resources/js/components/ui/Switch.vue. Une fois la composante publié, vous pourrez l'utiliser sur n'importe laquelle de vos pages :

  1. <script setup lang="ts">
  2. import { Switch } from '@/components/ui/switch'
  3. </script>
  4.  
  5. <template>
  6.     <div>
  7.         <Switch />
  8.     </div>
  9. </template>

Agencements disponibles

L'ensemble de démarrage Vue propose deux agencements principaux : un agencement «barre latérale» et un agencement «entête». L'agencement «barre latérale» est l'agencement par défaut, mais vous pouvez opter pour l'agencement «entête» en modifiant l'agencement importé en haut du fichier resources/js/layouts/AppLayout.vue de votre application :

  1. import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; 
  2. import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; 

Variantes de la barre latérale

La barre latérale propose trois variantes : la variante par défaut, la variante «encastrée» et la variante «flottante». Vous pouvez choisir celle vous convenant le mieux en modifiant la composante resources/js/components/AppSidebar.vue :

  1. <Sidebar collapsible="icon" variant="sidebar"> 
  2. <Sidebar collapsible="icon" variant="inset"> 

Variantes de mise en page pour la page d'authentification

Les pages d'authentification incluses dans l'ensemble de démarrage Vue, telles que la page de connexion et la page d'inscription, proposent trois variantes de mise en page : «simple», «card» et «split».

Pour modifier la mise en page de votre page d'authentification, modifiez le fichier AuthLayout.vue importé en haut de votre application, dans le répertoire resources/js/layouts.vue :

  1. import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; 
  2. import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue'; 

Livewire

Notre ensemble de démarrage Livewire est basé sur Livewire 4, Tailwind et Flux UI. Comme pour tous nos ensembles de démarrage, l'intégralité du code backend et frontend est intégrée à votre application, vous offrant ainsi une personnalisation complète.

La majeure partie du code frontend se trouve dans le répertoire resources/views. Vous pouvez modifier librement ce code pour personnaliser l'apparence et le comportement de votre application.

resources/views
+-- components            # Composantes réutilisables
+-- flux                  # Composantes Flux personnalisés
+-- layouts               # Modèles d'application
+-- pages                 # Pages Livewire
+-- partials              # Blade partielles réutilisables
+-- dashboard.blade.php   # Tableau de bord de l'utilisateur authentifié
+-- welcome.blade.php     # Page d'accueil pour les utilisateurs invités

Agencements disponibles

L'ensemble de démarrage Livewire propose deux agencements principaux : un agencement «barre latérale» et un agencement «entête». L'agencement «barre latérale» est l'agencement par défaut, mais vous pouvez passer à l'agencement «entête» en modifiant la configuration de l'agencement dans le fichier resources/views/layouts/app.blade.php de votre application. De plus, vous devez ajouter l'attribut container au composant Flux principal :

  1. <x-layouts::app.header>
  2.     <flux:main container>
  3.         {{ $slot }}
  4.     </flux:main>
  5. </x-layouts::app.header>

Variantes de mise en page pour la page d'authentification

Les pages d'authentification incluses dans l'ensemble de démarrage Livewire, telles que la page de connexion et la page d'inscription, proposent trois variantes de mise en page : «simple», «card» et «split».

Pour modifier la mise en page de votre page d'authentification, modifiez la mise en page utilisée par le fichier resources/views/layouts/auth.blade.php de votre application :

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

Authentification

Tous les ensembles de démarrage utilisent Laravel Fortify pour gérer l'authentification. Fortify fournit les routes, les contrôleurs et la logique nécessaires à la connexion, l'inscription, la réinitialisation du mot de passe, la vérification d'adresse de courriel,...

Fortify enregistre automatiquement les routes d'authentification suivantes en fonction des fonctionnalités activées dans le fichier de configuration `config/fortify.php` de votre application :

Route Méthode Description
/login GET Afficher le formulaire de connexion
/login POST Authentifier l'utilisateur
/logout POST Déconnexion de l'utilisateur
/register GET Afficher le formulaire d'inscription
/register POST Créer un nouvel utilisateur
/forgot-password GET Afficher le formulaire de demande de réinitialisation du mot de passe
/forgot-password POST Envoyer le lien de réinitialisation du mot de passe
/reset-password/{token} GET Afficher le formulaire de réinitialisation du mot de passe
/reset-password POST Mettre à jour le mot de passe
/email/verify GET Afficher l'avis de vérification par courriel
/email/verify/{id}/{hash} GET Vérifier l'adresse de courriel
/email/verification-notification POST Renvoyer le courriel de vérification
/user/confirm-password GET Afficher le formulaire de confirmation de mot de passe
/user/confirm-password POST Confirmez le mot de passe
/two-factor-challenge GET Afficher le formulaire de défi 2FA
/two-factor-challenge POST Vérifier le code 2FA

La commande Artisan php artisan route:list permet d'afficher toutes les routes de votre application.

Activation et désactivation des fonctionnalités

Vous pouvez contrôler les fonctionnalités Fortify activées dans le fichier de configuration config/fortify.php de votre application :

  1. use Laravel\Fortify\Features;
  2.  
  3. 'features' => [
  4.     Features::registration(),
  5.     Features::resetPasswords(),
  6.     Features::emailVerification(),
  7.     Features::twoFactorAuthentication([
  8.         'confirm' => true,
  9.         'confirmPassword' => true,
  10.     ]),
  11. ],

Pour désactiver une fonctionnalité, commentez ou supprimez l'entrée correspondante dans le tableau `features`. Par exemple, supprimez `Features::registration()` pour désactiver l'inscription publique.

Lorsque vous utilisez les ensembles de démarrage React ou Vue, vous devez également supprimer toute référence aux routes de la fonctionnalité désactivée dans votre code frontend. Par exemple, si vous désactivez la vérification d'adresse de courriel, vous devez supprimer les importations et les références aux routes de vérification dans vos composantes Vue ou React. Ceci est nécessaire car ces ensembles de démarrage utilisent Wayfinder pour le routage typé, générant les définitions de routes lors de la compilation. Si vous référencez des routes n'existant plus, votre application ne pourra pas être compilée.

Personnalisation de la création d'utilisateurs et de la réinitialisation des mots de passe

Lorsqu'un utilisateur s'inscrit ou réinitialise son mot de passe, Fortify appelle des classes d'action situées dans le répertoire app/Actions/Fortify de votre application :

Fichier Description
CreateNewUser.php Valide et crée de nouveaux utilisateurs
ResetUserPassword.php Valide et met à jour les mots de passe des utilisateurs
PasswordValidationRules.php Définit les règles de validation des mots de passe

Par exemple, pour personnaliser la logique d'inscription de votre application, vous devez modifier l'action CreateNewUser :

  1. public function create(array $input): User
  2. {
  3.     Validator::make($input, [
  4.         'name' => ['required', 'string', 'max:255'],
  5.         'email' => ['required', 'email', 'max:255', 'unique:users'],
  6.         'phone' => ['required', 'string', 'max:20'], 
  7.         'password' => $this->passwordRules(),
  8.     ])->validate();
  9.  
  10.     return User::create([
  11.         'name' => $input['name'],
  12.         'email' => $input['email'],
  13.         'phone' => $input['phone'], 
  14.         'password' => Hash::make($input['password']),
  15.     ]);
  16. }

Authentification à deux facteurs

Les ensembles de démarrage intègrent l'authentification à deux facteurs (2FA), permettant aux utilisateurs de sécuriser leurs comptes à l'aide de n'importe quelle application d'authentification compatible TOTP. La 2FA est activée par défaut via la méthode `Features::twoFactorAuthentication()` dans le fichier de configuration `config/fortify.php` de votre application.

L'option `confirm` exige la validation d'un code avant l'activation complète de la 2FA, tandis que l'option `confirmPassword` requiert la confirmation du mot de passe avant l'activation ou la désactivation de la 2FA. Pour plus d'informations, consultez la documentation de Fortify relative à l'authentification à deux facteurs.

Limitation du débit

La limitation du débit empêche les attaques par force brute et les tentatives de connexion répétées de saturer vos points de terminaison d'authentification. Vous pouvez personnaliser le comportement de limitation du débit de Fortify dans le FortifyServiceProvider de votre application :

  1. use Illuminate\Support\Facades\RateLimiter;
  2. use Illuminate\Cache\RateLimiting\Limit;
  3.  
  4. RateLimiter::for('login', function ($request) {
  5.     return Limit::perMinute(5)->by($request->email.$request->ip());
  6. });

Authentification WorkOS AuthKit

Par défaut, les ensembles de démarrage React, Vue et Livewire utilisent le système d'authentification intégré de Laravel pour la connexion, l'inscription, la réinitialisation du mot de passe, la vérification d'adresse de courriel,... Nous proposons également une version de chaque ensemble de démarrage basée sur WorkOS AuthKit, offrant :

L'utilisation de WorkOS comme fournisseur d'authentification nécessite un compte WorkOS. WorkOS offre une authentification gratuite pour les applications comptant jusqu'à 1 million d'utilisateurs actifs mensuels.

Pour utiliser WorkOS AuthKit comme fournisseur d'authentification de votre application, sélectionnez l'option WorkOS lors de la création de votre application avec le kit de démarrage Laravel (commande : `laravel new`).

Configuration de votre ensemble de démarrage WorkOS

Après avoir créé une application à l'aide d'un ensemble de démarrage WorkOS, vous devez définir les variables d'environnement WORKOS_CLIENT_ID, WORKOS_API_KEY et WORKOS_REDIRECT_URL dans le fichier .env de votre application. Ces variables doivent correspondre aux valeurs fournies dans le tableau de bord WorkOS de votre application :

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

De plus, vous devez configurer l'URL de la page d'accueil de l'application dans votre tableau de bord WorkOS. C'est vers cette URL que les utilisateurs seront redirigés après s'être déconnectés de votre application.

Configuration des méthodes d'authentification AuthKit

Lorsque vous utilisez un ensemble de démarrage WorkOS, il est recommandé de désactiver l'authentification «Courriel + Mot de passe» dans les paramètres de configuration AuthKit de votre application. Les utilisateurs pourront ainsi s'authentifier uniquement via les réseaux sociaux, les clefs d'accès, «Magic Auth» et l'authentification unique (SSO). Votre application n'aura donc pas à gérer les mots de passe des utilisateurs.

Configuration des délais d'expiration de session AuthKit

De plus, il est recommandé de configurer le délai d'inactivité de votre session WorkOS AuthKit pour qu'il corresponde au seuil d'expiration de session configuré pour votre application Laravel, généralement de deux heures.

Inertia SSR

Les ensembles de démarrage React et Vue sont compatibles avec les fonctionnalités de rendu côté serveur d'Inertia. Pour créer un bundle compatible SSR Inertia pour votre application, exécutez la commande `build:ssr` :

npm run build:ssr

Pour plus de simplicité, la commande `composer dev:ssr` est également disponible. Après avoir généré un bundle compatible SSR pour votre application, cette commande lance le serveur de développement Laravel et le serveur Inertia SSR, vous permettant ainsi de tester votre application localement avec le moteur de rendu côté serveur d'Inertia :

composer dev:ssr

Ensembles de démarrage maintenus par la communauté

Lors de la création d'une nouvelle application Laravel à l'aide de l'installateur Laravel, vous pouvez spécifier n'importe quel ensemble de démarrage maintenu par la communauté et disponible sur Packagist avec l'option `--using` :

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

Création d'ensembles de démarrage

Pour que votre ensemble de démarrage soit accessible à tous, vous devez le publier sur Packagist. Il doit définir ses variables d'environnement requises dans son fichier `.env.example`, et les commandes nécessaires après l'installation doivent figurer dans le tableau `post-create-project-cmd` de son fichier `composer.json`.

Foire aux questions

Comment effectuer la mise à jour ?

Chaque ensemble de démarrage vous offre une base solide pour votre prochaine application. En étant pleinement propriétaire du code, vous pouvez le modifier, le personnaliser et le développer exactement comme vous l'imaginez. Toutefois, il n'est pas nécessaire de mettre à jour l'ensemble de démarrage lui-même.

Comment activer la vérification d'adresse de courriel ?

Pour ajouter la vérification d'adresse de courriel, décommentez l'importation MustVerifyEmail dans votre modèle App/Models/User.php et assurez-vous que ce modèle implémente l'interface MustVerifyEmail :

  1. <?php
  2.  
  3. namespace App\Models;
  4.  
  5. use Illuminate\Contracts\Auth\MustVerifyEmail;
  6. // ...
  7.  
  8. class User extends Authenticatable implements MustVerifyEmail
  9. {
  10.     // ...
  11. }

Après l'inscription, les utilisateurs recevront un courriel de vérification. Pour restreindre l'accès à certaines routes jusqu'à ce que l'adresse courriel de l'utilisateur soit vérifiée, ajoutez le middleware de vérification aux routes concernées :

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

La vérification par courriel n'est pas requise lors de l'utilisation de la variante WorkOS des ensembles de démarrage.

Comment modifier le modèle de courriel par défaut ?

Vous pouvez personnaliser le modèle de courriel par défaut pour qu'il corresponde mieux à l'identité visuelle de votre application. Pour ce faire, publiez les exemples de courriels dans votre application à l'aide de la commande suivante :

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

Cela générera plusieurs fichiers dans resources/views/vendor/mail. Vous pouvez modifier chacun de ces fichiers, ainsi que le fichier resources/views/vendor/mail/themes/default.css, pour personnaliser l'apparence du modèle de courriel par défaut.



Dernière mise à jour : Lundi, le 16 février 2026