Voici donc une liste d’outils que j’utilise avec le moteur Laravel, tout simplement car lors de la formation ils étaient utilisés et qu’il sont pratiques.

Le premier d’entre eux est vite cet outil permet de gérer et générer les ressources js et css dont vous aurez besoin dans votre projet, de compiler le tout et dans certaines conditions de pouvoir afficher en direct les modifications que vous faites dans votre code source.

Vite est déjà inclus dans Laravel, mais il est nécessaire de l’installer, pour cela il faut ouvrir une console, vous rendre dans le répertoire de votre projet et utiliser la commande

npm install

Cette dernière va installer les composants nécessaires.

A noter vous devez avoir installé sur votre machine node.js et npm, mais si vous en êtes là c’est qu’ils doivent l’être.

Les fichiers css et js se trouvent dans le répertoire resources et se nomment app.css et app.js tout le code que vous mettrez dans ces fichiers sera donc compilé et utilisé par votre projet.

Ces deux fichiers sont renseignés dans le fichier vite.config.js à la racine de votre projet, si vous souhaitez en ajouter d’autres, vous devez modifier ce fichier.

Pour pouvoir mettre en route le serveur et donc voir le résultat en direct, vous devez revenir à la console et utiliser la commande

npm run dev

Tant que le serveur est en cours d’exécution, si vous modifiez votre code, le résultat est rafraichit en direct sur votre navigateur.

Pour compiler le code afin de le déployer en prod, il faut utiliser la commande

npm run build

Cette commande va compiler les fichiers css et js et les mettre dans le répertoire public pour qu’ils soient utilisés en production.

Deuxième outils bien pratique pour le css, tailwindcss, c’est un framework css qui vous permet de définir un visuel à partir de classes assez intelligibles et rapidement, la procédure d’installation est ici, toujours se mettre à la racine du projet avant d’exécuter les commandes.

La vue par défaut (welcome.blade.php) contient une injection inline de certaines définitions de tailwindcss, mais il est préférable d’installer le paquet, une fois que c’est fait, dans la vue principale de votre projet (dans le header du html), remplacez donc le tailwindcss inline par

@vite('resources/css/app.css')

Si vous n’avez rien loupé, le visuel de votre projet sur le navigateur ne devrait pas avoir changé.

A partir de maintenant vous pouvez utiliser tailwindcss et vous y prendrez goût.

Attention à partir du moment ou vous avez configuré vite et que vous avez remplacé le bloc de définition css, vous devez toujours avoir une console ouverte avec la commande

npm run dev

Pour sortir du mode run, vous devez faire ctrl+c et répondre oui à la confirmation de fermeture.

Leave a Reply

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

55 − = quarante cinq