Express Generator

Express Generator

  1. Objectifs

    • Être capable de créer un projet Node.JS avec express-generator
  2. Présentation

    • Express.js est un framework Web Node.js qui a acquis une immense popularité en raison de sa simplicité. Il offre un routage facile à utiliser et une prise en charge simple des moteurs de visualisation, ce qui le place loin devant le serveur HTTP de base Node.
    • Cependant, le démarrage d’une nouvelle application Express nécessite une certaine quantité de code standard: démarrage d’une nouvelle instance de serveur, configuration d’un moteur de visualisation et configuration de la gestion des erreurs.
    • Express.js dispose de son propre outil de ligne de commande qui facilite le démarrage de nouvelles applications, appelé le générateur express .
    • Express-generator est un outil tout en un qui permet de créer rapidement une application node-js en utilisant la librairie express. Il sera possible grâce à ce générateur de spécifier le template (view), le preprocesseur CSS…
  3. Qu’est-ce qu’Express?

    • Express a beaucoup de fonctionnalités intégrées, et beaucoup plus de fonctionnalités que vous pouvez obtenir à partir d’autres packages qui s’intègrent de manière transparente, mais il y a trois choses principales qu’il fait pour vous dès le départ:
      • Routage. C’est ainsi que /home/blog et /about vous donnent tous des pages différentes. Express facilite la modularisation de ce code en vous permettant de placer différentes routes dans différents fichiers.
      • Middleware. Si vous êtes nouveau dans le terme, le middleware est essentiellement une «colle logicielle». Il accède aux demandes avant que vos routes ne les obtiennent, ce qui leur permet de gérer des tâches difficiles telles que l’analyse des cookies, les téléchargements de fichiers, les erreurs, etc.
      • Views.. Les vues sont la façon dont les pages HTML sont rendues avec un contenu personnalisé. Vous transmettez les données que vous souhaitez rendre et Express les rendra avec votre moteur de visualisation donné.



  4. Démarrer un nouveau projet avec le générateur Express

    1. Installer express-generator
      • Vous pouvez exécuter le générateur d’application avec la npxcommande (disponible dans Node.js 8.2.0): npx express-generator
      • On ouvre une console et on tape la commande : npm install express-generator -g
      • Le générateur a un certain nombre d’options, que vous pouvez afficher sur la ligne de commande à l’aide de la commande express --help:
        • express --help
          
            Usage: express [options] [dir]
          
            Options:
          
                  --version        Afficher le numéro de version
              -e, --ejs            Ajouter la prise en charge du moteur ejs
                  --pug            Ajouter la prise en charge du moteur pug
                  --hbs            Ajouter le support du moteur de handlebars
              -H, --hogan          Ajouter la prise en charge du moteur hogan.js
              -v, --view <engine>  Ajouter des  view <engine> support (dust | ejs | hbs | hjs | jade | pug | twig | vash) (par défaut jade)
                  --no-view        Utiliser du HTML statique au lieu du moteur de vue
              -c, --css <engine>   Ajouter le stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
                  --git             Ajouter .gitignore
              -f, --force          force sur un répertoire non vide
              -h, --help           sortie des informations d'utilisation
      • Si vous travaillez sur win 10 probablement vous obtiendrez une errer liée de restriction pour lever la restriction des scripts sous win 10 tapez la commande suivante dans le PowerShell: Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
    2. Structure de l’application
      • Express-generator

      • L’application Express générée démarre avec quatre dossiers.
      • Le dossier bin
        • Ce dossier contient le dossier www.
        • www : contient la configuration de notre serveur. Ce que port nous utiliserons et des gestionnaires d’ erreurs au cas où nous ne pourrions pas démarrer le serveur.
        • Il démarre le serveur (sur le port 3000, si aucune alternative n’est fournie) et met en place une gestion des erreurs de base.
      • Le dossier public
        • Le dossier public est l’un des plus importants: tout dans ce dossier est accessible aux personnes qui se connectent à votre application.
        • Dans ce dossier, vous mettrez du JavaScript, du CSS, des images et d’autres éléments dont les utilisateurs ont besoin lorsqu’ils chargent votre site Web.
      • Le dossier routes
        • Le dossier routes est l’endroit où vous placerez les fichiers de votre routeur. Le générateur crée deux fichiers, index.jset users.js, qui servent d’exemples sur la façon de séparer la configuration d’itinéraire de votre application.
        • Habituellement, vous aurez un fichier différent ici pour chaque itinéraire principal sur votre site Web. Donc , vous pourriez avoir des fichiers appelés blog.js, home.jset / ou about.jsdans ce dossier.
      • Le dossier views
        • Le dossier views contient les fichiers utilisés par votre moteur de création de modèles. Le générateur configurera Express pour rechercher ici une vue correspondante lorsque vous appelez la méthode render.
        • En dehors de ces dossiers, il y a un fichier que vous devez bien connaître.
      • app.js
        • Le fichier app.js est un fichier spécial, car il configure l’application Express et colle toutes les différentes parties ensemble.
        • Ce fichier contient la configuration principale de l’application, comme une connexion à une base de données et tout ce dont nous avons besoin pour définir Express (fichiers statiques, routes).
        • app.js” contient les différentes logiques pour lancer notre application et qui est lancé via la commande npm start avec l’intermédiaire du fichier “bin/www” qui est le point d’entrée pour l’application,
    3. Créer une application
      • express nom_application
      • Démarrer l’application
      • Utiliser l’option de démarrage
      • npm start
      • On naviguant à l’adresse http://localhost:3000/, on aura un message d’accueil pour notre application express générée automatiquement.
      • Express Generator

      • Vous disposez maintenant d’une application Express fonctionnelle accessible via le port 3000.



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement