On se retrouve une nouvelle fois avec mon framework préféré, il s’agit bien sur de Laravel. Ce tutoriel s’adresse surtout aux débutants qui commencent avec le framework PHP, mais j’espère qu’il sera surtout utile pour le plus grand monde. Plutôt que de continuer à utiliser un CDN (content delivery network ou en bon français réseau de diffusion de contenu) je vais rapatrier les fichiers en local directement dans mon projet Laravel.
Cela peut se justifier pour plusieurs raisons et attention, je préfère rappeler que selon votre projet et sa nature, ce n’est pas forcément la meilleure solution. Dans ce tutoriel, c’est simplement pour montrer comment faire. Pour le dernier projet où je l’ai fait, c’était un choix assumé et réfléchi, mais ce n’est pas la chose à faire à chaque fois. J’ai donc préférer stocker directement les ressources CSS et JavaScript dans mon application Laravel, mais avant de le faire, demandez vous bien pourquoi vous avez besoin de le faire.
Nous allons voir comment rapatrier les fichiers externes comme le style quand vous utilisez par exemple un framework CSS tel que Bootstrap ou Tailwind CSS. En réalité, peu importe le framework CSS que vous utilisez le principe sera identique. Il en va de même pour les librairies JavaScript et que ce soit notre bon vieux jQuery, React, Vue.js ou encore Alpine.js, le principe et la marche à suivre seront similaires.
Utilisation d’un CDN pour le JavaScript et CSS
Quand je lance une nouvelle application avec Laravel, j’aime bien tester différentes choses surtout du côté du front-end pour améliorer mes connaissances. Le choix le plus logique dans ce cas-là, c’est d’intégrer la librairie et le style directement dans la vue qui fait office de layout. Pour le cas le plus basique, ça revient à intégrer dans votre header les choses de cette manière :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>Pour une phase de test, c’est bien, mais si j’ai envie de ne plus être dépendant d’un CDN, comme je le disais dans l’introduction parfois, j’ai envie de récupérer tout le code localement. Maintenant, une fois téléchargé, il faut intégrer ce bootstrap directement dans notre projet Laravel.
Stocker en local les feuilles de style CSS et les librairies JavaScript dans Laravel
Si vous ne s’avez pas comment appeler vos ressources en local sur Laravel directement dans votre vue blade vous allez voir, c’est vraiment très facile. Commencez par d’abord par télécharger les différents fichiers CSS et JavaScript directement en local. Ensuite, il va falloir aller les ranger au bon endroit dans le système de fichier de Laravel.
- Les fichiers CSS dans : /leprojet/nomduprojet/resources/css
- Les fichiers JavaScript dans : /leprojet/nomduprojet/resources/js
Une fois que vous avez bien rangé vos fichiers dans les bons emplacements, vous pouvez alors les appeler avec le code « asset » de Laravel dans votre vue blade de la façon suivante :
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>Voilà vous avez récupéré l’ensemble du code JavaScript et les feuilles de style CSS directement en local sans avoir besoin de CDN.