Pourquoi Express.js : guide complet ?
Express.js est un framework web basé sur Node.js pour construire des applications web et des API. Il offre une large gamme de fonctionnalités qui facilitent la création de serveurs HTTP robustes et performants.
Dans un environnement professionnel, Express.js devient indispensable car il permet aux développeurs de gérer efficacement les requêtes HTTP, d'intégrer facilement des fonctionnalités comme l'authentification et le stockage de données, et de structurer leurs applications en composants réutilisables. Par exemple, un développeur pourrait utiliser Express.js pour créer une API de blog où chaque route correspond à une action spécifique sur les articles.
Prerequis
Pour suivre ce tutoriel, vous devrez avoir les connaissances suivantes :
- Connaissance de base d'JavaScript et Node.js
- Familiarité avec les concepts de base des serveurs HTTP
Outils à installer :
- Node.js (v14.0.0 ou plus récent)
- npm (Node Package Manager, généralement installé avec Node.js)
Concepts fondamentaux
Application Express
Chaque application Express est créée en appelant la fonction express().
## Importe le module express
const express = require('express');
## Crée une application Express
const app = express();
## Définit un port sur lequel l'application sera écoutée
const PORT = 3000;
## Lance l'application sur le port spécifié
app.listen(PORT, () => {
console.log(`Application en cours d'exécution sur http://localhost:${PORT}`);
});
Routes
Les routes définissent les actions à effectuer lorsqu'une requête HTTP spécifique est reçue.
## Définit une route pour GET /hello
app.get('/hello', (req, res) => {
# Envoie une réponse avec le statut 200 et le message "Hello World!"
res.status(200).send('Hello World!');
});
Middleware
Le middleware est une fonction qui est appelée pour traiter les requêtes HTTP avant qu'elles ne atteignent la route finale.
## Middleware pour afficher le temps de réponse
app.use((req, res, next) => {
const start = Date.now();
# Appelle le prochain middleware ou la route finale
next();
# Affiche le temps de réponse après l'exécution du middleware suivant
console.log(`Request took ${Date.now() - start}ms`);
});
Templates et moteur de rendu
Les templates permettent d'afficher des données dynamiques dans les réponses HTML.
## Importe le module ejs comme moteur de rendu
app.set('view engine', 'ejs');
## Route pour afficher une page avec un template
app.get('/home', (req, res) => {
# Transmet des données à la vue
res.render('home', { message: 'Bienvenue sur Express.js' });
});
Mise en pratique : projet fil rouge
Dans ce projet, nous allons créer une application simple de gestionnaire de tâches. L'utilisateur pourra ajouter, modifier et supprimer des tâches.
Étape 1 : Initialisation du projet
## Crée un nouveau dossier pour le projet
mkdir task-manager
cd task-manager
## Initialise un nouveau projet Node.js
npm init -y
## Installe Express.js
npm install express --save
Étape 2 : Structure des fichiers
task-manager/
├── app.js
├── views/
│ └── index.ejs
└── tasks.json
Étape 3 : Création de l'application
## app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.set('view engine', 'ejs');
## Middleware pour parser les données JSON et URL-encoded
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
## Définit un tableau de tâches stockées dans un fichier JSON
let tasks = require('./tasks.json');
## Route GET pour afficher la liste des tâches
app.get('/', (req, res) => {
res.render('index', { tasks });
});
## Route POST pour ajouter une nouvelle tâche
app.post('/add', (req, res) => {
const newTask = req.body.task;
if (newTask) {
tasks.push(newTask);
require('fs').writeFileSync('./tasks.json', JSON.stringify(tasks));
}
res.redirect('/');
});
## Route POST pour supprimer une tâche
app.post('/delete/:index', (req, res) => {
const index = parseInt(req.params.index);
if (!isNaN(index)) {
tasks.splice(index, 1);
require('fs').writeFileSync('./tasks.json', JSON.stringify(tasks));
}
res.redirect('/');
});
## Lance l'application sur le port 3000
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Application en cours d'exécution sur http://localhost:${PORT}`);
});
Étape 4 : Création de la vue
<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gestionnaire de Tâches</title>
</head>
<body>
<h1>Tâches</h1>
<form action="/add" method="post">
<input type="text" name="task" placeholder="Ajouter une tâche" required>
<button type="submit">Ajouter</button>
</form>
<ul>
<% tasks.forEach((task, index) => { %>
<li><%= task %> <form action="/delete/<%= index %>" method="post"><button type="submit">Supprimer</button></form></li>
<% }) %>
</ul>
</body>
</html>
Erreurs frequentes et debugging
Erreur 1 : Cannot find module 'express'
Ce message d'erreur indique que le module Express n'est pas installé.
## ❌ Mauvais
const express = require('express');
bash
## Solution
npm install express --save
Erreur 2 : SyntaxError: Unexpected token < in JSON at position 0
Ce message d'erreur indique que le fichier tasks.json est soit vide, soit contient du contenu HTML.
// tasks.json
bash
## Correction
echo '[]' > tasks.json
Erreur 3 : Cannot read property 'task' of undefined
Ce message d'erreur indique que la propriété task n'est pas définie dans le corps de la requête.
// app.js
app.post('/add', (req, res) => {
const newTask = req.body.task;
});
bash
## Correction
curl -X POST http://localhost:3000/add -d "task=Laundry" -H "Content-Type: application/x-www-form-urlencoded"
Pour aller plus loin
Piste 1 : Authentification
Intégrez une authentification basique pour protéger les routes sensibles.
Piste 2 : BDD et ORM
Utilisez une base de données relationnelle comme PostgreSQL et un ORM comme Sequelize.
Piste 3 : Tests unitaires
Ajoutez des tests unitaires pour assurer la qualité du code.
Défi pratique
Créez une application API de notes simple avec les fonctionnalités suivantes :
- Ajouter une note
- Afficher toutes les notes
- Mettre à jour une note
- Supprimer une note
Bonus : Ajoutez une authentification basique pour protéger les routes sensibles.
Ce tutoriel vous a permis de découvrir les concepts fondamentaux d'Express.js et de mettre en pratique la création d'une application web simple. Vous êtes maintenant prêt à approfondir vos compétences en utilisant Express.js pour construire des applications plus complexes.