Installation et utilisation d'Express.js pour créer un serveur web

Environ 2 min

Installation et utilisation d'Express.js pour créer un serveur web

Présentation

JavaScript a gagné en popularité ces dernières années, notamment grâce à Node.js qui permet de créer des applications web asynchrones et événementielles côté serveur. Express.js est un framework minimaliste pour Node.js qui simplifie la création de sites web. Ce guide explique comment installer et configurer un projet Express, sans gestion de certificat SSL (pour le HTTPS).

Prérequis

Sous Windows

Téléchargez et installez Node.js.
Créez un dossier pour votre projet (ex: myProjet).
Ouvrez le terminal Node.js (recherchez "Node.js command prompt").
Placez-vous dans le dossier du projet :
```
cd chemin\vers\mon\projet
```

Sous Linux (Debian)

Installez Node.js et npm :

sudo apt install nodejs
sudo apt install npm

Créez et placez-vous dans le dossier du projet :
```
mkdir myProjet
cd myProjet
```

Initialisation du projet

Initialisez le projet Node.js :
```
npm init
```
Appuyez sur "Entrée" pour chaque question afin d'utiliser les valeurs par défaut.
Installez les dépendances :
```
npm install
npm install express jsdom
```

Structure du projet

Organisez votre projet comme suit :

myProjet
|-- css
|   `-- style.css
|-- js
|   `-- script.js
|-- img
|   `-- logo.png
|-- html
|   `-- model-1.html
|-- node_modules
|-- index.js 
|-- package.json
`-- package-lock.json

Exemple de fichiers

`index.js`

const express = require('express');
const fs = require('fs');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

const app = express();

// Gestion des fichiers statiques
app.use("/css", express.static("./css"));
app.use("/js", express.static("./js"));
app.use("/img", express.static("./img"));

// Route principale
app.get('/', (req, res) => {
     const ModelHTML = fs.readFileSync("./html/model-1.html");
     const dom = new JSDOM(ModelHTML);
     const document = dom.window.document;
     document.querySelector("title").textContent = "Home";
     res.send(dom.serialize());
});

// Démarrage du serveur HTTP
app.listen(3000, () => {
     console.log("server starting on port : 3000");
});

`html/model-1.html`

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/css/style.css">
     <script src="/js/script.js"></script>
     <title>Document</title>
</head>
<body>
</body>
</html>

`js/script.js`

console.log("ok");

`css/style.css`

body {
     height: 80px;
     background-color: brown;
}

Utilisation des routes avec Express

Pour des sites plus complexes, il est conseillé d’externaliser les routes dans des fichiers séparés.

Nouvelle structure

myProjet
|-- css
|-- js
|-- img
|-- html
|-- node_modules
|-- routes
|   `-- index.js
|-- index.js 
|-- package.json
`-- package-lock.json

Modification de `index.js`

// ...
app.use("/", require("./routes/index.js"));
// ...
// app.get('/', ...) // Cette partie est maintenant commentée ou supprimée

Exemple de `routes/index.js`

const express = require('express');
const fs = require("fs");
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const router = express.Router();

router.get("/", (req, res) => {
     const baseHTML = fs.readFileSync("./html/model-1.html");
     const dom = new JSDOM(baseHTML);
     const document = dom.window.document;
     document.querySelector("title").textContent = "Home";
     res.send(dom.serialize());
});

router.get("/page1", (req, res) => {
     const baseHTML = fs.readFileSync("./html/model-1.html");
     const dom = new JSDOM(baseHTML);
     const document = dom.window.document;
     document.querySelector("title").textContent = "Page1";
     res.send(dom.serialize());
});

module.exports = router;

Conclusion

Express.js permet de créer rapidement un serveur web en Node.js, de gérer des routes et de servir des fichiers statiques. Pour des projets plus importants, externalisez vos routes pour une meilleure organisation du code.