Introduction
Si vous êtes habitué à utiliser Laravel pour créer votre application web. Laravel Breeze est fait pour vous!
Il vous permettra de prendre de l’avance dans la mise en place de votre application. Ce kit structure automatiquement les routes, les contrôleurs et les vues. Tout ce dont vous avez besoin pour l’enregistrement et l’authentification des utilisateurs. D’autre fonctionnalité, lié à l’enregistrement sont inclus :
– La vérification de l’adresse e-mail
– La réinitialisation de mot de passe
– La confirmation du mot de passe.
Laravel Breeze utilise Blade et Tailwind. L’un, pour le système de vues. L’autre, pour le style CSS. De plus, il incorpore aussi Inertia afin de faire le lien facilement entre les framework JavaScript ReactJs ou VueJs et le Backend. En dehors de l’authentification, c’est vraiment le deuxième point qui fait de Laravel Breeze incroyable. Vous pourrez aisément passer de la route, au contrôleur, à la vue, sans prise de tête.
Néanmoins, si vous êtes débutant dans le développement web, nous vous conseillons de d’abord regarder l’article de notre site. Celui-ci est consacré au langage HTML/CSS et ensuite de poursuivre vers l’installation.
Vous êtes prêt? Et bien c’est parti !
Installation Laravel Breeze
Installation de Laravel
Dans un premier temps, vous devez créé une nouvelle application Laravel. Il faut aussi configurer sa base de données et ses migrations. Beaucoup de site oublie de spécifier cette étape. Pourtant, ceci se fait assez simplement.
Choisissez l’emplacement où vous voulez installer votre application. La bonne pratique est de le mettre dans le dossier « /www ».
Dans un terminal, mettez le code suivant selon votre système d’exploitation.
Windows
composer create-project laravel/laravel [le-nom-de-votre-application]Linux ou Mac Os
curl -s https://laravel.build/[le-nom-de-votre-application] | bashEnsuite, il faut dans le dossier qui vient d’être créer, modifier le fichier .env en modifiant les champs entre « [] ». Attention, cette partie ne doit pas être oublier. Sinon, votre application ne pourra pas fonctionner. En général, c’est l’étape où, si quelque chose ne marche pas, le problème se situe ici.
Les points importants à vérifier, sont ceux concernant la connexion à la base de données. Il faut aussi vérifier que la clé a bien été générée. Normalement, cela se fait automatiquement, mais vous pouvez avoir des surprises!
APP_NAME=[le-nom-de-votre-application]
APP_ENV=local
APP_KEY=[la-clé-généré] / php artisan key:generate
APP_DEBUG=true
APP_URL=[Url-de-votre-application]
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=[le-nom-de-votre-base]
DB_USERNAME=[user-de-votre-base]
DB_PASSWORD=[mdp-user]
BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
MEMCACHED_HOST=127.0.0.1
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"Enfin, il ne vous reste plus qu’à migrer votre structure de la base en utilisant le code suivant. Si une erreur se produit, revenez à l’étape précédente et vérifiez.
php artisan migrateInstallation de Breeze
Désormais, vous devez installer le kit de Breeze pour accéder à toutes ses fonctionnalités. Pour ce faire, vous devez utiliser composer dans le dossier courant. Si composer n’est pas encore installer, vous pouvez le faire ici.
composer require laravel/breeze --devEnsuite, vous pouvez ajouter le kit dans votre projet. Il est préférable d’installer directement votre framework JS à ce moment là. Évidemment, si vous n’en utilisez pas, il suffit de ne rien mettre. Inclure un framework est une meilleure pratique. Cela permet à votre site d’être plus dynamique. Dans notre exemple nous utiliserons VueJs. Il est aussi possible d’utiliser React.
php artisan breeze:install vue
# Or...
php artisan breeze:install react
npm installVérification de l’installation
Au terme de l’installation, vous pouvez vérifier que tout c’est bien passé en lançant le serveur et la visualisation de votre application web. Pour cela, il suffit de rentrer les codes suivant.
php artisan serveToutefois, la version 9x de Laravel utilise Vite. C’est pourquoi il est important de lancer aussi la commande ci-dessous. De là, vous pouvez voir en temps réel, les changements de votre code, quand celui-ci est enregistré. Cela est bien pratique et évite de rafraichir la page toutes les secondes. Encore merci Breeze!
npm run devEn somme, si tout va bien, vous accédez à la page suivante.
Félicitation ! Votre application est prête ! Vous êtes un génie.
Aller plus loin
Page Login/Register de Laravel Breeze
Une fois l’installation finie, la page « /login » et « /register » vous permettrons de vous connecter, et de vous enregistrer. De ce fait, vous pouvez y accéder directement par la page d’accueil, en cliquant en haut à droite.
Ainsi, vous pouvez voir le fonctionnement de l’application avec les contrôleurs dans le dossier « /Auth ».
Ces contrôleurs sont facilement adaptable et modifiable.
Le design sur Laravel breeze
Tailwind est pré-configuré sur Breeze. Il est important de changer cela si vous ne souhaitez pas profiter du thème de base. Car, cela pourrait faire des collusions avec votre propre code CSS.
Aussi, pas besoin d’être un designer en herbe, vous pouvez trouver pleins de thème sur le net. Ils ont pensé à tout pour nous rendre la vie plus facile.
Il y a aussi un système de dark et light mode pré-installé. Vous pouvez le voir sur l’image ici.
Jetstream
Même si Laravel Breeze vous fournit un point de départ simple. Jetstream renforce les fonctionnalités de celui-ci grâce à des mesures plus robustes.
Par exemple, avec Jetstream l’authentification est renforcé en une authentification à deux facteurs.
Celui-ci s’installe facilement grâce à cette commande.
composer require laravel/jetstreamIl y a beaucoup d’autres fonctionnalités que je ne vous décrirais pas ici. Vous pourrez retrouver toute la documentation ici.
Conclusion de Laravel Breeze
En conclusion, Laravel Breeze est un kit essentiel pour facilité la création d’application Laravel. Aussi, comme vous pouvez le voir, celui-ci est vraiment très simple à mettre en place. Il est un bon point de départ, afin de comprendre comment marche l’authentification. Néanmoins, vous devrez aller plus loin, en installant d’autre module pour rendre votre application encore plus sûre. Jetstream est une bonne solution pour cela.
Une fois ces modules installées, votre application aura des bases solides et sécurisées. Il ne reste plus qu’à laisser court à votre imagination et vos connaissances. Internet en frémit d’avance !
Bon courage !