Comment démarrer avec Node.js et Express

Introduction

Express est un framework d’application web pour Node.js qui vous permet de créer des API robustes et des serveurs web de manière beaucoup plus facile et plus propre. C’est un package léger qui ne masque pas les fonctionnalités principales de Node.js.

Dans cet article, vous installerez et utiliserez Express pour construire un serveur web.

Prérequis

Si vous souhaitez suivre cet article, vous aurez besoin de :

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Ce tutoriel a été vérifié avec Node v15.14.0, npm v7.10.0, express v4.17.1, et serve-index v1.9.1.

Étape 1 — Configuration du Projet

Tout d’abord, ouvrez votre fenêtre de terminal et créez un nouveau répertoire de projet :

mkdir express-example

Ensuite, accédez au répertoire nouvellement créé :

cd express-example

À ce stade, vous pouvez initialiser un nouveau projet npm :

npm init -y

Ensuite, vous devrez installer le package express :

npm install express@4.17.1

À ce stade, vous disposez d’un nouveau projet prêt à utiliser Express.

Étape 2 — Création d’un serveur Express

Maintenant qu’Express est installé, créez un nouveau fichier server.js et ouvrez-le avec votre éditeur de code. Ensuite, ajoutez les lignes de code suivantes :

const express = require('express');

const app = express();

La première ligne ici récupère le module principal d’Express à partir du package que vous avez installé. Ce module est une fonction, que nous exécutons ensuite à la deuxième ligne pour créer notre variable app. Vous pouvez créer plusieurs applications de cette manière, chacune avec ses propres requêtes et réponses.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

Ces lignes de code sont là où nous indiquons à notre serveur Express comment gérer une requête GET vers notre serveur. Express inclut des fonctions similaires pour POST, PUT, etc. en utilisant app.post(...), app.put(...), etc.

Ces fonctions prennent deux paramètres principaux. Le premier est l’URL sur laquelle cette fonction doit agir. Dans ce cas, nous ciblons '/', qui est la racine de notre site web : dans ce cas, localhost:3000.

Le deuxième paramètre est une fonction avec deux arguments : req et res. req représente la requête qui a été envoyée au serveur ; nous pouvons utiliser cet objet pour lire des données sur ce que le client demande de faire. res représente la réponse que nous enverrons au client.

Ici, nous appelons une fonction sur res pour renvoyer une réponse : 'Réponse réussie.'.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Enfin, une fois que nous avons configuré nos requêtes, nous devons démarrer notre serveur ! Nous passons 3000 dans la fonction listen, ce qui indique à l’application sur quel port écouter. La fonction passée en tant que deuxième paramètre est facultative et s’exécute lorsque le serveur démarre. Cela nous donne un retour dans la console pour savoir que notre application est en cours d’exécution.

Revenez à votre fenêtre de terminal et lancez votre application :

node server.js

Ensuite, visitez localhost:3000 dans votre navigateur web. Votre fenêtre de navigateur affichera : 'Successful response'. Votre fenêtre de terminal affichera : 'Example app is listening on port 3000.'.

Et voilà, un serveur web ! Cependant, nous voulons certainement envoyer plus qu’une simple ligne de texte au client. Couvrons rapidement ce qu’est un middleware et comment configurer ce serveur en tant que serveur de fichiers statiques !

Étape 3 — Utilisation des Middleware

Avec Express, nous pouvons écrire et utiliser des fonctions de middleware, qui ont accès à toutes les requêtes HTTP arrivant sur le serveur. Ces fonctions peuvent :

• Exécuter n’importe quel code.
• Faire des modifications aux objets de requête et de réponse.
• Terminer le cycle requête-réponse.
• Appeler la prochaine fonction middleware dans la pile.

Nous pouvons écrire nos propres fonctions middleware ou utiliser des middlewares tiers en les important de la même manière que nous le ferions avec n’importe quel autre package.

Commençons par écrire notre propre middleware, puis nous essaierons d’utiliser certains middlewares existants pour servir des fichiers statiques.

Pour définir une fonction middleware, nous appelons app.use() et lui passons une fonction. Voici une fonction middleware de base pour imprimer l’heure actuelle dans la console à chaque requête :

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

L’appel à next() indique au middleware de passer à la fonction middleware suivante s’il y en a une. Il est important de l’inclure à la fin de notre fonction, sinon la requête restera bloquée sur ce middleware.

Nous pouvons éventuellement passer un chemin au middleware, qui ne traitera que les requêtes vers cette route. Par exemple :

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

En passant '/request-type' comme premier argument à app.use(), cette fonction ne s’exécutera que pour les requêtes envoyées à localhost:3000/request-type.

Revisitez votre fenêtre de terminal et exécutez votre application :

node server.js

Ensuite, visitez localhost:3000/request-type dans votre navigateur Web. Votre fenêtre de terminal affichera l’horodatage de la requête et 'Type de requête: GET'.

Maintenant, essayons d’utiliser des middlewares existants pour servir des fichiers statiques. Express est livré avec une fonction middleware intégrée : express.static. Nous utiliserons également une fonction middleware tierce, serve-index, pour afficher une liste d’index de nos fichiers.

Tout d’abord, à l’intérieur du même dossier où se trouve le serveur express, créez un répertoire nommé public et placez-y quelques fichiers.

Ensuite, installez le package serve-index :

npm install serve-index@1.9.1

Tout d’abord, importez le package serve-index en haut du fichier du serveur.

Ensuite, incluez les middlewares express.static et serveIndex et indiquez-leur le chemin d’accès et le nom du répertoire :

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Maintenant, redémarrez votre serveur et accédez à localhost:3000/public. Vous verrez une liste de tous vos fichiers !

Conclusion

Dans cet article, vous avez installé et utilisé Express pour construire un serveur web. Vous avez également utilisé des fonctions middleware intégrées et tierces.

Continuez votre apprentissage avec Comment utiliser l’objet req dans Express, Comment utiliser l’objet res dans Express, et Comment définir des routes et des méthodes de requête HTTP dans Express.