Dans cette courte vidéo, le présentateur explique comment servir des fichiers statiques (images, CSS, polices, scripts client) avec Express. Il commence par définir les assets statiques et montre que, par défaut, Express bloque tout accès direct aux fichiers du projet. Il crée un répertoire `public` contenant les sous‑dossiers `css`, `fonts` et `images`, ainsi que deux vues EJS (`header.ejs` et `home.ejs`). En lançant le serveur sans configuration, il montre que les images et le CSS ne sont pas accessibles. Il ajoute alors le middleware `app.use(express.static('public'))` et démontre que les assets sont désormais servis sans préfixer `public` dans l’URL (ex. `images/bac.jpg`). Il montre également comment définir un préfixe virtuel (ex. `/files`) en passant un premier argument à `use`, et comment accéder aux assets avec ce préfixe. Enfin, il indique qu’on peut répéter `app.use` pour servir plusieurs dossiers, bien que l’usage habituel soit un seul dossier contenant toutes les assets. Le code source est fourni dans la description.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle vidéo sur le framework Express. Cette vidéo sera relativement courte car je vais la consacrer exclusivement à comment servir les fichiers statiques depuis un serveur, ce qui ne requiert qu'une ligne de code supplémentaire dans notre fichier app.js, mais il est capital de comprendre comment ça marche car une grande partie de votre projet pourrait reposer dessus. On appelle les fichiers statiques ou assets les fichiers dont l'exécution ne dépend pas du serveur mais c'est plutôt le navigateur qui s'en charge, comme les images, les fichiers de style CSS, les polices, les fichiers JavaScript exécutables sur le client, etc. Le framework Express empêche par défaut tout accès direct aux fichiers du projet, donc il faut passer par le fichier principal app.js pour avoir accès à ces ressources-là. J'ai déjà préparé un dossier qui s'appelle public. Dedans, j'ai placé 3 autres sous-dossiers qui sont CSS, fonts et images. Le dossier CSS contient un seul fichier style.css qui est le style principal de notre projet. Et pour le dossier fonts, il contient 2 polices. Et le dossier images contient 2 images aussi. Notez que le dossier public est placé dans la racine du projet, c'est-à-dire dans le même répertoire que app.js. Essayons par exemple d'accéder à l'image back.jpg. On mettra le dossier public, le dossier images, bac.jpg. On constate qu'on n'a pas accès à l'image et le serveur nous répond comme quoi la route demandée n'est pas disponible. Dans notre dossier views, j'ai prévu 2 fichiers EJS, header et home dont le code est le suivant. Home c'est la page principale et header n'est qu'une partie que je vais inclure dans cette page. Elle contient le logo et le menu de navigation. Pour afficher la page Home.ejs, on doit spécifier la route GET/. Alors voilà ce qu'on obtient. Nous avons une partie du logo, le menu de navigation et 3 titres H1. Et comme vous le voyez, ça ne ressemble pas à grand-chose, bien que le style CSS est déjà prêt, mais il n'est pas appliqué en raison que le serveur empêche tout accès direct à ces ressources-là. On va changer ça tout de suite. Il suffit d'aller dans le fichier app.js et on va ajouter un nouveau middleware à l'aide de la méthode use et dedans on va faire appel à la méthode static de l'instance Express et comme argument on va spécifier le nom du dossier qui contient les fichiers statiques, dans notre cas c'est public. Maintenant essayons d'accéder à l'image bac.jpg. Là pas la peine de spécifier le dossier public parce qu'il est déjà pris en charge par le serveur. On mettra directement images/bac.jpg et on constate que l'image est bien chargée. Alors maintenant on va exécuter notre route GET avec slash et on constate que le style CSS est bien appliqué avec les images et les polices. Je vous laisserai les codes sources pour le téléchargement en description. On peut carrément spécifier un dossier virtuel en guise de répertoire qui contient les assets. On va par exemple l'appeler files. C'est le premier argument de la méthode use comme on a fait pour les routes avant. Et maintenant dans nos fichiers HTML ou bien EJS, il faut spécifier le dossier files. Réexécutons. On constate que ça marche toujours. Même chose si je veux accéder à une image, il faut spécifier files et voilà ça marche. Notez qu'il est possible de spécifier plusieurs dossiers qui permettent de servir les fichiers statiques. Il suffit de répéter cette instruction app.use et vous mettez le nom du dossier souhaité. Mais il est courant de spécifier un seul dossier qui contient toutes les assets dont on aura besoin. Merci pour votre attention et à la vidéo prochaine.
