Comment créer un serveur Web simple avec Node.js —

Node.js est un environnement d’exécution JavaScript multiplateforme open source permettant aux développeurs de créer des applications côté serveur en dehors d’un navigateur. Il peut être utilisé pour créer des applications de production critiques extrêmement performantes. Dans ce guide pratique, nous verrons comment créer votre serveur web avec Node.js.

Points clés à retenir

• Implémentation d’un serveur Web simple avec Node.js. Ce guide montre comment configurer et déployer un serveur Web à l’aide de Node.js. Il passe en revue chaque étape, y compris l’initialisation du projet, l’intégration d’Express.js et de nombreuses fonctionnalités essentielles, fournissant une base solide à toute personne qui découvre Node.js.
• Création d’applications Web dynamiques. Ce guide couvre un large éventail de fonctionnalités, telles que la gestion des formulaires, la réponse aux demandes des utilisateurs et la gestion dynamique des pages Web, qui sont essentielles pour rendre vos applications Web interactives et attrayantes.
• Explorer les fonctionnalités de Node.js. Découvrez plus en détail les offres de Node.js pour le développement Web, notamment comment travailler avec des fichiers statiques, gérer les erreurs et implémenter les soumissions de formulaires. Ce guide fournit une approche pratique de l’utilisation de Node.js pour créer des applications Web riches en fonctionnalités.

Partie 1 : Configuration et installation du projet

Étape 1 : Installez Node.js et npm

Pour commencer à créer notre application Web, assurez-vous d’avoir Noeud.js et npm installé sur votre système. Node.js fournit un environnement d’exécution JavaScript, tandis que npm est le gestionnaire de packages pour Node.js. Vous pouvez télécharger et installer Node.js depuis le site officiel.

Pour vous assurer que Node.js et npm sont correctement installés, ouvrez votre terminal et exécutez les commandes suivantes :

node -v
npm -v

node -v v16.20.1 C: (Utilisateurs\Chameera>npm -v 8.19.4″ loading= »lazy »/>

Étape 2 : initialiser un nouveau projet Node.js

Créez un nouveau répertoire pour votre projet et initialisez un nouveau projet Node.js en exécutant la commande suivante dans votre terminal :

mkdir book-club
cd book-club
npm init -y

Cette commande créera un package.json fichier pour votre projet. Il contiendra des métadonnées sur le projet, y compris ses dépendances :

{ 
  "name": "book-club", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { "test": 
  "echo \"Error: no test specified\" && exit 1" }, 
  "keywords": [], 
  "author": "", 
  "license": "ISC" }

Étape 3 : Installer Express.js

Express.js est un framework Web populaire pour Node.js, avec des fonctionnalités permettant de créer des applications Web et mobiles. La commande ci-dessous installe Express.js et l’ajoute en tant que dépendance dans votre package.json déposer:

npm install express

Partie 2 : Configuration du serveur Express

Étape 1 : Créez un nouveau fichier pour le serveur

Maintenant que le projet est configuré, créez un nouveau fichier nommé app.js dans le répertoire du projet. Ce fichier contiendra le code du serveur Express.

Étape 2 : Importer Express.js

Au sommet de votre app.js fichier, importez le module Express.js :

const express = require('express');

Étape 3 : Créer une application Express

Ensuite, créez une instance d’une application Express :

const app = express();

Le express() La fonction est une fonction de niveau supérieur exportée par le module Express. Il crée une application Express, que nous attribuons au app variable.

Étape 4 : Définir un itinéraire

Définir un itinéraire pour le chemin / avec un simple message lors de l’accès :

app.get("https://www.sitepoint.com/", (req, res) => {
 res.send('Hello World!');
});

Ici, app.get() est une fonction qui indique au serveur quoi faire lorsqu’une requête GET est effectuée sur un chemin particulier, dans ce cas, /. Cette fonction prend deux arguments : le chemin et une fonction de rappel qui prend une requête et une réponse.

Étape 5 : Démarrez le serveur

Enfin, démarrons le serveur sur le port 3000 :

const port = 3000;
app.listen(port, () => {
 console.log(`Server is running at http://localhost:${port}`);
});

Le app.listen() La fonction démarre le serveur et lui fait écouter les requêtes sur le port spécifié.

Partie 3 : Création de la fonctionnalité de l’application

Maintenant que le serveur Express est configuré, commençons à développer les fonctionnalités de l’application en créant quelques itinéraires différents.

Étape 1 : Créer un nouveau fichier pour les messages

Dans le répertoire de votre projet, créez un nouveau fichier nommé messages.js. Ce fichier contiendra les messages que votre serveur enverra en réponse :

module.exports = {
 home: 'Welcome to our Book Club!',
 about: 'About Us',
 notFound: '404 Not Found'
};

Étape 2 : Importez les messages dans votre fichier serveur

Au sommet de votre app.js fichier, importez les messages :

const messages = require('./messages');

Étape 3 : Utilisez des messages dans vos itinéraires

Maintenant, utilisez ces messages dans les itinéraires :

app.get("https://www.sitepoint.com/", (req, res) => {
 res.send(messages.home);
});
app.get('/about', (req, res) => {
 res.send(messages.about);
});
app.use((req, res) => {
 res.status(404).send(messages.notFound);
});

Ici, app.use() est une méthode appelée pour chaque requête adressée au serveur. Nous l’utilisons ici pour gérer toutes les routes qui ne sont pas définies et envoyer un 404 Not Found message.

Partie 4 : Ajout du service de fichiers statiques

Étape 1 : Créez un nouveau répertoire pour les fichiers statiques

Créez un nouveau répertoire nommé public. Ce répertoire contiendra tous vos fichiers statiques :

mkdir public

Étape 2 : Ajouter des fichiers statiques

Pour les besoins de ce guide, ajoutons un simple fichier HTML et un fichier CSS. Dans ton public répertoire, créez un nouveau fichier nommé index.html et ajoutez le code suivant :

<!DOCTYPE html>
<html>
<head>
  <title>Book Club</title>
  <link rel="stylesheet" type="text/css" href="/styles.css">
</head>
<body>
  <h1>Welcome to our Book Club!>/h1>
</body>
</html>

Créez également un nouveau fichier nommé styles.css dans le public répertoire et ajoutez le code suivant :

body {
  font-family: Arial, sans-serif;
}

Étape 3 : utilisez express.static pour servir des fichiers statiques

Ajoutez la ligne ci-dessous au app.js fichier, avant les définitions de route :

app.use(express.static('public'));

Le express.static La fonction est une fonction middleware intégrée dans Express.js. Il sert des fichiers statiques et prend comme argument le nom du répertoire à partir duquel vous souhaitez servir les fichiers.

Partie 5 : Gestion des requêtes POST

Étape 1 : Ajouter un formulaire à index.html

Dans ton index.html fichier, ajoutez un formulaire avec un seul champ de saisie et un bouton de soumission :

<form action="/submit" method="post">
  <input type="text" name="book" placeholder="Enter a book title">
  <button type="submit">Submit</button>
</form>

Ce formulaire enverra une requête POST au /submit chemin. Le corps de la demande inclura la valeur du champ de saisie.

Étape 2 : Installer l’analyseur de corps

Vous devez installer un middleware appelé analyseur de corps pour gérer les données envoyées dans la requête POST :

npm install body-parser

Étape 3 : Importer et utiliser l’analyseur de corps

Importez l’analyseur de corps dans le app.js déposer:

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));

