Comment utilise le moteur de modeles Pug dans une applications Node/Express

Qu'est-ce que pug ?

Anciennement connu sous le nom de JADE,Pug.Js ou encore Pug est une bibliothèque Javascript,servant comme moteur de temmplete pour générer du code HTLM dynamique,avec une synthaxe proche comme celui de selecteur Css mais basé sur les identations.

Comment se servir de pug ?
Avant d'aller dans cet article et pour nous permettre de tester les exemples veillons voir comment installer Pug.js dans notre environnement de travail :
-premierement creons notre dossier pugApp et ouvrons le sur le terminal nous allons taper cette ligne de commande : npm install pug ou yarn add pug

on peut installer d'une maniere globale avec la commande npm install -g pug

Synthaxe de pug
Les balises dans Pug sont représentés par des sélecteurs inspirés de la syntaxe du CSS. la syntaxe dépendante des indentations la rend plus condensée.

Exemple

essayons d'affiche une page html avec hello word

Alors commençons les choses serieuse après avoir vu comment installer pug.js et sa synthaxe dans l'étape suivante nous allons voir comment utiliser Pug.js dans une application Node/Express.js
ouvrer le terminal et taper la commande npm install express ou yarn add express

Configuration de notre server.js

dans notre dossier pugApp essayons de creer un fichier app.js c'est dans ce fichier que nous allons configure notre server

Dans notre dossier pugApp,creons un autre dossier qu'on va appele views et dans celui-ci on va cree un fichier home.pug et dans notre fichier nous allons cree un formulaire d'inscription

Si on essayer de lance notre server et ouvrir la page home.pug nous aurons une page une page vierge avec la mention Cannot GET /home

Pour remedier a cette erreur on doit reconfigurer notre fichier app.js pour permettre au server de lire les fichiers.pug mais aussi disponibiliser les ressources (les dossiers)

voici le fichier app.js après reconfiguration

et pour le resultat sa donne sa

Nous voici a la fin de notre article,nous avions parcouri quelques points importants pour travailler avec pug.js dans une application node/express.js,il sied de signaler que cet article n'est pas exhaustif. Vous pouvez consulter site officiel, si vous souhaitez en apprendre plus sur ce sujet (https://pugjs.org/api/getting-started.html)