Introduction à Express

Introduction à Express et à son architecture

Express est un framework [Link] pour créer des applications web. Il fournit
une structure de base pour l'application web en utilisant des middlewares pour
gérer les requêtes et les réponses HTTP. Express est basé sur le modèle
MVC.
Dans Express, le contrôleur est appelé "router" et il gère les requêtes HTTP
entrantes et sortantes. Le routeur peut être considéré comme le point central
de l'application car il dirige le flux de données entre le client et le serveur.
Les middlewares sont des fonctions qui sont appelées à chaque requête
HTTP. Ils peuvent être utilisés pour effectuer des opérations telles que
l'authentification, la validation des données ou la gestion des erreurs. Les
middlewares sont appelés dans l'ordre dans lequel ils sont définis, ce qui
permet de les chaîner ensemble pour créer des traitements complexes.
Express fournit également des fonctions de gestion des vues pour la création
de pages web dynamiques. Les vues sont des fichiers HTML qui sont renvoyés
au client avec les données du modèle. Les moteurs de vues populaires tels que
Pug, EJS et Handlebars sont supportés par Express.
Express est le framework le plus utilisé pour créer, c’est un pléoasme,
rapidement une application web MVC ou une API en renvoyant une réponse
HTTP et un contenu structuré plutôt que des données encapsulées dans une
vue.

Configuration d'Express pour un projet [Link]

Il existe au moins deux façons d’utiliser Express dans une application [Link].

La méthode classique

Introduction à Express 1
 Cette méthode consiste à installer le framework Express en tant que module de
l’application [Link].
En repartant sur un nouveau projet, exécuter les étapes suivantes :

1. Créer un dossier pour le projet et initialiser un projet [Link] en utilisant la

commande npm init .

2. Installer Express en utilisant la commande npm install express .

3. Dans votre fichier JavaScript principal (généralement [Link] ou [Link] ),

importer Express en utilisant require :

const express = require('express');

4. Il nous faut une instance d’Express.

const app = express();

5. Nous allons définir une première route à partir de notre nouvelle instance.

[Link]('/', (req, res) => {

[Link]('Essai Epxress');
});

6. Démarrer le serveur en écoutant sur le port de votre choix :

const port = 3000;

[Link](port, () => {
[Link](`Server is listening on port ${port}`);
});

7. Exécuter et tester l’application avec curl par exemple.

$ node [Link]
$ curl localhost:3000

La méthode Terminator Generator

Si vous créez régulièrement des applications web [Link], je vous
recommande Express Generator . C’est un outil de ligne de commande qui permet

Introduction à Express 2
 de générer une structure de projet Express. Il peut être utilisé pour générer des
squelettes d'application Express pour les projets [Link]. Il s'agit d'un outil très
pratique qui permet de gagner du temps en générant automatiquement une
structure de base pour une application Express.
Il faut l’installer avec l’option global :

$ npm install express-generator -g

Une fois l’application installée, elle est désormais disponible en ligne de

commande pour tous vos nouveaux projets. Dans la commande qui suit, nous
allons créer un nouveau projet monapi sans spécifier d’options particulières :

$ express monapi

warning: the default view engine will not be jade in future

warning: use `--view=jade' or `--help' for additional optio

create : monapi\
create : monapi\public\
create : monapi\public\javascripts\
create : monapi\public\images\
create : monapi\public\stylesheets\
create : monapi\public\stylesheets\[Link]
create : monapi\routes\
create : monapi\routes\[Link]
create : monapi\routes\[Link]
create : monapi\views\
create : monapi\views\[Link]
create : monapi\views\[Link]
create : monapi\views\[Link]
create : monapi\[Link]
create : monapi\[Link]
create : monapi\bin\
create : monapi\bin\www

change directory:
> cd monapi

Introduction à Express 3
 install dependencies:
> npm install

run the app:

> SET DEBUG=monapi:* & npm start

