04 - Symfony : Gestion des assets

Objectifs

• ✅ Découvrir comment sont gérés les assets dans les différentes versions de Symfony
• ✅ Mettre en place des feuilles de style CSS ou SCSS
• ✅ Organiser son code JavaScript si besoin
• ✅ Installer et utiliser des dépendances frontend dans Symfony

Pré-requis

​ Avoir terminé la quête :

Introduction

Ton projet est maintenant prêt et tu vas bientôt pouvoir commencer à assembler tes pages. Mais avant cela, il faut que tu termines la prise en main de la partie frontend. Cette quête va te permettre de comprendre comment gérer les fichiers CSS et tous les assets de ton webdesign dans un projet Symfony. Tu pourras également voir comment intégrer du code JavaScript mais pour information, nous reviendrons plus en détail sur ce point lorsque nous parlerons de la librairie Stimulus dans une prochaine quête qui lui sera entièrement dédiée.

💡 Prends connaissance du challenge de cette quête avant de te lancer dans l'étude des ressources qui te sont proposées.

Sommaire

AssetMapper - Symfony >= 6.3 (recommandé)

Si tu travailles sur un tout nouveau projet Symfony installé avec l'option --webapp, tu es très certainement sur une version supérieure à 6.3 déjà configurée avec AssetMapper. Suis la quête ci-dessous pour apprendre à gérer les assets de ton projet avec ce bundle.

💡 Tu peux lancer la commande suivante pour connaître la version précise de ton projet et avoir d'autres informations le concernant :

sh

symfony console about

Webpack Encore (Symfony < 6.3)

Si tu travailles sur une version antérieure à 6.3, alors tu es probablement dans un environnement configuré avec le bundle Webpack Encore. Ce sera probablement le cas lorsque tu arriveras prochainement dans une équipe travaillant sur un projet déjà existant. Garde bien la quête suivante en tête, elle te sera utile pour comprendre l'écosystème frontend d'un tel projet.

💪 Challenge

C’est le moment de donner de la couleur et de la vie à ton Wild Series !

• Configure ton projet avec le framework frontend de ton choix. Voici une liste pour t'aiguiller dans ta sélection :
  • Bootstrap : probablement le plus populaire, il comporte beaucoup de composants prêts à l'emploi et une documentation très complète.
  • Pico CSS : minimaliste et très simple, tu pourras facilement intégrer tes propres règles CSS et appliquer un HTML sémantique de qualité.
  • UIKit : très populaire et complet, une bonne alternative à Bootstrap.
  • Tailwind : un framework basé sur des classes utilitaires. Il te faudra installer le bundle TailwindBundle pour l'utiliser facilement avec AssetMapper.
• Crée une navbar dans un fichier _navbar.html.twig et inclus ce fichier dans ton fichier base.html.twig, afin que celle-ci s’affiche sur toutes les pages.
• Ajoute un simple lien permettant de revenir sur la page d’accueil
• Ajoute une favicon de ton choix dans le dossier images et appelle-la dans la partie <head> du fichier base.html.twig. Attention, il s'agit d'une image de décoration, elle doit donc être rangée au bon endroit. Hint : https://alsacreations.com/astuce/lire/59-icon-link-rel-favicon-ico-navigateur.html
• Fais un commit et un push de ton travail.

Critères de validation

• Les fichiers du framework sont chargés dans tes pages (regarde les sources HTML et vérifie que tu n'as pas de 404 sur tes fichiers dans l'inspecteur > "Réseau").
• Une barre de navigation s'affiche correctement sur tes pages et est fonctionnelle
• Une favicon est affichée dans l'onglet de ton navigateur