Premiers pas avec Express.js

JavaScript prend la tête du développement Web, sa richesse de routines de traitement en temps réel et la polyvalence qui l'accompagne en ont fait l'un des langages à la croissance la plus rapide au cours des 5 dernières années.

Depuis la sortie de Node.js On a beaucoup parlé de la création d'applications utilisant un seul langage, et aujourd'hui c'est possible, en utilisant des frameworks Front-End tels que AngularJS ou alors Backbone.js, en utilisant également des bases de données telles que MongoDB ou alors CouchDB et enfin côté serveur en travaillant avec le puissant Node.js.

Mais pour travailler avec de grandes applications à partir de zéro avec Node.js nous devons faire beaucoup de choses répétitives et complexes, c'est là que ça entre en jeu Express.js, qui n'est rien de plus qu'un framework MVC qui nous aide à simplifier l'élaboration de notre logique Back-end, et en s'appuyant sur Node.js donne lieu à de grandes applications entièrement réalisées en JavaScript.

ExigencesNos exigences sont assez basiques, nous avons seulement besoin d'avoir Node.js installé et en cours d'exécution sur notre système, si nous avons la dernière version, nous devons nous assurer que nous avons également npm disponible qui est l'outil qui nous permettra d'installer les différents packages dont nous avons besoin comme dans le cas du framework, Express.js.

1. Express.js

Ce framework a été conçu pour avoir certaines fonctionnalités qui ont été inspirées par d'autres frameworks comme Rails ou alors Sintra, cela signifie que lorsqu'un développeur expérimenté met la main sur lui, il peut se sentir à l'aise avec des concepts qu'il connaît déjà, mais avec la puissance de Node.js et en utilisant uniquement JavaScript la vitesse de développement est multipliée.

Avant d'approfondir le sujet, examinons d'abord les caractéristiques les plus importantes de Express.js:

Le minimumL'idée derrière le framework n'est pas de s'impliquer dans d'autres questions qui ne sont pas intermédiaires entre notre application et le serveur, car cela ne nous complique pas la vie avec des milliers de composants, mais ne nous fournit que les choses les plus nécessaires.

SoupleEn raison de sa caractéristique d'être minimal, vous obtenez une grande flexibilité puisque le développeur peut choisir la façon dont il veut travailler et est autorisé à mettre en œuvre ses propres solutions ou à incorporer des solutions toutes faites telles que ORM pour différents types de Base de données.

Conçu pour les applicationsLe but de Express.js est de faciliter la construction d'applications web, qu'il s'agisse de pages, de services DU REPOS, voire des applications hybrides.

2. L'échafaudage

C'est un terme que nous avons peut-être vu de Rails et d'autres cadres, il est largement utilisé dans Express.js et ce n'est rien de plus que le framework générant une structure et un code de base, aussi appelé passe-partout qui nous aide à démarrer notre application.

De cette façon, nous pouvons créer le cadre d'un projet à partir d'une commande et ainsi oublier d'avoir à se souvenir de chacun des dossiers et fichiers de base nécessaires. Évidemment, comme c'est quelque chose de si général, nous finissons souvent par réécrire beaucoup de choses ou créer nos propres dossiers, mais avoir un point de départ est parfait.

3. Installer Express.js

L'installation du cadre est assez simple, grâce aux étapes qu'il faut npm, pour installer Express.js nous n'avons qu'à aller à la console de commande où nous pouvons exécuter npm et placez la commande suivante :

 npm install express --save

Cela fera que notre système télécharge tout le code nécessaire pour pouvoir générer nos projets et aussi pour utiliser les différents outils qu'il met Express.js À notre disposition, dans la console, nous verrons quelque chose comme ce qui suit si l'installation a réussi.

On peut remarquer que plusieurs packages associés ont été installés et que la version de Express.js au moment de la rédaction de ce tutoriel est le 4.11.2, ici, il est important de souligner qu'à partir de la version 4, il y a eu un grand changement, il est donc important si nous recherchons des informations pour nous assurer qu'il s'agit de la version 4.

Notre première applicationPour notre première application, nous allons créer une page Web avec deux sections, car nous commençons à peine à connaître l'outil, chaque section aura un petit texte, l'important est que nous devions créer un petit serveur et gérer le demandes de nos utilisateurs.

4. Le serveur

La première chose que nous devons faire est de créer un dossier où notre application ira et à l'intérieur de créer un fichier appelé index.js, ce nom est généralement placé par convention, cependant il peut s'agir de n'importe quel autre nom, en fait nous allons changer les choses et placer le nom de notre fichier helloexpress.js.

