Créer de nouvelles applications Express.js en quelques minutes avec Express Generator –

Express.js est un framework web Node.js qui a gagné en popularité grâce à sa simplicité. Il a un routage facile à utiliser et une prise en charge simple pour les moteurs de vue, ce qui le place loin devant le serveur HTTP de base.

Cependant, le démarrage d'une nouvelle application Express requiert un certain nombre de codes: démarrage d'une nouvelle instance de serveur Configurer un moteur de vue, configurer le traitement des erreurs.

Bien qu'il existe différents projets de démarrage et de nouvelles fonctionnalités, Express dispose de son propre outil de ligne de commande qui facilite le démarrage de nouvelles applications, appelé le générateur

Qu'est-ce que Express?

Express a beaucoup de fonctionnalités intégrées, et beaucoup plus de fonctionnalités que vous pouvez obtenir d'autres paquets qui s'intègrent de façon transparente, mais il y a trois choses principales qu'il fait pour vous hors de la boîte :

1. Routage . C'est ainsi que / home / blog et / about vous donnent toutes des pages différentes. Express vous facilite la modularisation de ce code en vous permettant de placer différentes routes dans différents fichiers.
2. Middleware . Si vous êtes nouveau sur le terme, le middleware est essentiellement "logiciel colle". Il accède aux requêtes avant que vos routes ne les obtiennent, ce qui leur permet de gérer des tâches difficiles telles que l'analyse des cookies, le téléchargement de fichiers, les erreurs, et bien plus.
3. Views . Les vues sont la façon dont les pages HTML sont rendues avec du contenu personnalisé. Vous transmettez les données que vous voulez afficher et Express les rend avec votre moteur de vue donné

Getting Started

Démarrer un nouveau projet avec le générateur Express est aussi simple que d'exécuter quelques commandes:

 npm installer express-générateur -g

Cela installe le générateur Express sous la forme d'un package global, vous permettant d'exécuter la commande express dans votre terminal:

 express myapp

Cela crée un nouveau projet Express appelé myapp qui est ensuite placé dans le répertoire myapp .

 cd myapp

Si vous n'êtes pas familier avec les commandes de terminal, celle-ci vous place dans le répertoire myapp .

 npm install

npm est le gestionnaire de paquets Node.js par défaut. L'exécution de npm install installe toutes les dépendances pour le projet. Par défaut, le générateur d'express inclut plusieurs paquets couramment utilisés avec un serveur Express

Options

Le CLI du générateur prend une demi-douzaine de arguments mais les deux les plus utiles sont les suivantes:

• -v . Cela vous permet de sélectionner un moteur de vue à installer. La valeur par défaut est jade . Bien que cela fonctionne encore, il a été déconseillé en faveur de carlin .
• -c . Par défaut, le générateur crée un fichier CSS très basique pour vous, mais la sélection d'un moteur CSS configurera votre nouvelle application avec le middleware pour compiler l'une des options ci-dessus.

Maintenant que nous avons installé notre projet et installé les dépendances , nous pouvons démarrer le nouveau serveur en lançant ce qui suit:

 npm start

Puis naviguez jusqu'à http: // localhost: 3000 dans votre navigateur

Structure de l'application

L'application Express générée commence par quatre dossiers.

bin

