Qu'est-ce que Express?

Express est un framework Web minimaliste et rapide pour Node.js. C'est également de loin le framework Web Node.js le plus populaire.

Que pouvons-nous faire avec Espress?

• Application Web: Express est un framework web Node.js minimaliste et flexible qui fournit un ensemble robuste de fonctionnalités pour les applications Web et mobiles

• API: avec une myriade de méthodes utilitaires HTTP et de middleware à votre disposition, la création d'une API robuste est simple et rapide.

• Espress n'est pas un framework frontend comme React ou Vue. Express est un framework backend qui complètera un framework frontend pour créer des applications full stack

Prérequis?

Pour utiliser Express, nous avons besoin d'une version fonctionnelle de node.js déjà installée sur notre machine.

Il est également recommandé de comprendre les concepts de base de node.js.

Installer et configurer Express

Nous allons d'abord créer un nouveau dossier et démarrer une nouvelle application, puis nous installerons Espress. Dans votre terminal, exécutez

$ mkdir discover_express
$ cd discover_express
$ touch app.js
$ npm init
$ npm install express

Ces commandes créeront une nouvelle installation d'application node.js avec le framework Express.

Votre premier serveur Node.js

Nous sommes maintenant prêts pour notre première ligne de code. Ouvrez app.js et tapez:

const express = require('express')
const app = express()

Ce code initialisera la variable app en tant que nouvel objet Express.

Alors maintenant, nous pouvons démarrer le serveur:

app.listen(5000, () => {
  console.log('Server running on localhost:5000...')
})

5000 est le numéro de port. Cette valeur peut être modifiée.

Comprendre les principes de base de la communication de votre navigateur Web avec Internet

Pour accéder à une page sur Internet, votre navigateur doit demander au serveur la page qu'il souhaite (requête), puis vous afficher cette page (réponse). Ce protocole de requêtes et de réponses vous permet de visualiser cette page dans votre navigateur.

Par exemple, lorsque vous visitez facebook.com/about, votre navigateur demande la page 'about' du serveur Facebook.

Le serveur Facebook trouvera et fera correspondre le chemin de votre demande, effectuera le traitement et enverra la réponse associée à ce chemin.

Voici d'autres exemples de différents chemins d'URL.

route racine: facebook.com
profil: facebook.com/profile
à propos de: facebook.com/about
connexion: facebook.com/login

Requête GET et POST

Votre navigateur peut demander une page mais votre navigateur peut également envoyer des données au serveur (ex. Formulaire de login).

Lorsque le navigateur demande des informations, il fait une requête GET.

Lorsqu'un navigateur envoie des données au serveur il fait une requête POST

Donc, demander une page facebook/about est une demande GET.

Et si ...

Que se passe t'il si la page demandée n'est pas présente sur le serveur ? Par exemple, vous demandez facebook.com/blabla

Le serveur inclura un code status avec chaque réponse qu'il renverra au navigateur.

Si tout fonctionne comme prévu, le code status est 200. Si la page n'est pas trouvée, le code status de retour sera 404.

Pour référence ici, une liste de quelques codes status HTTP:
200: OK (réussi)
401: non autorisé
403: Interdit
404: introuvable
500: Erreur de serveur interne

Première communication client / serveur

Dans la première partie de cet article, nous avons créé un serveur node.js avec une application express.

const express = require('express')
const app = express()

Nous avons ensuite fait un listen pour attendre une requête:

app.listen(5000, () => {
  console.log('Server running on localhost:5000...')
})

Maintenant que le serveur est démarré, nous pouvons créer une route qui correspondra à un chemin d'une requête potentiel.

app.get('/', (request, response) => {
  response.send('Hello World')
})

Ce serveur attend une requête sur la route '/' (chemin racine). Notez que la route attend une requête GET. (app.get)

Une fois cette demande reçue, le serveur enverra «Hello World» en réponse.

Testons tout cela. Lancez d'abord votre serveur. À partir du type de terminal: node app.js

$ node app.js
Server running on localhost:5000...

Ensuite, ouvrez votre navigateur préféré et accédez à localhost: 5000. Hello World devrait être affiché.

Il est possible d'envoyer un code status HTTP avec la réponse. Cela indiquera au client que la demande / réponse est un succès ou un échec.

app..get('/', (request, response) => {
  response.status(200).send('Hello World')
})

Status 200 signifie que la requête est un succès

Response HTML

Le serveur que nous avons créé envoie simplement une réponse en text simple (Hello World).

Mais il est possible de renvoyer du HTML ou du JSON.

Response HTML

app..get('/', (request, response) => {
  response.status(200).send('<h1>Hello World</h1>')
})

Vous pouvez maintenant redémarrer le serveur. Si votre ancien serveur est toujours en cours d'exécution dans le terminal. Appuyez sur CTRL-C pour annuler l'exécution du serveur. Vous pouvez maintenant re-démarrer l'application pour voir le changement.

$ node app.js

Si vous actualisez votre navigateur sur localhost: 5000, vous verrez maintenant Hello World mais cette fois au format grand en-tête h1!

Réponse JSON

Le serveur peut également renvoyer des données au navigateur. Par exemple, après un login, le serveur peut renvoyer des informations sur utilisateur.

L'un des moyens standard d'envoyer des données dans les deux sens est JSON.

JSON (JavaScript Object Notation) est un format text standard pour représenter des données structurées basées sur la syntaxe d'objet JavaScript.

Il est couramment utilisé pour transmettre des données dans des applications Web (par exemple, envoyer des données du serveur au client, afin qu'elles puissent être affichées sur une page Web, ou vice versa)

JSON est souvent utilisé avec un API. Nous aborderons les API en détail dans la prochaine leçon.

Envoyer une réponse JSON avec Express est très simple:

app.get('/', (request, response) => {
    response.status(200).json({user: 'Mike Taylor', level: 'admin'})
})

Le .json () convertit et envoie un objet javascript {} au format JSON.

Conclusion

WOW félicitations! Vous venez de créer votre premier serveur Web!

C'est tout pour aujourd'hui. Demain, le voyage continue. Nous allons commencer à travailler sur l'un des cas les plus utilisés d'Express.js: la construction de notre première API... Restez à l'écoute!

Suivez-moi sur Twitter: Follow @justericchapman