Le Framework Web Express JS pour Node.js

Express JS est un framework web minimaliste, flexible et puissant pour Node.js, qui permet de créer des applications web rapides et efficaces. Il est l’un des frameworks les plus populaires de Node.js et il facilite grandement le développement côté serveur. Dans cet article, nous allons explorer les bases de Express JS, son côté technique, ainsi que des exemples concrets pour mieux comprendre son utilité.

Les bases de Express JS

Qu’est-ce que Express JS ?

Express JS est un framework web léger, open-source et basé sur Node.js. Il fournit une couche d’abstraction simple pour gérer les requêtes HTTP et les routes d’une manière élégante. Grâce à son approche minimaliste, il n’impose pas de structure rigide, ce qui permet aux développeurs d’avoir une grande flexibilité dans la création d’applications web.

Pourquoi utiliser Express JS ?

Express JS présente plusieurs avantages :

  1. Facilité d’utilisation : Express offre une syntaxe simple et intuitive pour créer des routes et gérer les requêtes, ce qui rend le processus de développement plus rapide.
  2. Rapidité : Étant donné qu’Express est un framework minimaliste, il est très performant et adapté aux applications nécessitant des temps de réponse rapides.
  3. Robustesse : Même s’il est léger, Express fournit un ensemble de fonctionnalités solides qui facilitent le développement d’applications web complexes.
  4. Grande communauté : Express JS bénéficie d’une communauté active, ce qui signifie que vous trouverez un grand nombre de modules complémentaires (middleware) et de ressources pour vous aider à résoudre vos problèmes.

Le côté technique de Express JS

Installation

Pour commencer à utiliser Express JS, vous devez installer Node.js sur votre système, si ce n’est pas déjà fait. Ensuite, vous pouvez créer un nouveau projet Node.js et initialiser un package.json. Enfin, installez Express en utilisant npm (Node Package Manager) avec la commande suivante :

npm install express

Configuration de l’application Express

Avant d’utiliser Express, vous devez l’importer dans votre application. Voici comment vous pouvez le faire :

const express = require('express'); 
const app = express();

Routes

Les routes sont essentielles pour gérer les différentes requêtes HTTP. Express JS permet de définir des routes pour des méthodes spécifiques (GET, POST, etc.) et des chemins d’URL correspondants. Voici un exemple de route simple pour répondre à une requête GET :

app.get('/', (req, res) => {
   res.send('Bienvenue sur notre site web !');
});

Middleware

Le middleware est un concept fondamental d’Express JS. Il s’agit de fonctions intermédiaires qui peuvent être exécutées avant que les routes finales ne soient atteintes. Ils sont utilisés pour effectuer des opérations de prétraitement, d’authentification, de journalisation, etc. Voici un exemple de middleware :

const loggerMiddleware = (req, res, next) => {
  console.log('Requête reçue sur : ', req.url);
  next();
};

app.use(loggerMiddleware);

Mise en pratique avec Express JS et EJS

EJS – Embedded JavaScript

EJS est un moteur de modèle (template engine) qui s’intègre parfaitement avec Express JS. Il permet de générer des vues dynamiques en utilisant du code JavaScript intégré dans le HTML. Pour utiliser EJS dans votre application Express, vous devez l’installer d’abord :

npm install ejs

Ensuite, vous pouvez configurer EJS comme moteur de modèle dans votre application Express :

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

Exemple de mise en pratique

Supposons que nous voulions créer une application web simple pour afficher une liste de fruits à partir d’un tableau de données. Voici comment nous pourrions le faire en utilisant Express et EJS :

Créez un fichier index.ejs dans le dossier views de votre projet avec le code suivant :

<!DOCTYPE html> 
<html lang="fr">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Liste de Fruits</title>
    </head>
    <body> 
      <h1>Liste de Fruits</h1>
      <ul> 
        <% fruits.forEach(fruit => { %> 
          <li><%= fruit %></li>
        <% }); %>
      </ul> 
    </body>
</html>

Dans votre fichier d’application principal (par exemple, app.js), ajoutez le code suivant :

const express = require('express');
const app = express(); 

// Configuration EJS
app.set('view engine', 'ejs');

// Données de fruits (simulées) 
const fruits = ['Pomme', 'Banane', 'Orange', 'Raisin'];

// Route pour afficher la liste de fruits
app.get('/', (req, res) => {
  res.render('index', { fruits: fruits });
});

// Démarrer le serveur app.listen(3000, () => {
  console.log('Serveur Express en écoute sur le port 3000');
});

Lorsque vous exécutez l’application et accédez à http://localhost:3000, vous devriez voir la liste de fruits affichée dans votre navigateur.

Les Méthodes HTTP

Express JS prend en charge les quatre principales méthodes HTTP : POST, GET, PUT et DELETE. Chaque méthode correspond à une action différente que le serveur peut effectuer sur les ressources.

  • POST : Utilisée pour envoyer des données au serveur pour création. Par exemple, lorsqu’un formulaire est soumis, les données sont envoyées via la méthode POST.
  • GET : Utilisée pour récupérer des données du serveur. Lorsque vous entrez une URL dans votre navigateur et appuyez sur « Entrée », une requête GET est envoyée au serveur pour obtenir la page demandée.
  • PUT : Utilisée pour mettre à jour des données existantes sur le serveur. Elle envoie les nouvelles données pour remplacer les anciennes.
  • DELETE : Utilisée pour supprimer des données du serveur.

Exemple d’utilisation de méthodes HTTP avec Express JS :

app.get('/users', (req, res) => {
  // Code pour récupérer et renvoyer la liste des utilisateurs
});

app.post('/user', (req, res) => { 
  // Code pour créer un nouvel utilisateur avec les données envoyées
}); 

app.put('/user/:id', (req, res) => {
  // Code pour mettre à jour l'utilisateur avec l'ID spécifié
});

app.delete('/user/:id', (req, res) => {
  // Code pour supprimer l'utilisateur avec l'ID spécifié
});

Le Routage

Le routage dans Express JS permet de définir comment l’application répond à une requête client pour une URL spécifique. Il aide à organiser le code en catégorisant les routes en fonction des fonctionnalités et facilite la maintenance de l’application.

Exemple de routage avec Express JS :

const express = require('express');
const app = express();  

app.get('/', (req, res) => { 
  res.send('Page d\'accueil'); 
});

app.get('/about', (req, res) => {
  res.send('À propos de nous');
});

app.get('/contact', (req, res) => { 
  res.send('Contactez-nous');
});

app.listen(3000, () => {
  console.log('Serveur en cours d\'écoute sur le port 3000');
});

Les Méthodes de Réponse

Les méthodes de réponse d’Express JS permettent de renvoyer des données aux clients sous différentes formes, telles que HTML, JSON, fichiers statiques, etc.

Exemple d’utilisation de méthodes de réponse avec Express JS :

app.get('/user/:id', (req, res) => { 
  const userId = req.params.id;

  // Code pour récupérer les informations de l'utilisateur avec l'ID spécifié 
  // Supposons que les informations sont stockées dans une variable "userData"

  res.json(userData);
  // Renvoie les informations de l'utilisateur au format JSON
});

Conclusion

Express JS est un framework Web puissant et flexible qui simplifie le processus de développement d’applications web réactives. Grâce à son langage de modèle EJS, ses méthodes HTTP et ses fonctionnalités de routage, Express JS offre une approche simple et compréhensible pour créer des applications web performantes. En utilisant les exemples fournis dans cet article, les développeurs peuvent commencer à explorer les capacités d’Express JS et réaliser des applications web remarquables.

Lien officiel : Express JS

Retour blog

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Autres articles