Apprendre Express.js : Fichiers Statiques (CSS, JS, Images…)

Définir un dossier pour les ressources

Les ressources statiques d’un site web sont généralement des :

• Fichiers .css
• Fichiers .js
• Images

Avant toute chose, il faut donc créer un dossier destiné à les stocker. On l’appelle généralement par convention 📁 public.

Créer le lien vers ce dossier

Pour servir ces ressources statiques, on utilise dans Express le middleware express.static(). Cette fonction prend en paramètre le nom du répertoire qui contient les ressources. Dans notre cas, il s’agit de public.

Ce chemin vers le dossier peut être déclaré de manière relative ou absolue.

Chemin relatif

Le seul argument requis par cette fonction est root, qui spécifie le chemin, depuis le répertoire racine, à partir duquel servir les fichiers statiques.

app.use(express.static('public'));

Chemin absolu

Un chemin d’accès absolu préfixe simplement le chemin avec la variable __dirname qui fait référence à la racine du projet.

app.use(express.static(__dirname + '/public'));

Lier des ressources

Pour pointer vers une ressource, votre lien doit prendre la forme : {nom de domaine}/{chemin vers la resssource depuis 📁 public}

Désormais, vous pouvez charger les fichiers .css, .js et images de votre projet comme ceci :

http://localhost:3000/images/logo.png
http://localhost:3000/images/favicon.png
http://localhost:3000/css/style.css
http://localhost:3000/js/scripts.js

doctype html
html
	head
		title= title
		meta(charset='UTF-8')
		link(rel="stylesheet", href="/css/style.css")
	body
		include includes/header.pug
		block content
		include includes/footer.pug

img(src='/images/logo.png', alt='Logo - laConsole')

Aller plus loin

Plusieurs répertoires statiques

Pour utiliser plusieurs répertoires statiques, il suffit d’appeler la fonction middleware static() plusieurs fois :

app.use(express.static('public'));
app.use(express.static('uploads'));

Express recherche les fichiers dans l’ordre spécifié dans le code par la fonction static() (ici d’abord 📁 public, puis 📁 uploads).

Chemin d’accès virtuel

Il est également possible de créer un préfixe de chemin d’accès virtuel (dans lequel le chemin d’accès n’existe pas vraiment dans le système de fichiers).

Pour cela, il suffit de préciser en premier paramètre de la méthode app.use(), le chemin virtuel en question.

app.use('/demo', express.static('public'));

Maintenant, vous pouvez charger les fichiers .css, .js et images qui sont dans le répertoire 📁 public, à partir du préfixe de chemin d’accès /demo :

http://localhost:3000/demo/images/logo.png
http://localhost:3000/demo/images/favicon.png
http://localhost:3000/demo/css/style.css
http://localhost:3000/demo/js/scripts.js

Plus d’options

Il est aussi possible de spécifier d’autres options facultatives à la fonction static().