EDEROONEY.
Publié le

Comment envoyer un fichier HTML avec un serveur Node.js et Express

Auteurs

Les développeurs web le savent, la liaison entre le client et le serveur est essentielle. L'envoi de fichiers lors des communications est une pratique assez courante dans ce domaine. Cette pratique permet d'envoyer des pages dynamiques du serveur vers le client, souvent via le navigateur. Vous êtes déjà sûrement tombé sur une page web où vous avez téléchargé un fichier PDF ou Word. Ce que vous ne savez peut-être pas, c'est que tous ces fichiers proviennent d'un serveur. De la même manière, les serveurs peuvent envoyer des fichiers HTML qui sont directement lus et affichés par le navigateur.

Dans cet article, je vais vous montrer trois façons presque similaires mais différentes d'envoyer des fichiers HTML depuis un serveur web Node.js avec Express.js. Une version live live est disponible ici:. Le code est également disponible sur github.

Illustration d'envoie de fichier html depuis un server nodejs
Ne manquez pas mes prochains articles

Les prérequis

Bien que cet article soit prévu pour satisfaire les lecteurs de tous les niveaux, il est préférable d'avoir une connaissance de base en programmation JavaScript. De plus, vous devriez avoir téléchargé et installé Node.js qui est livré avec son gestionnaire de paquets npm. Assurez-vous également d'avoir un éditeur de code tel que VSCode.

Création de notre serveur Node.js - Express

Il est très facile de créer un serveur web en Node.js, surtout si vous le faites avec Express.js. Commençons par créer un dossier pour le projet. Pour ce faire, ouvrez votre terminal dans le répertoire où vous souhaitez enregistrer le dossier de ce projet et continuez avec les commandes suivantes:

mkdir serverNodejs
cd serverNodejs

Une fois que le dossier est créé et que nous sommes maintenant à l'intérieur, nous allons initialiser notre projet Node.js avec la commande suivante : npm init -y. L'argument -y permet d'accepter les réponses par défaut à toutes les questions qui seraient posées. Si vous préférez y répondre vous-même, assurez-vous d'effacer le fichier créé et recommencez la commande sans le -y.

Maintenant que le projet est initialisé, nous allons installer notre dépendance principale Express.js avec la commande suivante :

npm install express

Cette commande ajoutera Express.js en tant que dépendance à notre projet Node.js, nous permettant ainsi de l'utiliser pour la création de notre serveur web.

Nous allons maintenant créer notre serveur avec Express. Pour ce faire, commençons par ajouter un fichier racine dans notre dossier avec la commande suivante :

touch app.mjs

Un fichier app.mjs sera ainsi créé dans le dossier. Ouvrez le fichier dans votre éditeur de code et collez le code ci-après :

import express from 'express'

const PORT = process.env.PORT || 8080
const app = express()

app.listen(PORT, () =>
  console.log(`Notre serveur est en marche à cette adresse : http://localhost:${PORT}`)
)

Simple et facile, n'est-ce pas ? On vient de créer un serveur Node.js - Express.js. Cependant, notre serveur ne fait encore rien. Pour le tester, vous pouvez exécuter la commande suivante dans votre terminal : node app.mjs. Dans la console, vous verrez apparaître Notre serveur est en marche à cette adresse : http://localhost:8080. Si vous ouvrez le navigateur et allez à cette adresse, vous verrez une erreur: cannot get

Envoi de fichier HTML :

Méthode 1 : res.sendFile()

La première méthode dont je veux vous parler aujourd'hui est celle permettant d'envoyer les fichiers avec la méthode sendFile de l'objet réponse que Express met à notre disposition. Pour tester cela, nous allons créer notre première route. Votre fichier app.mjs sera comme suit :

import express from 'express'
import { fileURLToPath } from 'url'
import { dirname } from 'path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const PORT = process.env.PORT || 8080

const app = express()

app.get('/sendfile', (req, res) => res.sendFile(__dirname + '/public/fichier.html'))

app.listen(PORT, () =>
  console.log(`Notre serveur est en marche à cette adresse: http://localhost:${PORT}`)
)
Ne manquez pas mes prochains articles

Envoi de fichiers HTML avec Express.js - Méthode 2

Dans ce code, nous avons ajouté une route qui écoute sur la route /sendfile. Lorsque le serveur reçoit cette requête, il répond en renvoyant avec la méthode sendFile() de l'objet réponse d'Express, le fichier fichier.html qui se trouve dans le dossier public. Pour que tout fonctionne correctement, assurez-vous de créer un dossier public et d'y ajouter les fichiers de test au fur et à mesure que nous avançons dans l'article. Si votre serveur est toujours en marche, faites un Ctrl + C pour l'arrêter et relancez-le avec node app.mjs. Ensuite, allez consulter ce lien dans votre navigateur pour voir : http://localhost:8080/sendfile

