Scaffolding avec ExpressJS - Créer une Structure d’Application Facilement

Introduction : Qu’est-ce que le Scaffolding et Pourquoi l’Utiliser ?

Le "scaffolding" (ou structure) est une technique qui génère automatiquement une structure de base pour votre projet. Imaginez que vous construisez une maison : au lieu de tout faire à la main, un outil vous donne les murs, les portes, et les fenêtres déjà placés. Avec ExpressJS, le générateur express-generator fait ça pour vous : il crée des dossiers et des fichiers pour démarrer rapidement une application web, comme des routes, des vues, et un serveur.

Étape 1 : Préparer Votre Environnement

Avant de commencer, préparons tout ce qu’il faut. Si vous avez suivi les tutoriels précédents, vous avez déjà Node.js. Voici les étapes :

• Vérifiez Node.js : Ouvrez un terminal et tapez node -v. Si une version apparaît (ex. : v16.13.0), c’est bon. Sinon, téléchargez Node.js sur nodejs.org.
• Installez express-generator : Tapez npm install -g express-generator dans le terminal. Le "-g" signifie "global", donc vous pourrez l’utiliser partout sur votre ordinateur.
• Créez un dossier projet nommé le par exemple : "mon-app-express" sur votre ordinateur. Pas besoin de l’initialiser avec npm init, le générateur s’en chargera.

Étape 2 : Générer une Application avec express-generator

Utilisons express-generator pour créer une application de base avec des fichiers prêts à l’emploi.

Commande pour Générer l’Application

Dans le terminal, allez dans votre dossier avec cd chemin/vers/mon-app-express, puis tapez :

express --view=pug

Cette commande crée une application avec le moteur de template Pug (comme dans notre tutoriel sur les templates). Voici ce qu’elle fait :

• express : L’outil express-generator que nous avons installé.
• --view=pug : Dit au générateur d’utiliser Pug pour les vues (pages HTML dynamiques).

Installer les Dépendances

Après avoir généré l’application, vous verrez des instructions dans le terminal. Suivez-les :

• Tapez npm install pour installer Express, Pug, et d’autres outils nécessaires.
• Tapez npm start pour lancer l’application.

Ouvrez http://localhost:3000 dans votre navigateur. Vous verrez une page de bienvenue générée automatiquement !

Étape 3 : Explorer la Structure Générée

Regardons ce que express-generator a créé dans votre dossier "mon-app-express". Voici les principaux fichiers et dossiers :

• app.js : Le fichier principal qui configure le serveur Express.
• package.json : La liste des dépendances et des commandes (comme "start").
• public/ : Un dossier pour les fichiers statiques (images, CSS, JS).
• routes/ : Un dossier avec des fichiers pour gérer les routes (comme "/users").
• views/ : Un dossier avec les fichiers Pug pour les pages dynamiques.
• bin/www : Un fichier qui démarre le serveur (vous n’y toucherez pas souvent).

Exemple de Code : Comprendre app.js

Ouvrez app.js. Voici une version simplifiée de ce que vous y trouverez, avec des explications :

📋 Copier le code

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// Configurer le moteur de vue Pug
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// Ajouter des outils (middleware)
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// Définir les routes
app.use('/', indexRouter);
app.use('/users', usersRouter);

module.exports = app;
    

Explication Détaillée du Code

Voici chaque partie expliquée très simplement pour les débutants :

• var express = require('express'); : On importe Express pour créer le serveur.
• var path = require('path'); : Un outil pour gérer les chemins des fichiers (ex. : trouver "public").
• var cookieParser = require('cookie-parser'); : Pour gérer les cookies (vu dans un tutoriel précédent).
• var logger = require('morgan'); : Un outil qui affiche les demandes dans le terminal (ex. : "GET / 200").
• var indexRouter = require('./routes/index'); : On importe les routes définies dans routes/index.js.
• var usersRouter = require('./routes/users'); : Idem pour routes/users.js.
• app.set('views', ...); : On dit à Express où trouver les fichiers Pug (dans le dossier "views").
• app.set('view engine', 'pug'); : On choisit Pug comme moteur de template.
• app.use(logger('dev')); : On active le journal pour voir les demandes.
• app.use(express.json()); : Pour lire les données JSON (vu dans "RESTful APIs").
• app.use(express.urlencoded(...)); : Pour lire les données des formulaires.
• app.use(express.static(...)); : Sert les fichiers du dossier "public" (images, CSS).
• app.use('/', indexRouter); : Quand quelqu’un visite "/", on utilise les routes de index.js.
• app.use('/users', usersRouter); : Idem pour "/users".
• module.exports = app; : On exporte l’application pour que bin/www puisse la lancer.

Étape 4 : Personnaliser l’Application

Ajoutons une nouvelle page pour voir comment modifier cette structure.

Modifier routes/index.js

Ouvrez routes/index.js et remplacez son contenu par ceci :

📋 Copier le code

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
    res.render('index', { titre: 'Bienvenue sur mon App Express !' });
});

router.get('/salut', function(req, res) {
    res.render('salut', { message: 'Salut, les débutants !' });
});

module.exports = router;
    

Ajouter une Nouvelle Vue

Créez un fichier salut.pug dans le dossier "views" avec ce contenu :

📋 Copier le code

html
    head
        title Salut
    body
        h1= message
        p Revenez à la page d’accueil.
    

Tester les Modifications

Relancez le serveur avec npm start. Visitez :

• http://localhost:3000 : Vous verrez "Bienvenue sur mon App Express !".
• http://localhost:3000/salut : Vous verrez "Salut, les débutants !".

Conclusion

Félicitations ! Vous savez maintenant utiliser express-generator pour créer une structure d’application avec ExpressJS. Vous avez une base solide avec des routes, des vues, et des fichiers statiques, que vous pouvez personnaliser. Pour aller plus loin, explorez notre prochain tutoriel sur Débogage avec ExpressJS ou consultez la documentation express-generator.