In this French tutorial, the presenter walks through organizing an Express.js application by extracting route definitions from a monolithic app.js into separate router modules using express.Router. He first reviews basic CRUD routes (GET, POST, PUT, DELETE) defined in a single file, then highlights the scalability problem of keeping all routes together as the app grows. He creates a 'routes' directory with two modules, home.js and client.js, each exporting a Router instance. The tutorial shows how to replace the app instance with a Router in these files, export the router, and import it in app.js. Using app.use, the routers are mounted—home routes at the root and client routes under the '/client' prefix—demonstrating how to remove duplicated prefixes from the client router. The video demonstrates testing each route to confirm functionality and emphasizes that this modular approach makes the main app.js cleaner, easier to maintain, and ready for future expansion (e.g., orders, invoices).
Chapters
Bonjour à tous et bienvenue dans cette nouvelle vidéo sur le framework Express. La dernière fois, nous avons vu la notion de route et de middleware, et nous avons vu qu'il est possible de créer plusieurs routes dans un fichier, et une route n'est en fait qu'une combinaison de la méthode et du chemin. Maintenant, imaginez avec moi que nous avons cette application. Tout d'abord, nous avons inclus le module Express. Ensuite, nous avons créé une application app, c'est l'instance de la classe Express. Puis nous avons la première route qui redirige le visiteur vers la page d'accueil de l'application. C'est une route qui utilise la méthode GET et la racine du serveur. Ensuite, nous avons 4 autres routes qui permettent de gérer la partie client en utilisant le CRUD. Je rappelle que CRUD signifie Create, Read, Update et Delete. Ce sont les 4 opérations les plus utilisées dans les applications. Create signifie créer ou bien ajouter. Généralement, on lui associe la méthode POST. Read veut dire voir ou bien consulter et on lui associe la méthode GET. Update signifie modifier ou bien mettre à jour et généralement on lui associe la méthode PUT. Et finalement, delete signifie supprimer et généralement on lui associe la méthode DELETE. Bien sûr, vous n'êtes pas obligé de respecter les méthodes de cette façon, c'est-à-dire on peut tout faire avec POST si vous voulez, mais il est connu dans le métier que ce sont ces méthodes qui implémentent les CRUD. On va d'abord démarrer notre mode. Maintenant, testons les différentes routes. On commence par la première route qui utilise la méthode GET sur la racine. Le port d'écoute c'est 3000. On va voir le rendu HTML. Ça donne page d'accueil de l'application. Ça correspond à ce message que j'ai mis dans la balise H1. Notez que send envoie le message sur le client, c'est-à-dire sur le navigateur qui a envoyé la requête. Là, on peut formater notre message comme on souhaite. Cette fois, je l'ai formaté en HTML. Testons les autres routes. La première route sur le client, c'est la méthode GET avec le chemin /client/voir. Ça donne voir les informations du client. La deuxième route, ça utilise POST sur le chemin /ajouter. Ça donne ajouter un nouveau client. La troisième route, c'est PUT avec modifier. Cela donne modifier un client. Et finalement, la dernière route, c'est DELETE avec supprimer. Alors ça donne supprimer un client, donc tout marche très bien. Le problème, c'est que nous avons plusieurs routes sur un seul et unique fichier qui est app.js, c'est-à-dire le fichier principal de l'application. Et là, nous n'avons traité que la partie client, c'est-à-dire imaginez qu'on a aussi d'autres parties à gérer comme la partie commande ou bien la partie facture. On imagine qu'on aura une grosse pagaille dans ce fichier, d'autant plus que le code que l'on va incorporer dans les middleware ne contiendra pas qu'une seule instruction comme c'est le cas ici, mais plusieurs instructions qui interrogent la base de données, qui font le filtrage, la sécurité et plein d'autres choses. Donc je vous laisse imaginer la forme qu'aura le fichier app.js. La solution consiste à répartir le code sur plusieurs pages, c'est-à-dire nous avons dans ce cas la première partie qui concerne la page d'accueil, on va par exemple mettre ce code dans une page qui s'appelle home.js, et la partie CRUD qui s'intéresse aux clients, on va la mettre dans un fichier qui s'appelle client.js. Alors nous allons créer un nouveau dossier qu'on appellera routes parce que justement l'objet de la vidéo c'est les routeurs, mais vous êtes libre de renommer votre dossier comme vous le souhaitez. Maintenant dans le dossier routes on va créer 2 fichiers, le premier c'est home.js et le deuxième c'est client.js. On imagine que Cette partie du code sera placée dans le fichier home.js, mais là on aura besoin d'invoquer la classe Router. Voilà comment on va faire. On va d'abord invoquer le module Express. Ensuite, nous allons créer un routeur que j'appellerai routeur tout simplement, à partir de la classe Router du module Express. Ensuite, nous allons juste copier ce code. On va le mettre ici, mais à la place de App, on mettra Router. Et le code reste pratiquement le même. Ce que nous allons faire après, c'est permettre à l'application d'accéder à ce code, c'est-à-dire d'accéder au module Router que nous avons créé. Alors à la fin du fichier, on mettra module.exports égal à Router. C'est-à-dire que le module Router que nous avons créé, on va maintenant l'exporter pour qu'il puisse être utilisé dans les autres pages de l'application. Enregistrons. Ce que nous allons faire maintenant, c'est invoquer ce code dans le fichier App.js. Alors maintenant, plus la peine d'utiliser ça, je vais supprimer cette partie du code. Mais là, de préférence au début du code, je vais inclure le fichier Home.js et je vais le mettre dans l'objet qui s'appelle Home par exemple. Et là je mettrai le chemin relatif, je mets./ pour dire le dossier courant, ensuite j'accède au dossier root et je désigne le fichier home.js. Pas la peine de mettre l'extension js parce que l'application est censée être développée en JavaScript. Désormais le code du fichier home.js peut être utilisé dans le fichier app.js, mais il reste une étape à faire. On va invoquer l'instance App et on va encore utiliser la méthode use comme on l'a vu dans la dernière vidéo et dedans on va juste mettre Home, c'est-à-dire l'objet que nous avons créé. Alors désormais on peut utiliser la route que nous avons créée dans le fichier Home.js, c'est-à-dire le GET avec le slash. Réessayons et ça donne page d'accueil de l'application donc ça marche très bien. Maintenant l'avantage c'est que nous avons distribué notre code sur 2 fichiers: le fichier home.js qui contient la partie spécifique, c'est-à-dire un code qui est propre à une partie de l'application, et le fichier principal app.js dont la forme devient de plus en plus claire. Maintenant on va refaire la même opération pour les routes du client. On va copier ce code, on va le mettre dans client, on va rien changer, on va laisser de côté tel qu'il est, juste la partie route c'est ce qu'on va changer. On va prendre le code que nous avions ici, on va le remettre dans Client. Ce qu'on va changer c'est App, on va le remplacer par Router. Sinon on fait rien d'autre. Maintenant dans App.js, On va encore inclure le fichier client de la même façon qu'on va stocker dans l'objet client et on va refaire la même opération. Et là c'est client. Alors exécutons. Maintenant on va tester la première route GET avec client voir. Alors ça marche. La deuxième route POST avec client/ajouter et ça marche très bien. Alors j'imagine que ça va marcher aussi pour les routes restantes. Une toute dernière modification à faire. Vous avez constaté que dans les routes du client nous avons toujours le préfixe /client. Alors ce qu'on va faire c'est retirer ce préfixe. Et on va plutôt l'indiquer dans la méthode use du fichier app.js. En guise de premier argument, on va mettre ici /client, c'est-à-dire que désormais les routes du module client doivent être préfixées par /client. C'est comme si elles figurent dans un dossier virtuel qui s'appelle /client. Alors exécutons. Donc ça marche et ça marche pour le GET aussi. Alors j'espère que vous avez maintenant compris comment répartir votre code sur plusieurs fichiers et le résultat est clair. Vous avez le fichier principal app.js qui contient beaucoup moins d'instructions, donc beaucoup plus clair, ce qui nous permettra d'agrandir notre application tout en conservant l'ordre dans notre code. Merci pour votre attention et à la vidéo prochaine.