(Il aurait été plus judicieux typiquement d’utiliser l’option --no-view dans le cas
d’une API.)

Pour voir ces différentes options :

$ express --help

Usage: express [options] [dir]

Options:

--version output the version number

-e, --ejs add ejs engine support
--pug add pug engine support
--hbs add handlebars engine support
-H, --hogan add [Link] engine support
-v, --view <engine> add view <engine> support (dust|ejs|
--no-view use static html instead of view engi
-c, --css <engine> add stylesheet <engine> support (les
--git add .gitignore
-f, --force force on non-empty directory
-h, --help output usage information

Routage de requêtes HTTP avec Express

Vous pouvez facilement gérer les requêtes HTTP entrantes et sortantes.
Express utilise des
middlewares pour gérer les requêtes HTTP, qui sont
des fonctions qui prennent en charge la requête, la réponse et une
fonction
next() qui appelle le middleware suivant dans la pile.

Introduction à Express 4
 Pour gérer une requête HTTP entrante, vous pouvez utiliser les méthodes HTTP
suivantes :

[Link](path, callback) : gère une requête GET pour le chemin spécifié.

[Link](path, callback) : gère une requête POST pour le chemin spécifié.

[Link](path, callback) : gère une requête PUT pour le chemin spécifié.

[Link](path, callback) : gère une requête DELETE pour le chemin

spécifié.

Le premier argument est le chemin pour lequel la requête est destinée et le

deuxième argument est la fonction de rappel à appeler lorsque la requête est
reçue. La fonction de rappel prend deux arguments : la requête et la réponse.

À noter que la fonction contient précisément deux arguments qui sont nommés
ici req et res . Il s’agit de nommage complètement arbitraire, mais qui
correspondent bien au contenu de la requête http pour req et au contenu de
la réponse http pour res .

Par exemple pour gérer une requête sur le chemin /syllabus :

[Link]('/syllabus', function(req, res) {

[Link]('Le syllabus du cours. ');
});

Express permet ainsi d’identifier directement le type de requête HTTP.

En général, notre application a vocation à gérer plusieurs routes. Il est alors
recommandé d’utiliser directement Router qui permettra de gérer plus
facilement et surtout de regrouper des routes.

const router = [Link]();

[Link]('/syllabus', function(req, res) {

[Link]('Les syllabus');
});

// Ajouter le routeur à l'application principale

[Link]('/', router);

Introduction à Express 5
 📢 Analysez votre projet généré par Generator qui fournit une base de
code permettant de comprendre cette logique et notamment le
regroupement des routes dans des fichiers dédiés.

Ce qu’il y a de pratique à utiliser [Link] pour une API, par exemple, c’est
l’aspect natif dans la gestion du JSON . Mais d’une manière générale, Express
offre également une variété de fonctions de réponse pour renvoyer des
données aux clients, telles que [Link]() , [Link]() , [Link]() , etc. Vous
pouvez utiliser ces fonctions pour renvoyer des données au
format approprié en fonction des besoins de votre application.
Vous l’aurez peut-être aussi remarqué, dans nos premiers exemples
d’application [Link] pour le web, nous avions bâti une réponse HTTP, en
précisant même le HTTP status. Express fournit ce travail directement pour
nous. Cependant, grâce aux méthodes [Link]() et [Link]() .

try {
var data = {foo: "bar"};
[Link]([Link](data));
}
catch (e) {
[Link](500).json([Link](e));
}

[Link]({
'Content-Type': 'application/json'
});

Gestion des erreurs et des exceptions avec Express

Express fournit plusieurs moyens pour gérer les erreurs et les exceptions.
L'une des méthodes les plus courantes est l'utilisation de middleware d'erreur.
Cela peut être fait en utilisant la méthode [Link]() avec une fonction
middleware qui prend quatre arguments (err, req, res, next) . Cette fonction est
appelée chaque fois qu'une erreur se produit dans l'application. Elle peut
ensuite être utilisée pour afficher un message d'erreur ou effectuer toute autre
action souhaitée.

Introduction à Express 6
 Voici un exemple de middleware d'erreur simple qui affiche un message
d'erreur à l'utilisateur :

[Link](function(err, req, res, next) {

[Link]([Link]);
[Link](500).send('Something broke!');
});

Sans doute aurez-vous noté qu’on n’utilise pas next() directement, dans ce cas
précis. Mais il est appelé implicitement.

Mais si nous créons une erreur spécifique, alors l’utilisation de next()

explicitement, sera nécessaire.

[Link]('/', function(req, res, next) {

var err = new Error('Something went wrong');
[Link] = 500;
next(err);
});

[Link](function(err, req, res, next) {

[Link]([Link] || 500);
[Link]('error', {
message: [Link],
error: err
});
});

Les erreurs peuvent être capturées par le try/catch traditionnel.

[Link]('/', function(req, res, next) {

try {
var data = {foo: "bar"};
[Link]([Link](data));
} catch (err) {
next(err);
}
});

Introduction à Express 7
 Utilisation de middleware pour gérer les requêtes
Si vous doutiez de vos connaissances en anglais, middle signifie bien milieu. Et,
dans ce contexte, les middlewares signifient que nous allons disposer d’un
mécanisme se plaçant au milieu d’une requête que va traiter notre application.
Et qu’en plus, nous allons pouvoir les enchainer. Ils sont utilisés pour gérer les
requêtes, effectuer des validations, exécuter des fonctions avant ou après la
requête, ajouter des données à la requête, modifier la réponse, et plus encore.
Dans Express, un middleware est une fonction qui prend trois arguments :
l'objet de requête (req), l'objet de réponse (res) et une fonction next. Lorsqu'un
middleware est exécuté, il peut modifier l'objet de requête ou l'objet de
réponse, puis appeler la fonction next pour passer la main au middleware
suivant.
Voici un exemple de middleware qui ajoute une propriété "user" à l'objet de
requête :

function getUser(req, res, next) {

[Link] = { name: 'John', age: 30 };
next();
}

Ce middleware peut ensuite être utilisé dans une route comme ceci :

[Link]('/users', getUser, function(req, res) {

[Link]('Hello ' + [Link]);
});

Lorsqu'un utilisateur accède à la route "/users", le middleware getUser est

exécuté en premier, puis la fonction de rappel est appelée avec l'objet de
requête modifié.

Middleware d’authentification

Introduction à Express 8
 📢 Challenge n° 1 : Réaliser une application [Link] / Express intégrant
un middleware d’authentification et de log, permettant d’enregistrer
chaque connexion. La page par défaut est la page de login. Un
exemple de page accessible uniquement par des utilisateurs
authentifiés renvoie une erreur 401, si ce n’est pas le cas.

Introduction aux vues et aux modèles dans Express

Je sais que pour une bonne partie d’entre vous (IW), êtes de fin connaisseur de
Synfony par exemple. La logique ici est identique. Avoir des vues, donc la
partie V du MVC permettant d’encapsuler de la logique.

Les vues (ou templates) sont des fichiers qui définissent la présentation d'une
page web. Elles permettent de séparer la logique de présentation de la logique
métier de l'application.

Dans le contexte d'Express, les vues sont générées dynamiquement à partir de

données fournies par l'application. Les vues peuvent inclure des balises HTML,
du code JavaScript, des boucles et des conditions pour générer du contenu
dynamique.
Il existe plusieurs moteurs de vues disponibles pour Express, tels que EJS, Pug
(anciennement Jade), Handlebars, etc. Chacun de ces moteurs de vues a sa
propre syntaxe et ses propres fonctionnalités, mais ils ont tous en commun de
fournir une façon de générer des pages HTML à partir de données
dynamiques.

Définir le moteur de template de l’application

Il s’agit d’un paramètre à “setter” dans notre instanciation d’Express, comme le
code suivant :

const express = require('express');

const app = express();

[Link]('views', [Link](__dirname, 'views'));

[Link]('view engine', 'pug');

Lui indiquer un dossier views par exemple, peut être pratique pour regrouper
l’ensemble de nos templates.

Introduction à Express 9
 Injecter les variables depuis la partie logique
À partir de la déclaration précédente, vous pouvez transmettre des variables
comme title et items , par exemple, comme suit, grâce à la méthode
[Link]() :

[Link]('/', function(req, res) {

[Link]('index', {
title: 'Ma page',
items: ['Premier élément', 'Deuxième élément', 'Troisième
});
});

Ici, notre méthode [Link]() prend, en premier argument, le nom du

template, avec l’extension du moteur choisit. Par exemple views/[Link] .

Le moteur Pug (jade)

Actuellement, le moteur par défaut est Pug, anciennement Jade. Le
changement de nom est lié à l’utilisation du même nom par un logiciel de
musique, qui a poussé le créateur du premier à changer de nom pour éviter le
conflit. Ça, c'est pour la petite histoire, mais il est important de savoir que Pug
et Jade, de fait, sont identiques et que toutes les versions majeures sont
désormais portées dans Pug.

Voyons à quoi ressemble Pug dans un exemple :

html
head
title= title
body
h1= title
ul
each item in items
li= item

C’est simple, efficace, cela nous raccourcit énormément le temps d’écriture des
blocs HTML. Ça ressemble à du Python, donc le moindre problème
d’indentation peut vous causer quelques soucis.

Le moteur EJS

Introduction à Express 10
 Anciennement le moteur de template par défaut, EJS (Embedded JavaScript
Templating) utilise la syntaxe JavaScript pour incorporer des éléments
dynamiques dans les pages web, tels que des boucles, des conditions, des
fonctions, etc.
Par exemple, pour insérer une variable name dans une page, on peut utiliser la
balise <%= name %> . EJS permet également de créer des structures de contrôle,
comme des boucles ou des conditions, avec des balises spécifiques.
Voici la reprise de notre premier exemple en EJS :

<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<ul>
<% [Link](function(item) { %>
<li><%= item %></li>
<% }); %>
</ul>
</body>
</html>

Quelques balises typiques

Je vais arbitrairement porter mon choix sur Pug.

Voici comment écrire un formulaire en Pug, par exemple.

form(method="POST" action="/submit")
label(for="username") Username:
input(type="text" id="username" name="username")
br
label(for="password") Password:
input(type="password" id="password" name="password")
br
input(type="submit" value="Submit")

Pour utiliser la balise image :

Introduction à Express 11
 img(src='/chemin/vers/[Link]', alt='description de l image

Pour utiliser la balise lien :

a(href='/') Accueil
a(href='[Link] title='Lien vers [Link]

Pour utiliser les balises div avec une ou plusieurs classes :

div.class1.class2

Utiliser un framework UI avec un moteur de template

Vous souhaitez utiliser votre framework UI préféré ? Par exemple, Bootstrap (on
ne va pas refaire le débat, c’est juste pour l’illustration), nous pourrions le
réaliser de la manière suivante :

html
head
title Bootstrap Example
link(rel='stylesheet', href='[Link]
script(src='[Link]
body
.container
h1 Bootstrap Example
p This is an example of using Bootstrap with Pug.
[Link]-primary(type='button') Click Me!

📢 Challenge n° 2 : réaliser la partie vue de votre précédent challenge

grâce à la richesse des moteurs de templates.

Introduction à la notion d’API avec Express

Je n'ai plus besoin de vanter les mérites des API et des avantages qu'elles
apportent à nos projets, quelles que soient leur taille et leur nature.

Introduction à Express 12
 Grâce à Express, il sera possible de créer en quelques lignes une API et voir
même d’avoir des ambitions beaucoup plus grandes pour des projets bien plus
complexes, ou bien gérer des microservices.
Voici un premier exemple très rapide avec juste quelques lignes dans un fichier
[Link] :

const express = require('express');

const app = express();
[Link]('/api/users', (req, res) => {
// code pour récupérer tous les utilisateurs de votre applic
[Link](users);
});

[Link]('/api/users', (req, res) => {

// code pour créer un nouvel utilisateur dans votre applica
[Link]('Utilisateur créé avec succès !');
});
[Link](3000, () => {
[Link]('Serveur en écoute sur le port 3000');
});

Nous allons maintenant voir les points essentiels pour élaborer une API plus
complexes.

Une API à partir d’Express Generator

Pour créer une API grâce à Express Generator, il suffit d'utiliser l'option --no-
view

lors de la création du projet. Cela permet de générer un squelette de projet

sans les fichiers de vues associés.

$ express --no-view my-api

Avoir une base d’URL permanente

Pour déclarer une base d'URL permanente comme "/api/v1/", vous pouvez
ajouter cette chaîne de caractères comme préfixe pour toutes les routes de
votre API dans votre fichier d'application principale ([Link] ou [Link]).

Introduction à Express 13
 Voici un exemple de code :

const express = require('express');

const app = express();

// Définir un Routeur
const apiRouter = [Link]();

// Ajouter toutes les routes à Routeur

[Link]('/users', function(req, res) {
[Link]('The users');
});

// Ajouter le routeur à l'application principale

[Link]('/api/v1', apiRouter);

[Link](3000, () => [Link]('Serveur prêt sur le port 3

Les GET
Nous allons explorer les différents cas d’usage du GET, car cette requête peut
prendre plusieurs formes.
Le cas générique qui permet de récupérer un ensemble. Par exemple, dans
notre requête, nous allons récupérer tous les users.

const express = require('express');

const router = [Link]();

// Récupération de tous les utilisateurs

[Link]('/users', (req, res) => {
// Code pour récupérer tous les utilisateurs
[Link]('Liste de tous les utilisateurs');
});

Le passage de paramètre dynamique qui nous permettrait ici, de récupérer

l’identifiant passé en URL, grâce à [Link] .

Introduction à Express 14
 [Link]('/users/:id', (req, res) => {
const userId = [Link];
// Code pour récupérer l'utilisateur avec l'ID spécifié
[Link](`Utilisateur avec l'ID ${userId}`);
});

POST
Si on souhaite créer une nouvelle ressource utilisateur à partir des données
envoyées par le client, on peut définir la route POST /users de la manière
suivante, grâce à [Link] :

const express = require('express');

const router = [Link]();

[Link]('/users', (req, res) => {

// Ici on peut traiter les données envoyées par le client
const user = [Link];
// Ici on peut créer la ressource utilisateur et la sauvega
// On peut envoyer une réponse au client pour indiquer que l
[Link](201).json({ message: 'User created' });
});

Précision, le status 201 est renvoyé lorsqu’il s’agit d’une création, et non un
status 200 .
Pour rappel, et c’est le gros avantage de la méhode POST, les données sont
stockées dans le body de la requête HTTP. Par exemple, pour une page de
login, vous n’utiliserez JAMAIS GET qui enverra les données.
Pour tester ce bout de code :

$ curl --location --request POST '[Link]

--header 'Content-Type: application/json' \
--data-raw '{
"firstName": "John",
"lastName": "Doe",

Introduction à Express 15
 "email": "johndoe@[Link]"
}'

{"message":"User created"}

PUT
Très proche de la requête HTTP POST, l’idée ici est la mise à jour de contenu.
Cette requête reprend donc les caractéristiques d’une requête GET avec
passage de paramètre dynamique ( [Link] ) avec l’ajout de contenu dans
la partie body de la requête HTTP ( [Link] ).
Nous allons mettre à jour le contenu d’un utilisateur déjà existant.

[Link]('/users/:id', (req, res) => {

const userId = [Link];
const updatedUser = [Link];
// Recherche de l'utilisateur à mettre à jour
const userIndex = [Link]((user) => [Link] === use

// Si l'utilisateur est trouvé, on met à jour ses informatio

if (userIndex !== -1) {
users[userIndex] = updatedUser;
[Link](200).send(`User with id ${userId} has been upda
} else {
// Si l'utilisateur n'est pas trouvé, on envoie une répon
[Link](404).send(`User with id ${userId} was not found
}
});

DELETE
La méthode HTTP DELETE nécessite d’identifier la ressource à supprimer avec
[Link] .

[Link]('/users/:id', function(req, res, next) {

// Code à adapter suivant la persistance de l'utilisateur.
// Pour illustrer ici, nous allons utiliser les méthodes prop
[Link]([Link]

Introduction à Express 16
 , function(err, user) {
if (err) return next(err);
if (!user) {
return [Link](404).send('User not found');
}
return [Link]('User deleted successfully');
});
});

Stratégie d’authentification sur API

Pour s'authentifier à chaque requête sur notre API, nous pouvons utiliser des
tokens d'authentification. Le processus d'authentification consiste à générer
un token d'authentification après que l'utilisateur a fourni ses informations
d'identification valides. Ce token sera ensuite inclus dans chaque requête
envoyée par l'utilisateur pour s'authentifier et accéder aux ressources
protégées. Souvenez-vous que pour bon nombre d’API, vous avez validé une
inscription et obtenu une API key à fournir à chaque requête, par exemple,
depuis le frontend.
Voici quelques étapes pour mettre en place une API Token pour son API.
Nous allons avoir besoin de deux modules npm pour gérer nos tokens :

$ npm install jsonwebtoken

$ npm install dotenv

va gérer le token alors que

jsonwebtoken dotenv va permettre de monter le token
dans notre fichier js.
Nous allons voir les étapes suivantes dans le détail :

1. Nous allons créer un fichier .env qui va contenir notre token de référence,
qui servira à générer les futurs tokens.

TOKEN_SECRET=your_token_secret

2. À l’ajout d’un utilisateur sur notre API, nous allons générer un nouveau
token que nous allons renvoyer, en retour de requête.

Introduction à Express 17
 var express = require('express');
var router = [Link]();
const jwt = require('jsonwebtoken');
const dotenv = require('dotenv');
[Link]();

[Link]('/', (req, res) => {

const token = generateAccessToken({ username: [Link].u
[Link](token);
});

3. Nous avons une méthode generateAccessToken qui va nous permettre de

générer le token. Attention à son intervalle d’expiration.

function generateAccessToken(username) {
// expires after half and hour (1800 seconds = 30 minutes
return [Link](username, [Link].TOKEN_SECRET, { ex
}

4. À ce stade, voici le comportement de notre API lors d’une requête d’ajout

d’utilisateur :

$ curl --location --request POST '[Link]

"firstName": "John",
"lastName": "Doe",
"email": "johndoe@[Link]"
}'

"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2Nzk4NDc0M

5. Ensuite, nous allons rajouter une route protégée afin de tester l’accès par
token.

[Link]('/protected', authenticateToken, (req, res) =>

[Link]({ message: 'Protected route', user: [Link] })
});

Introduction à Express 18
 6. Nous avons défini un middleware authenticateToken .

function authenticateToken(req, res, next) {

const authHeader = [Link]['authorization']
const token = authHeader && [Link](' ')[1]

if (token == null) return [Link](401)

[Link](token, [Link].TOKEN_SECRET, (err, user) =

[Link](err)

if (err) return [Link](403)

[Link] = user

next()
})
}

7. Notre requête curl va permettre de tester la route avec le token.

$ curl -X GET localhost:3000/users/protected -H "Authoriza

{"message":"Protected route","user":{"iat":1679847410,"exp

Introduction à Express 19