node.js express servir des fichiers html

Je vous montre comment servir des fichiers html avec node.js en utilisant le module express de manière simple et efficace.

Pré-requis conseillés aux débutants :

– Comprendre node.js;
– Installer node.js.

Création d’un dossier projet

Créez un dossier pour y mettre les fichiers du projet qui seront créés.

node.js express, installation

L’utilisation de cette librairie nécessite l’installation de la librairie : placez vous dans le dossier de votre projet (votre site web) node.js et exécutez la commande.

npm install express

Créer un serveur web avec node.js express

Pour commencer, dans le dossier du projet, créez un fichier javascript en le nommant exemple.js. Vous y mettrez tout le code javascript de l’exercice.

Pour utiliser le module node.js express, il faut déclarer une variable express faisant référence au module installé précédemment.

let express = require('express');

Puis instancier le serveur.

let server = express();

Enfin mettre le serveur en écoute sur un port déterminé, pour l’exemple le port choisi est 8050.

server.listen(8050);

Le code final

let express = require('express');
let server = express();
server.listen(8050);

Pour démarrer le serveur node.js, il suffit d’invoquer la commande suivante.

node exemple.js

Jusque là rien de complexe. Mais en l’état, rien n’est servi : si vous faites le test en invoquant l’url http://localhost depuis votre navigateur, vous apercevrez le message cannot GET.

Souvenez vous qu’à chaque modification, il vous faudra stopper node.js (par la combinaison des touches CTRL + C) et le redémarrer.

Servir une page html avec node.js express

Dans le dossier de votre projet, créez une page html nommée simple.html.

<html>
 <body>
  VUE SIMPLE
 </body>
</html>

L’objet server met à disposition une méthode get qui traite une requête http de type get et prenant en paramètres :
– une url par laquelle est appelée la fonction get de l’objet server;
– une fonction callback invoquée lorsque l’appel est fait, fonction prenant en paramètre un objet request et un objet response.

Dans l’exemple ci-dessous, on définit l’url / accessible depuis votre navigateur par http://adresseServeur:8050/

server.get('/', function(request, response) {
 ....
});

Si depuis votre navigateur, vous appelez l’url http://adresseServeur:8050/, alors la fonction callback javascript est appelée.

Autre exemple.

server.get('/fairedesjeux', function(request, response) {
 ....
});

Si depuis votre navigateur, vous appelez l’url http://adresseServeur:8050/fairedesjeux, alors la fonction callback javascript est appelée.

C’est la fonction callback javascript qui va servir la page html par le biais de l’url invoquée.

Servir une page html consiste simplement à renvoyer la page html par le biais de la méthode sendfile de l’objet response paramètre de la fonction callback.

server.get('/simple.html', function(request, response) {
 response.sendfile('./simple.html');
});

L‘url spécifiée et le fichier renvoyé peuvent être différents.

server.get('/pagesimple', function(request, response) {
 response.sendfile('./simple.html');
});

Et dans ce cas, il faut invoquer depuis le navigateur l’url http://adresseServeur:8050/pagesimple pour que la page simple.html soit affichée.

Le code complet

let express = require('express');
let server = express();
server.get('/simple.html', function(request, response) {
    response.sendfile('./simple.html');
});
server.listen(8050);

Remarquez que cela peut devenir un peu lourd car cela vous oblige à déclarer tous les chemins les uns après les autres.

Utiliser node.js pour servir des pages web statiques n’a aucune raison d’être des serveurs web http comme Apache le font très bien.

L’intérêt de node.js réside dans d’autres utilisations, notamment le jeu en réseau.

L’api node.js express : node.js express api.

node.js express servir des fichiers html