Le bodyParser.urlencoded() La fonction analyse les corps de requêtes entrantes disponibles sous le req.body propriété.

Étape 4 : Gérer les requêtes POST

Maintenant, créez un nouveau point de terminaison pour gérer cette requête POST dans le app.js déposer:

app.post('/submit', (req, res) => {
  const book = req.body.book;
  console.log(`Book submitted: ${book}`);
  res.send(`Book submitted: ${book}`);
});

Partie 6 : Ajout d’un magasin de données

Dans cette partie, nous ajouterons un simple magasin de données à notre application pour stocker les livres soumis par les utilisateurs. Nous utiliserons un tableau pour stocker les données par souci de simplicité.

Étape 1 : Créer un magasin de données

Au sommet de votre app.js fichier, créez un tableau pour stocker les livres :

const books = [];

Étape 2 : Mettre à jour le gestionnaire de requêtes POST

Mettez à jour le gestionnaire des requêtes POST pour ajouter le livre soumis au books tableau:

app.post('/submit', (req, res) => {
    const book = req.body.book;
    books.push(book);
    console.log(`Book submitted: ${book}`);
    res.send(`Book submitted: ${book}`);
});

Étape 3 : Créez un itinéraire pour afficher tous les livres

Créez un nouveau gestionnaire de route qui renvoie tous les livres soumis :

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

Remarque : dans une application réelle, vous stockeriez probablement vos données dans une base de données. Ici, les données du tableau seront perdues à chaque redémarrage de votre serveur.

Partie 7 : Ajout de la gestion des erreurs

Dans cette partie, nous allons créer un gestionnaire d’erreurs. Express.js fournit un gestionnaire d’erreurs intégré. Mais vous pouvez également créer votre propre middleware de gestion des erreurs.

Étape 1 : Créer un middleware de gestion des erreurs

Dans ton app.js fichier, ajoutez le code suivant à la fin du fichier :

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something Went Wrong!');
});

