J'ai récemment posté une vidéo sur X dans laquelle j'ai mis en place un projet Laravel React avec authentification et une page de profil utilisateur en moins d'une minute ! J'ai pensé qu'il serait utile de partager une version écrite pour tous ceux qui préfèrent suivre avec un guide détaillé.

Dans ce guide, je vais vous montrer comment configurer rapidement un nouveau projet Laravel avec une interface React et une authentification intégrée, le tout en utilisant Laravel Breeze . Nous aurons un panneau utilisateur fonctionnel avec édition de profil en quelques étapes seulement.

Pourquoi Laravel ?

Laravel est un framework PHP populaire utilisé pour créer des applications Web modernes. Cela gagne rapidement du terrain, en fait, en septembre 2024, Accel a annoncé un investissement de 57 millions de dollars dans Laravel.

Selon le site officiel, Laravel est « le framework PHP pour les artisans du Web » et il est vraiment à la hauteur de cette description.

Je ne m'étendrai pas trop sur ce qu'est Laravel, il y a une tonne d'informations disponibles sur son site officiel et sa documentation. Passons plutôt à la configuration de votre projet.

Configuration du projet

Pile technologique

Nous utiliserons :

• Laravel (pour les API backend)

• SQLite qui est la base de données par défaut pour les projets Laravel (bien que vous puissiez facilement passer à une autre base de données)

• React pour le frontend (avec Inertia.js)

• Laravel Breeze pour gérer l'authentification et la gestion des utilisateurs

Exigences

Pour suivre ce guide, assurez-vous d'avoir :

• PHP 8 (de préférence 8.3)

• Compositeur

• Node.js (v21)

Prêt? Commençons !

Étape 1 : Créer un nouveau projet Laravel

Tout d'abord, utilisez Composer pour créer un nouveau projet Laravel :

composer create-project laravel/laravel laravel-project

Cela créera un nouveau répertoire avec la configuration par défaut de Laravel. Accédez au répertoire du projet et servez l'application :

cd laravel-project
php artisan serve

Si vous visitez http://localhost:8000, vous verrez la page d'accueil de Laravel.

Félicitations, vous avez créé votre premier projet Laravel ! ✅

Par défaut, Laravel utilise une base de données SQLite, qui a déjà été configurée pour vous. Vous pouvez trouver le fichier de base de données dans database/database.sqlite.

Étape 2 : Installer Laravel Breeze

Ensuite, nous ajouterons Laravel Breeze, qui fournit une implémentation minimale de l'authentification, notamment :

• Se connecter

• Inscription

• Réinitialisation du mot de passe

• Vérification par e-mail

• Confirmation du mot de passe

De plus, Breeze comprend une page de profil simple où les utilisateurs peuvent mettre à jour leurs informations.

Ajoutez le package Breeze en exécutant :

composer require laravel/breeze --dev

Maintenant, installez Breeze dans votre projet :

php artisan breeze:install

Pendant l'installation, Breeze vous proposera quelques options :

• Je choisis React pour le frontend, mais il existe quelques alternatives :

  • Lame
  • Livewire
  • Vue
  • API uniquement

• En option, vous pouvez activer le Mode sombre, Rendu côté serveur (SSR), Typescript et ESLint .

• Lorsque vous êtes interrogé sur un framework de test, vous pouvez choisir entre Pest ou PHPUnit. J'utiliserai Pest.

Une fois le processus terminé, Breeze aura ajouté tout ce dont vous avez besoin pour l'authentification et la gestion des utilisateurs.

C'est fait ! ?

Étape 3 : Exécutez votre application

Maintenant que Breeze est configuré, votre application est prête et vous pouvez l'exécuter à nouveau :

php artisan serve

Visitez http://localhost:8000/register pour créer un nouvel utilisateur.

Vous commencerez avec un tableau de bord vide et pourrez accéder à votre page de profil pour modifier vos informations d'utilisateur et mettre à jour votre mot de passe.

Les données sont déjà stockées dans votre base de données SQLite et votre application est essentiellement prête à être déployée !

Conclusion

En suivant ces étapes, vous avez démarré avec succès une application Web full-stack à l'aide de Laravel et React, avec authentification et système de gestion de profil utilisateur.

Breeze vous offre un excellent point de départ, mais à partir de là, vous pouvez vous concentrer sur l'ajout d'une logique métier personnalisée, l'amélioration de l'UI/UX ou l'intégration de services tiers, tout en vous appuyant sur les épaules de l'écosystème de Laravel.