Une fois que nous aurons notre dossier, nous commencerons par inclure Express en utilisant les instructions exiger, avec cela nous aurons à notre disposition tous les outils du framework, puis nous utiliserons les méthodes ensemble() Oui utilisation (), où avec le premier, nous établirons le port par lequel notre serveur doit attendre les connexions, et avec le second, nous établirons ce qui doit se passer lorsque nous obtenons une erreur 404 ou une erreur 500.

Enfin avec la méthode Ecoutez () nous ferons en sorte que notre application se lève lorsque nous exécuterons notre fichier. Voyons le code ci-dessous :

 var express = require ('express'); var app = express (); app.set ('port', process.env.PORT || 3001)); app.use (function (req, res) {res.type ( 'text / plain'); res.status (404); res.send ('404 - Not Found');}); app.use (function (err, req, res, next) {console.error (err. stack); res.type ('text / plain'); res.status (500); res.send ('500 - Quelque chose ne va pas!');}); app.listen (app.get ('port') , function () {console.log ('Express a été démarré sur http: // localhost:' + app.get ('port') + '; appuyez sur Ctrl-C pour fermer le serveur.');});

Il ne nous reste plus qu'à écrire la commande suivante dans la console :

 nœud helloexpress.js

Avec cela, notre serveur se lèvera. Le problème est que nous ne verrons rien, c'est parce que nous n'avons pas établi les itinéraires de l'application, mais si nous voyons l'écran suivant, nous voyons que cela fonctionne car notre message que nous avons placé pour 404 est sorti.

AGRANDIR

5. Y compris les itinéraires

Afin d'obtenir un résultat au-delà de la page 404 que nous générons, nous devons inclure des routes, ce qui n'est rien de plus que de dire à notre application que lorsqu'un utilisateur demande une route avec une méthode HTTP spécifiquement, un résultat que nous définissons est renvoyé, donc une route avoir ce n'est pas la même chose qu'un itinéraire Publier et donc les deux bien qu'étant sous la même direction peuvent nous donner des résultats différents.

Créons donc quelques itinéraires avoir, ce code doit être placé juste avant le code qui génère le 404, nous allons donc modifier notre fichier helloexpress.js et maintenant il devrait être comme suit :

 var express = require ('express'); var app = express (); app.set ('port', process.env.PORT || 3001); app.get ('/', function (req, res) { res.type ('text / plain'); res.send ('Bonjour, bienvenue dans ma première application');}); app.get ('/ other path', function (req, res) {res.type ( ' text / plain '); res.send (' Ceci est un autre chemin de notre application ');}); app.use (function (req, res) {res.type (' text / plain '); res.status (404); res.send ('404 - Not Found');}); app.use (function (err, req, res, next) {console.error (err.stack); res.type ('text / plain '); res.status (500); res.send (' 500 - Quelque chose ne va pas! ');}); app.listen (app.get (' port '), function () {console.log (' Express commencé à http: // localhost: '+ app.get (' port ') +'; appuyez sur Ctrl-C pour arrêter le serveur. ');});

Comment remarquer la méthode avoir reçoit la route, puis une fonction anonyme, dans laquelle nous envoyons le type de réponse dans ce cas texte simple puis nous envoyons le contenu, si nous exécutons notre exemple dans le navigateur, nous obtiendrons finalement quelque chose comme ce qui suit :

AGRANDIR

Les parcours Publier Ils fonctionnent de manière similaire, seulement alors nous devons intégrer une gestion des paramètres qui peuvent être inclus mais nous ne devons pas trop nous en soucier pour le moment. Nous avons ensuite pu vérifier comment nous avons affecté le résultat de ce que l'utilisateur peut voir directement.

ImportantIl est important de noter que chaque fois que nous modifions quelque chose dans notre code, nous devons fermer l'application et la redémarrer pour que les modifications prennent effet. Ce début peut sembler très simple et il l'est, l'idée est que nous pouvons nous habituer à travailler de manière à comprendre le serveur et son fonctionnement, car de cette manière, nous pouvons créer les applications que nous voulons avec le code que nous voulons vraiment et c'est la magie de Express.js.

À partir de là, nous pouvons commencer à expérimenter les types de réponses et le contenu que nous voulons servir, mais le vrai pouvoir vient lorsque nous commençons à implémenter un moteur de modèle, mais c'est déjà un sujet légèrement plus avancé dans ce didacticiel.

Avec cela, nous avons terminé ce tutoriel, nous avons construit une petite application pour faire nos premiers pas avec Express.js, si nous avons connu Node.js on voit tout de suite que les choses sont un peu plus directes et simples. Mais le vrai pouvoir, nous le verrons lorsque nous commencerons à implémenter d'autres outils tels que des modèles ou des modèles.