Cette fonction middleware possède quatre arguments au lieu des trois habituels (req, res, next). Cette fonction est appelée chaque fois qu’il y a une erreur dans votre application.

Étape 2 : utilisez la fonction suivante pour transmettre les erreurs

Si vous transmettez un argument au next() fonction, Express.js supposera qu’il s’agit d’une erreur, ignorera toutes les fonctions middleware suivantes et passera directement à la fonction middleware de gestion des erreurs :

app.post('/submit', (req, res, next) => {
  const book = req.body.book;
  if (!book) {
    const err = new Error('Book title is required');
    return next(err);
  }
  books.push(book);
  console.log(`Book submitted: ${book}`);
  res.send(`Book submitted: ${book}`);
});

Ce gestionnaire vérifie si un titre de livre a été fourni dans la requête POST. Sinon, cela crée un nouveau Error objet et le transmet au next fonction. Cela ignorera toutes les fonctions middleware suivantes et passera directement au middleware de gestion des erreurs.

Partie 8 : Servir des pages HTML

Dans cette partie, nous modifierons notre application pour qu’elle serve des pages HTML au lieu du texte brut. Cela vous permettra de créer des interfaces utilisateur plus complexes.

Étape 1 : Installer EJS

EJS (JavaScript intégré) est un langage de création de modèles simple qui vous permet de générer du balisage HTML en utilisant du JavaScript simple :

npm install ejs

Étape 2 : Définir EJS comme moteur d’affichage

Dans ton app.js fichier, définissez EJS comme moteur d’affichage pour votre application Express :

app.set('view engine', 'ejs');

Cela indique à Express d’utiliser EJS comme moteur d’affichage lors du rendu des vues.

Étape 3 : Créer un répertoire de vues

Par défaut, Express recherchera dans un répertoire nommé views pour vos points de vue. Créez ce répertoire dans le répertoire de votre projet :

mkdir views

Étape 4 : Créer une vue EJS

Dans ton views répertoire, créez un nouveau fichier nommé index.ejs et ajoutez le code suivant :

<!DOCTYPE html>
<html>
<head>
    <title>Book Club</title>
</head>
<body>
    <h1><%= message %></h1>
    <form action="/submit" method="post">
        <input type="text" name="book" placeholder="Enter a book title">
        <button type="submit">Submit</button>
    </form>
    <h2>Submitted Books:</h2>
    <ul>
        <% books.forEach(function(book) { %>
            <li><%= book %></li>
        <% }); %>
    </ul>
</body>
</html>

Le <%= message %> L’espace réservé est utilisé pour afficher la valeur de la variable de message.

Étape 5 : Mettre à jour le gestionnaire de requêtes POST

Mettre à jour le POST /submit gestionnaire d’itinéraire pour ajouter le livre soumis au books array et redirigez l’utilisateur vers la page d’accueil :

app.post('/submit', (req, res) => {
  const book = req.body.book;
  books.push(book);
  console.log(`Book submitted: ${book}`);
  res.redirect("https://www.sitepoint.com/");
});

Remarque : C’est une bonne pratique de rediriger l’utilisateur après une requête POST. C’est ce qu’on appelle le Publier/Redirection/Obtenir un modèleet cela empêche les soumissions de formulaires en double.

Étape 6 : Mettre à jour l’itinéraire d’origine

Mettre à jour le GET / gestionnaire d’itinéraire pour passer les livres array au index.ejs:

app.get("https://www.sitepoint.com/", (req, res) => {
   res.render('index', { message: messages.home, books: books });
});

Étape 7 : Mettre à jour l’itinéraire d’origine

Il est maintenant temps d’exécuter l’application et de la voir en action.

Vous pouvez démarrer le serveur en exécutant la commande suivante dans votre terminal :

node app.js

Vous devriez voir un message disant Server is running at http://localhost:3000 dans la borne.

node app-J5 Server s’exécute sur http://localhost:3000″ loading= »lazy »/>

Vous pouvez également simplifier le processus de démarrage en ajoutant un script au fichier package.json déposer:

Now, instead of running node app.js tu peux appeler npm start:

npm start

Conclusion

Toutes nos félicitations! Vous avez créé une application Web avec Node.js et Express.js. Cette application sert des fichiers statiques, gère différents itinéraires, utilise un middleware, etc.

Si vous souhaitez essayer cela par vous-même ou explorer le code, consultez ceci Démo CodeSandbox.

Vous pouvez faire bien plus avec Node.js et Express.js. Vous pouvez ajouter plus de routes, vous connecter à différentes bases de données, créer des API, créer des applications en temps réel avec WebSockets et bien plus encore. Les possibilités sont infinies.

J'espère que ce guide a été utile. Bon codage !

Foire aux questions (FAQ)