Le dossier bin contient le fichier exécutable qui démarre votre application. Il démarre le serveur (sur le port 3000, si aucune alternative n'est fournie) et configure une gestion des erreurs de base. Vous n'avez pas vraiment besoin de vous soucier de ce fichier car npm start le lancera pour vous.

public

Le dossier public est l'un des plus importants: Tout ce qui est dans ce dossier est accessible aux personnes qui se connectent à votre application. Dans ce dossier, vous allez mettre du JavaScript, du CSS, des images et d'autres ressources dont les gens ont besoin quand ils se connectent à votre site web.

routes

Le dossier routes est l'emplacement de votre fichiers de routeur. Le générateur crée deux fichiers, index.js et users.js qui servent d'exemples de la façon de séparer la configuration de route de votre application.

Habituellement, vous aurez ici un fichier différent pour chaque itinéraire majeur sur votre site Web. Vous pouvez donc avoir des fichiers appelés blog.js home.js et / ou about.js dans ce dossier.

views

views dossier est l'endroit où vous avez les fichiers utilisés par votre moteur de modélisation. Le générateur configurera Express pour rechercher une vue correspondante lorsque vous appelez la méthode de rendu .

En dehors de ces dossiers, vous devez connaître un fichier.

app.js [19659005] Le fichier app.js est spécial car il configure votre application Express et colle toutes les pièces ensemble. Voyons ce qu'il fait. Voici comment le fichier commence:

 var express = require ('express');
var path = require ('chemin');
var favicon = require ('serve-favicon');
var logger = require ('morgan');
var cookieParser = require ('cookie-parser');
var bodyParser = require ('body-parser');

Ces six premières lignes du fichier sont obligatoires. Si vous êtes nouveau sur Node, assurez-vous de lire Présentation du module.exports et des exportations dans Node.js .

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

Les deux lignes de code suivantes requièrent les différents fichiers de route que le générateur Express configure par défaut: routes et utilisateurs

 var app = express ();

Après cela, nous créons une nouvelle application en appelant express () . La variable d'application contient tous les paramètres et itinéraires de votre application. Cet objet rassemble votre application.

 app.set ('views', path.join (__ dirname, 'views'));
app.set ('view engine', 'jade');

Une fois l'instance de l'application créée, le moteur de création de modèles est configuré pour le rendu des vues. C'est ici que vous pouvez modifier le chemin vers vos fichiers de vue si vous le souhaitez.

Après cela, Express sera configuré pour utiliser le middleware. Le générateur installe plusieurs éléments communs de middleware que vous utiliserez probablement dans une application Web.

 // app.use (favicon (path.join (__ dirname, 'public', 'favicon.ico')));
app.use (logger ('dev'));
app.use (bodyParser.json ());
app.use (bodyParser.urlencoded ({extended: false}));
app.use (cookieParser ());
app.use (express.static (path.join (__ dirname, 'public')));

• favicon . Celui-ci est assez explicite: il sert juste votre favicon.ico dans votre répertoire public.
• logger . Lorsque vous exécutez votre application, vous pouvez remarquer que toutes les routes demandées sont consignées dans la console. Si vous voulez désactiver ceci, vous pouvez simplement commenter ce middleware.
• bodyParser . Vous remarquerez peut-être qu'il existe deux lignes pour analyser le corps des requêtes HTTP entrantes. La première ligne gère quand JSON est envoyé via la requête POST et met ces données dans request.body . La deuxième ligne analyse les données de la chaîne de requête dans l'URL (par exemple, / profile? Id = 5 ) et la place dans request.query .
• cookieParser . Cela prend tous les cookies que le client envoie et les met dans request.cookies . Il vous permet également de les modifier avant de les renvoyer au client, en changeant response.cookies .
• express.static . Ce middleware sert les actifs statiques de votre dossier public . Si vous voulez renommer ou déplacer le dossier public, vous pouvez changer le chemin ici.

Ensuite, le routage est:

 app.use ('/', routes);
app.use ('/ users', utilisateurs);

Ici, les exemples de fichiers de route requis sont joints à notre application. Si vous avez besoin d'ajouter des routes supplémentaires, vous le ferez ici.

Tout le code après ceci est utilisé pour la gestion des erreurs. Vous n'aurez généralement pas à modifier ce code à moins que vous ne souhaitiez modifier la façon dont Express traite les erreurs. Par défaut, il est configuré pour afficher l'erreur qui s'est produite dans l'itinéraire lorsque vous êtes en mode développement.

J'espère que vous avez maintenant une idée claire de la façon dont l'outil générateur express peut vous faire gagner du temps. Projets basés sur Express

En fournissant une structure de fichiers par défaut, et en installant et en câblant les middleware les plus courants, le générateur crée une base solide pour de nouvelles applications avec seulement quelques commandes.