Nous allons maintenant faire un petit aparté pour détailler l'utilisation des assets front-end (JavaScript / CSS) dans le cadre de Laravel. Lorsque l'on commence à travailler sur du JavaScript on a très rapidement besoin d'outils comme des bundlers pour travailler efficacement. Malheureusement ces outils sont souvent pensés pour des sites web statiques et l'intégration avec une application backend n'est pas forcément évident.
Lors de son installation Laravel dispose déjà d'une configuration permettant d'utiliser le bundler Vite avec un fichier package.json pré-rempli.
npm installEnsuite vous pouvez lancer le serveur de développement de vite en utilisant la commande.
npm run devIl vous faudra en revanche modifier votre template blade de base pour inclure les chemins vers les assets distribuées par vue.
<!doctype html>
<head>
{{-- ... --}}
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>Lors de la mise en ligne du site vous pourrez "construire" les assets en utilisant la commande npm run build et la directive @vite affichera automatiquement le chemin vers le fichiers compilés.
Vous pouvez aussi modifier le fichier de configuration vite.config.js à la racine de votre projet Laravel pour modifier le bundle en fonction de vos besoins. La documentation détaille quelques cas d'utilisation spécifique comme le support de framework front-end (react, vue, inertia...).
