Document Sans Titre
Document Sans Titre
Document Sans Titre
● Skip to search
● Skip to select language
OPEN MAIN MENU
1. Express Web Framework (Node.js/JavaScript)
2. Introduction à Express/Node
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez
Docs.
Filter sidebar
In this article
● Introduction à Node
● Les frameworks web
● Introduction à Express
● D'où viennent Node et Express ?
● Quelle popularité pour Node et Express ?
● Express est-il « dogmatique » ?
● À quoi ressemble du code Express ?
● Résumé
● Voir aussi
1. Vous débutez ? Commencez ici !
2. Démarrer avec le Web
1.
2.
3.
4.
5.
6.
7.
8.
9.
3.
4. HTML — Structurer le Web
5. Introduction à HTML
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
6.
7. Multimédia et contenu embarqué
1.
2.
3.
4.
5.
6.
7.
8.
9. Tableaux HTML
1.
2.
3.
4.
10.
11. CSS — Mettre en forme le Web
12. Premiers pas en CSS
1.
2.
3.
4.
5.
6.
13.
14. Blocs de construction CSS
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
15.
16. Mise en forme du texte
1.
2.
3.
4.
5.
6.
17.
18. Disposition en CSS
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
19.
20. JavaScript — Scripts et dynamisme côté client
21. Premiers pas en JavaScript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
22.
23. Blocs de construction JavaScript
1.
2.
3.
4.
5.
6.
7.
8.
24.
25. Introduction aux objets JavaScript
1.
2.
3.
4.
5.
6.
7.
8.
26.
27. JavaScript asynchrone
1.
2.
3.
4.
5.
6.
28.
29. Les API web côté client
1.
2.
3.
4.
5.
6.
7.
8.
30.
31. Formulaires web — Travailler avec les données des utilisateur·rice·s
32. Parcours sur les fondamentaux des formulaires web
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
33.
34. Fonctionnalités avancées des formulaires
1.
2.
3.
4.
35.
36. Accessibilité — Rendre le Web utilisable par toutes et tous
37. Guides sur l'accessibilité
1.
2.
3.
4.
5.
6.
7.
8.
38.
39. Performance — Making websites fast and responsive
40. Performance guides
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
41.
42. MathML — Écrire des formules mathématiques sur le Web
43. Premiers pas en MathML
1.
2.
3.
4.
5.
6.
7.
44.
45. Games — Developing games for the web
46. Guides and tutorials
1.
2.
3.
4.
47.
48. Outils et tests
49. Outils pour le développement web côté client
1.
2.
3.
4.
5.
6.
50.
51. Introduction aux frameworks côté client
1.
2.
52.
53. React
1.
2.
3.
4.
5.
6.
7.
54.
55. Ember
1.
2.
3.
4.
5.
6.
56.
57. Vue
1.
2.
3.
4.
5.
6.
7.
8.
9.
58.
59. Svelte
1.
2.
3.
4.
5.
6.
7.
8.
60.
61. Angular
1.
2.
3.
4.
5.
6.
62.
63. Git et GitHub
1.
64.
65. Tests entre les différents navigateurs
1.
2.
3.
4.
5.
6.
7.
8.
9.
66.
67. Programmation web côté serveur
68. Premiers pas
1.
2.
3.
4.
5.
69.
70. Django (Python)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
71.
72. Express (Node.js/JavaScript)
1. Express Web Framework (Node.js/JavaScript)
2. Introduction à Express/Node
3. Setting up a Node development environment(en-US)
4. Express Tutorial: The Local Library website(en-US)
5. Express Tutorial Part 2: Creating a skeleton website(en-US)
6. Express Tutorial Part 3: Using a Database (with Mongoose)(en-US)
7. Express Tutorial Part 4: Routes and controllers(en-US)
8. Express Tutorial Part 5: Displaying library data(en-US)
9. Express Tutorial Part 6: Working with forms(en-US)
10. Express Tutorial Part 7: Deploying to production(en-US)
73.
74. Ressources complémentaires
75. Questions fréquentes
1.
2.
3.
4.
5.
6.
7.
76.
Introduction à Express/Node
● Aperçu : Express Nodejs
●
● Suivant
● (en-US)
Dans ce tout premier article consacré à Express, nous répondons aux questions «
Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu
de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales
fonctionnalités et montrons quelques-uns des principaux composants d'une
application Express (bien que vous ne disposiez pas encore d'un environnement de
développement pour le tester).
Une culture de base en informatique,
une compréhension globale de la
Prérequis : programmation côté serveur et, en
particulier, les mécanismes
d'interactions client-serveur dans un site
web.
Introduction à Node
Node (ou plus formellement Node.js) est un environnement d'exécution open-source,
multi-plateforme, qui permet aux développeuses et développeurs de créer toutes
sortes d'applications et d'outils côté serveur en JavaScript. Cet environnement est
destiné à être utilisé en dehors du navigateur (il s'exécute directement sur son
ordinateur ou dans le système d'exploitation du serveur). Aussi, Node ne permet pas
d'utiliser les API JavaScript liées au navigateur mais des API plus traditionnellement
utilisées sur un serveur dont notamment celles pour HTTP ou la manipulation de
systèmes de fichier.
Dans une perspective de développement de serveur web, Node présente un certain
nombre d'avantages :
● D'excellentes performances ! Node a été créé pour optimiser le rendement et
l'évolution des applications web. Il s'agit d'une bonne solution à de nombreux
problèmes de développement web (par exemple, les applications en temps
réel).
● Le code est intégralement écrit en JavaScript ce qui signifie que l'on dépense
moins d'énergie à basculer d'un langage à l'autre quand on code côté client et
côté serveur.
● Le JavaScript est un langage de programmation plutôt récent et bénéficie
encore d'améliorations dans sa conception en comparaison à d'autres
langages web côté serveur (Python, PHP, etc.). Beaucoup d'autres langages
nouveaux et populaires compilent/convertissent en JavaScript pour pouvoir
utiliser TypeScript, CoffeeScript, ClojureScript, Scala, LiveScript, etc.
● Le gestionnaire de paquets (NPM) offre l'accès à des milliers de bibliothèques
réutilisables. Il dispose d'une excellente résolution de dépendances et peut
être utilisé pour automatiser la plupart des chaines de compilation.
● Node.js est portable. Il est disponible sous Microsoft Windows, macOS, Linux,
etc. De plus, il est bien supporté par beaucoup d'hébergeurs web qui
fournissent souvent une infrastructure spécifique et une documentation pour
héberger des sites Node.
● Node possède une communauté et un écosystème très dynamiques avec
beaucoup de gens désireux d'aider.
Vous pouvez utiliser Node.js pour créer un simple serveur web en utilisant l'API
Node HTTP.
Hello Node.js
L'exemple qui suit crée un serveur web qui écoute toutes sortes de requêtes HTTP
sur l'URL https://127.0.0.1:8000/. Quand une requête est reçue, le script
répond avec la chaine « Salut tout le monde ». Si vous avez déjà installé Node,
suivez les étapes de l'exemple suivant :
1. Ouvrez un terminal (sur Windows, ouvrez l'invite de commande (cmd)),
2. Créez le dossier où vous voulez sauvegarder le programme, appelez-le par
exemple test-node et placez-vous dedans en utilisant la commande
suivante dans votre console :
3. BASHCopy to Clipboard
cd test-node
4.
5. Dans votre éditeur de texte favori, créez un fichier nommé "hello.js" et
collez ce qui suit dedans :
6. JSCopy to Clipboard
// Charge le module HTTP
const http = require("http");
app.listen(port, () => {
console.log(`Application exemple à l'écoute sur le port ${port}!`);
});
Les deux premières lignes importent (avec require()) le module express et créent
une application express. Cet objet, qui est traditionnellement nommé app, possède
des méthodes pour acheminer les requêtes HTTP, configurer les intergiciels, rendre
les vues HTML, enregistrer un moteur de modèles et modifier les paramètres de
l'application qui contrôlent le comportement de l'application (par exemple, le mode
d'environnement, si les définitions de route sont sensibles à la casse, etc.).
La partie centrale du code (les trois lignes commençant par app.get) montre une
définition de route. La méthode app.get() spécifie une fonction de rappel qui sera
invoquée chaque fois qu'il y aura une requête HTTP GET avec un chemin ('/')
relatif à la racine du site. La fonction de rappel prend une requête et un objet
réponse comme arguments, et appelle simplement send() sur la réponse pour
renvoyer la chaîne de caractères "Hello World!".
Le dernier bloc démarre le serveur sur le port 3000 et affiche un commentaire de
journal dans la console. Avec le serveur en cours d'exécution, vous pouvez aller sur
localhost:3000 dans votre navigateur pour voir l'exemple de réponse renvoyé.
Créer et importer des modules
Un module est une bibliothèque/fichier JavaScript que vous pouvez importer dans un
autre code en utilisant la fonction require() de Node. Express lui-même est un
module, tout comme les bibliothèques de middleware et de base de données que
nous utilisons dans nos applications Express.
Le code ci-dessous montre comment nous importons un module par son nom, en
utilisant le framework Express comme exemple. Tout d'abord, nous invoquons la
fonction require(), en spécifiant le nom du module sous forme de chaîne
('express'), et en appelant l'objet retourné pour créer une applicationExpress.
Nous pouvons alors accéder aux propriétés et fonctions de l'objet application.
JSCopy to Clipboard
const express = require("express");
const app = express();
Vous pouvez également créer vos propres modules qui peuvent être importés de la
même manière.
Note : Vous voudrez créer vos propres modules, car cela vous permet d'organiser
votre code en parties maniables — une application monolithique à fichier unique est
difficile à comprendre et à maintenir. L'utilisation de modules vous aide également à
gérer votre espace de noms, car seules les variables que vous exportez
explicitement sont importées lorsque vous utilisez un module.
Pour rendre les objets disponibles en dehors d'un module, il suffit de les affecter à
l'objet exports. Par exemple, le module square.js ci-dessous est un fichier qui
exporte les méthodes area() et perimeter() :
JSCopy to Clipboard
exports.area = function (width) {
return width * width;
};
exports.perimeter = function (width) {
return 4 * width;
};
Note : Vous pouvez également spécifier un chemin absolu vers le module (ou un
nom, comme nous l'avons fait initialement).
Si vous souhaitez exporter un objet complet en une seule affectation au lieu de le
construire une propriété à la fois, affectez-le à module.exports comme indiqué
ci-dessous (vous pouvez également procéder ainsi pour faire de la racine de l'objet
exports un constructeur ou une autre fonction) :
JSCopy to Clipboard
module.exports = {
area: function (width) {
return width * width;
},
En revanche, une API asynchrone est une API qui lance une opération et revient
immédiatement (avant que l'opération ne soit terminée). Une fois l'opération
terminée, l'API utilisera un mécanisme quelconque pour effectuer des opérations
supplémentaires. Par exemple, le code ci-dessous imprimera « Second, Premier »
car même si la méthode setTimeout() est appelée en premier, et revient
immédiatement, l'opération ne se termine pas avant plusieurs secondes.
JSCopy to Clipboard
setTimeout(function () {
console.log("Premier");
}, 3000);
console.log("Second");
L'utilisation d'API asynchrones non bloquantes est encore plus importante sur Node
que dans le navigateur, car Node est un environnement d'exécution événementiel
avec un seul thread. Cela signifie que toutes les requêtes adressées au serveur sont
exécutées sur le même thread (plutôt que d'être fractionnées en threads distincts).
Ce modèle est extrêmement efficace en termes de vitesse et de ressources du
serveur, mais il signifie que si l'une de vos fonctions appelle des méthodes
synchrones qui prennent beaucoup de temps pour se terminer, elle bloquera non
seulement la demande actuelle, mais aussi toutes les autres demandes traitées par
votre application Web.
Il existe plusieurs façons pour une API asynchrone d'informer votre application de la
fin d'une opération. La méthode la plus courante consiste à enregistrer une fonction
de rappel lorsque vous invoquez l'API asynchrone, qui sera rappelée lorsque
l'opération sera terminée. C'est l'approche utilisée ci-dessus.
Note : L'utilisation des rappels (« callbacks ») peut être assez « désordonnée » si
vous avez une séquence d'opérations asynchrones dépendantes qui doivent être
exécutées dans l'ordre, car cela entraîne de multiples niveaux de rappels imbriqués.
Ce problème est communément appelé « l'enfer des callbacks ». Ce problème peut
être réduit par de bonnes pratiques de codage dont l'utilisation des promesses ou de
async/await.
Note : Une convention courante pour Node et Express est d'utiliser des callbacks de
type error-first. Dans cette convention, la première valeur de vos fonctions de rappel
est une valeur d'erreur, tandis que les arguments suivants contiennent des données
de succès. Il y a une bonne explication de l'utilité de cette approche dans ce blog :
The Node.js Way - Comprendre les callbacks de type « Error First ».
(fredkschott.com).
Créer des gestionnaires de route
Dans notre exemple Hello World d'Express (voir ci-dessus), nous avons défini une
fonction de gestion de route (un callback) pour les requêtes HTTP GET vers la racine
du site ('/').
JSCopy to Clipboard
app.get("/", (req, res) => {
res.send("Hello World!");
});
Note : L'ajout de routes à l'objet Router est identique à l'ajout de routes à l'objet
app (comme indiqué précédemment).
Pour utiliser le routeur dans notre fichier d'application principal, nous devrions alors
require() le module route (wiki.js), puis appeler use() sur l'application Express
pour ajouter le routeur au chemin de manipulation du middleware. Les deux routes
seront alors accessibles depuis /wiki/ et /wiki/about/.
JSCopy to Clipboard
const wiki = require("./wiki.js");
// ...
app.use("/wiki", wiki);
Nous vous montrerons beaucoup plus en détails comment travailler avec les routes,
et en particulier comment utiliser le Router, plus tard dans la section liée Routes et
contrôleurs (en-US).
Utilisation d'un middleware/intergiciel
L'intergiciel (aussi appelé « middleware ») est largement utilisé dans les applications
d'Express, pour des tâches allant du service de fichiers statiques à la gestion des
erreurs, en passant par la compression des réponses HTTP. Alors que les fonctions
de route terminent le cycle requête-réponse HTTP en renvoyant une réponse au
client HTTP, les fonctions d'intergiciel effectuent typiquement une opération sur la
demande ou la réponse, puis appellent la fonction suivante dans la « pile », qui peut
être un autre intergiciel ou un gestionnaire de route. L'ordre dans lequel les
intergiciels sont appelés dépend du code de l'application.
Note : L'intergiciel peut effectuer n'importe quelle opération, exécuter n'importe quel
code, apporter des modifications à l'objet requête et réponse, et il peut aussi mettre
fin au cycle requête-réponse. S'il ne met pas fin au cycle, alors il doit appeler
next() pour passer le contrôle à la fonction suivante de l'intergiciel (ou la requête
sera laissée en suspens).
La plupart des apps utiliseront des programmes intermédiaires tiers afin de simplifier
les tâches courantes de développement web comme le travail avec les cookies, les
sessions, l'authentification des utilisateurs, l'accès aux données POST et JSON des
requêtes, la journalisation, etc. Vous pouvez trouver une liste des paquets
middleware maintenus par l'équipe Express (qui inclut également d'autres paquets
populaires de tiers). D'autres paquets Express sont disponibles sur le gestionnaire
de paquets NPM.
Pour utiliser un middleware tiers, vous devez d'abord l'installer dans votre application
à l'aide de NPM. Par exemple, pour installer l'intergiciel de journalisation des
requêtes HTTP morgan, vous devez procéder comme suit :
BASHCopy to Clipboard
npm install morgan
Vous pourriez alors appeler use() sur l'objet Express application pour ajouter
l'intergiciel à la pile :
JSCopy to Clipboard
const express = require('express');
const logger = require('morgan');
const app = express();
app.use(logger('dev'));
...
Note : Les fonctions d'intergiciel et de routage sont appelées dans l'ordre où elles
sont déclarées. Pour certains intergiciels, l'ordre est important (par exemple, si
l'intergiciel de session dépend de l'intergiciel de cookie, alors le gestionnaire de
cookie doit être ajouté en premier). Il est presque toujours nécessaire d'appeler
l'intergiciel avant de définir les routes, sinon vos gestionnaires de routes n'auront pas
accès aux fonctionnalités ajoutées par votre intergiciel.
Vous pouvez écrire vos propres fonctions intergiciels, et vous serez probablement
amené à le faire (ne serait-ce que pour créer un code de gestion des erreurs). La
seule différence entre une fonction middleware et un callback de gestionnaire de
route est que les fonctions middleware ont un troisième argument next, que les
fonctions middleware sont censées appeler si elles ne sont pas celle qui termine le
cycle de requête (lorsque la fonction middleware est appelée, cela contient la
fonction next qui doit être appelée).
Vous pouvez ajouter une fonction d'intergiciel à la chaîne de traitement avec
app.use() ou app.add(), selon que vous voulez appliquer l'intergiciel à toutes
les réponses ou aux réponses avec un verbe HTTP particulier (GET, POST, etc).
Vous spécifiez les routes de la même manière dans les deux cas, bien que la route
soit facultative lors de l'appel à app.use().
L'exemple ci-dessous montre comment vous pouvez ajouter la fonction middleware
en utilisant les deux méthodes, et avec/sans route.
JSCopy to Clipboard
const express = require("express");
const app = express();
// Une fonction middleware ajoutée pour un verbe et une route HTTP spécifiques
app.get("/", a_middleware_function);
app.listen(3000);
Tous les fichiers du répertoire public sont servis en ajoutant leur nom de fichier
(relatif au répertoire "public" de base) à l'URL de base. Ainsi, par exemple :
https://localhost:3000/images/dog.jpg
https://localhost:3000/css/style.css
https://localhost:3000/js/app.js
https://localhost:3000/about.html
Vous pouvez appeler static() plusieurs fois pour servir plusieurs répertoires. Si
un fichier ne peut pas être trouvé par une fonction middleware, alors il sera
simplement transmis au middleware suivant (l'ordre dans lequel le middleware est
appelé est basé sur votre ordre de déclaration).
JSCopy to Clipboard
app.use(express.static("public"));
app.use(express.static("media"));
Vous pouvez également créer un préfixe virtuel pour vos URL statiques, plutôt que
de voir les fichiers ajoutés à l'URL de base. Par exemple, ici nous spécifions un
chemin de montage pour que les fichiers soient chargés avec le préfixe « /media » :
JSCopy to Clipboard
app.use("/media", express.static("public"));
Maintenant, vous pouvez charger les fichiers qui se trouvent dans le répertoire
public à partir du préfixe du chemin /media.
https://localhost:3000/media/images/dog.jpg
https://localhost:3000/media/video/cat.mp4
https://localhost:3000/media/cry.mp3
Ceux-ci peuvent retourner tout contenu nécessaire, mais doivent être appelés après
tous les autres app.use() et les appels de routes afin qu'ils soient le dernier
middleware dans le processus de traitement des requêtes !
Express est livré avec un gestionnaire d'erreurs intégré, qui prend en charge toutes
les erreurs restantes qui pourraient être rencontrées dans l'application. Cette
fonction middleware de gestion des erreurs par défaut est ajoutée à la fin de la pile
de fonctions middleware. Si vous passez une erreur à next() et que vous ne la
gérez pas dans un gestionnaire d'erreurs, elle sera traitée par le gestionnaire
d'erreurs intégré ; l'erreur sera écrite au client avec la trace de la pile.
Note : La trace de la pile n'est pas incluse dans l'environnement de production. Pour
exécuter une application serveur Express, la variable d'environnement NODE_ENV
doit être définie avec la valeur production.
Note : Les codes d'état HTTP 404 et autres « erreurs » ne sont pas traités comme
des erreurs. Si vous voulez les gérer, vous pouvez ajouter une fonction middleware
pour le faire. Pour plus d'informations, consultez la FAQ.
Pour plus d'informations, voir Gestion des erreurs (docs Express).
Utilisation des bases de données
Les apps Express peuvent utiliser tout mécanisme de base de données pris en
charge par Node (Express lui-même ne définit aucun comportements/exigences
supplémentaire spécifique pour la gestion des bases de données). Il existe de
nombreuses options, notamment PostgreSQL, MySQL, Redis, SQLite, MongoDB,
etc.
Pour les utiliser, vous devez d'abord installer le pilote de base de données à l'aide de
NPM. Par exemple, pour installer le pilote de la populaire base de données NoSQL
MongoDB, vous devez utiliser la commande suivante :
BASHCopy to Clipboard
npm install mongodb
db.collection("mammals")
.find()
.toArray(function (err, result) {
if (err) throw err;
console.log(result);
});
});
let db = client.db("animals");
db.collection("mammals")
.find()
.toArray(function (err, result) {
if (err) throw err;
console.log(result);
client.close();
});
},
);
Pour plus d'informations, voir Utilisation des moteurs de modèles avec Express
(docs Express).
Structure du fichier
Express ne fait aucune supposition en termes de structure ou de composants que
vous utilisez. Les routes, les vues, les fichiers statiques et toute autre logique
spécifique à l'application peuvent vivre dans un nombre quelconque de fichiers avec
n'importe quelle structure de répertoire. Bien qu'il soit parfaitement possible d'avoir
l'ensemble de l'application Express dans un seul fichier, il est généralement judicieux
de diviser votre application en fichiers basés sur la fonction (par exemple, gestion de
compte, blogs, forums de discussion) et le domaine de problème architectural (par
exemple, modèle, vue ou contrôleur si vous utilisez une architecture MVC).
Dans une prochaine rubrique, nous utiliserons le Générateur d'applications express,
qui crée un squelette d'application modulaire que nous pouvons facilement étendre
pour créer des applications web.
Résumé
Félicitations, vous avez terminé la première étape de votre voyage Express/Node !
Vous devriez maintenant comprendre les principaux avantages d'Express et de
Node, et savoir à quoi ressemblent les principales parties d'une application Express
(routes, intergiciels, gestion des erreurs et code modèle). Vous devez également
comprendre qu'Express étant un framework non autonome, la manière dont vous
assemblez ces éléments et les bibliothèques que vous utilisez dépendent largement
de vous !
Bien sûr, Express est délibérément un cadre d'application web très léger, et une
grande partie de ses avantages et de son potentiel provient de bibliothèques et de
fonctionnalités tierces. Nous les examinerons plus en détail dans les articles
suivants. Dans notre prochain article, nous nous pencherons sur la configuration
d'un environnement de développement Node, afin que vous puissiez commencer à
voir du code Express en action.
Voir aussi
● Venkat.R - Gestion de plusieurs versions de Node
● Modules (docs Node)
● Express (page d'accueil)
● Routage de base (docs Express)
● Guide de routage (docs Express)
● Utilisation de moteurs de modèles avec Express (docs Express)
● Utilisation d'intergiciel (docs Express)
● Écriture d'intergiciels à utiliser dans les applications Express (docs Express)
● Intégration des bases de données (docs Express)
● Servir les fichiers statiques dans Express (docs Express)
● Gestion des erreurs (docs Express)
● Aperçu : Express Nodejs
●
● Suivant
● (en-US)
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute.
This page was last modified on 3 août 2023 by MDN contributors.
View this page on GitHub • Report a problem with this content
Your blueprint for a better internet.
● MDN on Mastodon
● MDN on X (formerly Twitter)
● MDN on GitHub
● MDN Blog RSS Feed
MDN
● About
● Blog
● Careers
● Advertise with us
Support
● Product help
● Report an issue
Our communities
● MDN Community
● MDN Forum
● MDN Chat
Developers
● Web Technologies
● Learn Web Development
● MDN Plus
● Hacks Blog
● Website Privacy Notice
● Cookies
● Legal
● Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2024 by individual mozilla.org contributors.
Content available under a Creative Commons license.