ExpressJS : Servir des Fichiers Statiques - Tutoriel Détaillé pour Débutants

Introduction : Que sont les Fichiers Statiques ?

Les fichiers statiques sont des fichiers que le serveur envoie aux clients tels quels, sans modification. Cela inclut des images, des fichiers CSS, des scripts JavaScript, etc. Avec ExpressJS, un framework populaire pour Node.js, vous pouvez configurer cela facilement, mais ce n’est pas activé par défaut. Nous allons apprendre à le faire étape par étape.

Étape 1 : Configurer les Fichiers Statiques avec ExpressJS

Pour commencer, vous devez créer un répertoire pour vos fichiers statiques et activer une fonctionnalité spéciale dans ExpressJS. Suivez ces instructions :

Exemple de Code : Activer les Fichiers Statiques

Voici un exemple simple pour servir des fichiers statiques depuis un dossier nommé "public". Ce code utilise une fonctionnalité intégrée d’ExpressJS appelée "middleware". Nous allons l’expliquer en détail juste après.

📋 Copier le code

var express = require('express');
var app = express();
app.use(express.static('public'));
app.listen(3000);
    

Explication Détaillée du Code

Analysons ce code ligne par ligne pour que vous compreniez chaque partie, même si vous êtes totalement novice :

• var express = require('express'); : Cette ligne importe le module ExpressJS, qui est une bibliothèque pour créer des serveurs web avec Node.js.
• var app = express(); : Crée une instance de l’application Express. C’est comme le cœur de votre serveur.
• app.use(express.static('public')); : Cette ligne active le "middleware" pour servir les fichiers statiques. Le dossier "public" est celui où vous placerez vos fichiers (images, scripts, etc.). Le terme "middleware" désigne une fonction qui traite les requêtes avant qu’elles n’atteignent leur destination finale.
• app.listen(3000); : Démarre le serveur sur le port 3000. Vous pourrez y accéder via http://localhost:3000.

Note : Express cherche les fichiers dans le dossier "public" par rapport à l’emplacement du script. Le nom "public" n’apparaît pas dans l’URL. Par exemple, pour une image "testimage.jpg" dans "public", l’URL sera simplement "/testimage.jpg".

Étape 2 : Tester avec une Image

Pour vérifier que cela fonctionne, ajoutons une image et affichons-la via une vue Pug. Voici un exemple complet :

📋 Copier le code

var express = require('express');
var app = express();
app.use(express.static('public'));
app.set('view engine', 'pug');
app.set('views', './views');
app.get('/static_files', function(req, res){
    res.render('static_files');
});
app.listen(3000);
    

Et dans le fichier views/static_files.pug :

📋 Copier le code

html
    head
    body
        h3 Tester le service de fichiers statiques :
        img(src="/testimage.jpg" alt="Image de test")
    

Explication Détaillée du Code

Voici ce que fait ce code :

• app.set('view engine', 'pug'); : Définit Pug comme moteur de rendu pour les vues. Pug est un langage de template qui simplifie l’écriture HTML.
• app.set('views', './views'); : Indique que les fichiers de vues (comme "static_files.pug") sont dans le dossier "views".
• app.get('/static_files', function(req, res){ res.render('static_files'); }); : Crée une route "/static_files". Quand vous visitez cette URL, Express rend le fichier "static_files.pug". "req" (requête) et "res" (réponse) sont des objets représentant la demande du client et la réponse du serveur.
• img(src="/testimage.jpg" alt="Image de test") : Dans Pug, cette ligne ajoute une image située dans "public". L’attribut "src" pointe vers le fichier, et "alt" décrit l’image pour le SEO et l’accessibilité.

Pour tester, placez une image nommée "testimage.jpg" dans "public", lancez le serveur avec node index.js, et visitez http://localhost:3000/static_files.

Étape 3 : Utiliser Plusieurs Répertoires Statiques

Vous pouvez aussi servir des fichiers depuis plusieurs dossiers. Voici comment :

📋 Copier le code

var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.static('images'));
app.listen(3000);
    

Explication Détaillée du Code

Ce code ajoute un second dossier statique :

• app.use(express.static('images')); : Ajoute le dossier "images" comme source de fichiers statiques. Si un fichier existe dans "public" et "images" avec le même nom, celui de "public" est prioritaire (car déclaré en premier).

Étape 4 : Ajouter un Préfixe Virtuel

Pour mieux organiser vos URL, vous pouvez ajouter un préfixe comme "/static". Voici un exemple :

📋 Copier le code

var express = require('express');
var app = express();
app.use('/static', express.static('public'));
app.listen(3000);
    

Explication Détaillée du Code

Voici ce qui change :

• app.use('/static', express.static('public')); : Les fichiers dans "public" sont maintenant accessibles via "/static". Par exemple, "public/main.js" devient "/static/main.js".

Pour inclure un fichier comme "main.js" dans une page HTML, utilisez : <script src="/static/main.js"></script>. Cela aide à distinguer les fichiers de différents dossiers statiques.

Gérer les Erreurs : Fichier Statique Introuvable (404)

Lorsqu’un utilisateur tente d’accéder à un fichier statique qui n’existe pas dans votre dossier "public", ExpressJS ne renvoie rien par défaut. Pour améliorer l’expérience utilisateur et gérer ces erreurs, vous pouvez ajouter un middleware personnalisé qui renvoie une erreur 404 avec un message clair. Voici comment faire, étape par étape.

Exemple de Code : Middleware pour Erreur 404

Ce code ajoute une gestion d’erreur personnalisée après la configuration des fichiers statiques. Il intercepte les requêtes non satisfaites et renvoie un message d’erreur.

📋 Copier le code

var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(function(req, res, next) {
    res.status(404).send("Désolé, ce fichier n'existe pas !");
});
app.listen(3000);

Explication Détaillée du Code

Analysons ce code ligne par ligne pour que même un débutant comprenne chaque partie :

• var express = require('express'); : Importe le module ExpressJS, qui permet de créer un serveur web avec Node.js. C’est la base de tout projet Express.
• var app = express(); : Crée une instance de l’application Express, qui sera utilisée pour configurer le serveur.
• app.use(express.static('public')); : Active le middleware intégré express.static pour servir les fichiers statiques depuis le dossier "public". Si une requête correspond à un fichier existant, elle s’arrête ici. Sinon, elle passe à la suite.
• app.use(function(req, res, next) { ... }); : Ajoute un middleware personnalisé. Ce middleware est exécuté pour toutes les requêtes qui n’ont pas trouvé de fichier dans "public". Voici ses paramètres :
  • req : L’objet "requête" contenant les informations sur ce que le client demande.
  • res : L’objet "réponse" utilisé pour renvoyer une réponse au client.
  • next : Une fonction qui passe la requête au middleware suivant. Ici, on ne l’utilise pas car c’est la dernière étape.
• res.status(404).send("Désolé, ce fichier n'existe pas !"); : Définit le code de statut HTTP à 404 (indiquant "Non trouvé") et envoie un message texte au client. Le code 404 est une norme du web pour signaler une ressource manquante.
• app.listen(3000); : Lance le serveur sur le port 3000. Vous pouvez tester en visitant http://localhost:3000 dans votre navigateur.

Pour tester, essayez d’accéder à une URL comme http://localhost:3000/fichier-inexistant.jpg. Si le fichier n’est pas dans "public", vous verrez le message "Désolé, ce fichier n’existe pas !".

Conclusion

Vous savez maintenant comment servir des fichiers statiques avec ExpressJS, utiliser plusieurs dossiers, et ajouter des préfixes d’URL. Explorez davantage avec la documentation officielle d’ExpressJS.