Méthode 2 : res.send()

La deuxième méthode, plus native selon moi, consiste à utiliser le système de fichier fs de Node.js. Avec fs, nous allons lire le contenu de notre fichier de manière synchrone, sauvegarder ce contenu comme une chaîne de caractères dans une variable, puis renvoyer cette variable à l'utilisateur avec la méthode send() de l'objet réponse d'Express. Le code ci-dessous vous montre un exemple concret :

import express from 'express'
import { fileURLToPath } from 'url'
import { dirname } from 'path'
import fs from 'node:fs'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const PORT = process.env.PORT || 8080

const app = express()

app.get('/sendfile', (req, res) => res.sendFile(__dirname + '/public/fichier.html'))

app.get('/string', (req, res) => {
  // Lecture du contenu du fichier de manière synchrone
  const contenuDuFichier = fs.readFileSync(__dirname + '/public/fichier.html', 'utf8')

  // Renvoi du contenu en tant que réponse
  res.send(contenuDuFichier)
})

app.listen(PORT, () =>
  console.log(`Notre serveur est en marche à cette adresse: http://localhost:${PORT}`)
)

Dans le fichier app.mjs, j'ai ajouté une nouvelle route /string. Comme je vous le disais plus haut, j'utilise fs.readFileSync() pour lire le contenu de mon fichier, que je renvoie avec la méthode send(). Coupez votre serveur et redémarrez-le. Allez à cette adresse http://localhost:8080/string pour voir si le résultat est le même.

Envoi de fichiers HTML avec Express.js - Méthode 3

La troisième méthode dont je veux vous parler, consiste à servir des fichiers HTML en utilisant la configuration des dossiers statiques dans Express.js. Cette méthode est pratique pour servir des fichiers statiques tels que des fichiers HTML, des images, des feuilles de style, etc., sans avoir à créer une route pour chaque fichier.

Pour commencer, nous allons configurer Express pour servir nos fichiers statiques à partir d'un dossier. Vous pouvez le faire pour n'importe quel dossier. moi je vais choisir le dossier public. En utilisant le middleware express.static(), je vais indiquer que mes fichiers se trouvent dans le dossier public.

import express from 'express'
import { fileURLToPath } from 'url'
import { dirname } from 'path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const PORT = process.env.PORT || 8080

const app = express()

// Configurez Express pour servir des fichiers statiques à partir du dossier "public"
app.use(express.static(__dirname + '/public', { extensions: ['html', 'css', 'js'] }))

app.get('/sendfile', (req, res) => res.sendFile(__dirname + '/public/fichier.html'))

app.get('/string', (req, res) => {
  // Lecture du contenu du fichier de manière synchrone
  const contenuDuFichier = fs.readFileSync(__dirname + '/public/fichier.html', 'utf8')

  // Renvoi du contenu en tant que réponse
  res.send(contenuDuFichier)
})

app.listen(PORT, () =>
  console.log(`Notre serveur est en marche à cette adresse : http://localhost:${PORT}`)
)

Avec cette configuration, notre server servira automatiquement tous les fichiers présents dans le dossier public. Vous devez spécifier l'URL relative au dossier public. Par exemple, si vous avez un fichier HTML appelé fichier.html dans le dossier public, vous pouvez y accéder avec l'URL suivante : http://localhost:8080/fichier. Si le fichier se trouve lui même dans un sous dossier dans le dossier public, vous devez spécifier se sous dossier dans votre url.

Dans ce cas précis, je n'ai pas rajouté les extensions par ce que j'en ai énuméré quelques unes dans le middleware. En tant normal, votre url doit se terminer par l'extension du fichier que vous souhaitez renvoyer.

Cette méthode est simple et efficace pour servir des fichiers statiques, et elle est souvent utilisée pour servir des pages web complètes avec leurs ressources associées.

Ne manquez pas mes prochains articles

Conclusion

En somme, je vous ai montré trois méthodes des plus courantes utilisées en nodejs pour envoyer des fichiers html d'un server vers un client. Cette pratique est courante dans le web et permet d'envoyer des pages dynamiques et toutes leurs ressources. J'ose espérer que cet article vous auras appris quelque chose de nouveau. N'hesitez pas à consulter mes autres article créer un api restfull avec nodejs et express et comment créer votre portfolio avec nodejs et expressjs