Nous allons dans ce chapitre parler un peu de la partie front-end et de la gestion des assets dans le cadre d'une application Symfony. Même si pour des besoins de base il est possible de placer nos ressources dans le dossier public, le dossier assets offre plusieurs avantages :
- Le versioning, qui ajoutera un suffixe après le nom des fichiers qui permet de configurer un cache longue durée sur les fichiers CSS, JS, images...
- Le mapping, qui permettra de faire référence à un fichier par son chemin original.
- Importmaps qui permettra d'importer une ressource depuis un import JavaScript.
Pendant le développement les ressources sont automatiquement distribuées si vous utilisez le serveur disponible via la commande symfony symfony serve.
Quand on passera en production, il faudra utiliser la commande asset-map:compile pour compiler les assets dans le dossier public afin de les rendre accessibles.
php bin/console asset-map:compileLibrairie tierce
Il est aussi possible d'importer des librairies tierces à l'aide de la commande importmap:require qui téléchargera le fichier du module et qui mettra à jour l'importmap
php bin/console importmap:require canvas-confettiOn peut ensuite utiliser la librairie classiquement dans notre code JS.
import confetti from 'canvas-confetti'
document.body.addEventListener('click', () => {
confetti()
})
