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 fonctionnalits pour les applications Web et mobiles

• API: avec une myriade de mthodes utilitaires HTTP et de middleware votre disposition, la cration 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 compltera un framework frontend pour crer des applications full stack

Prrequis?

Pour utiliser Express, nous avons besoin d'une version fonctionnelle de node.js dj installe sur notre machine.

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

Installer et configurer Express

Nous allons d'abord crer un nouveau dossier et dmarrer une nouvelle application, puis nous installerons Espress. Dans votre terminal, excutez

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

Ces commandes creront une nouvelle installation d'application node.js avec le framework Express.

Votre premier serveur Node.js

Nous sommes maintenant prts pour notre premire 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 dmarrer le serveur:

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

5000 est le numro de port. Cette valeur peut tre modifie.

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

Pour accder une page sur Internet, votre navigateur doit demander au serveur la page qu'il souhaite (requte), puis vous afficher cette page (rponse). Ce protocole de requtes et de rponses 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 rponse associe ce chemin.

Voici d'autres exemples de diffrents chemins d'URL.

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

Requte GET et POST

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

Lorsque le navigateur demande des informations, il fait une requte GET.

Lorsqu'un navigateur envoie des donnes au serveur il fait une requte POST

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

Et si ...

Que se passe t'il si la page demande n'est pas prsente sur le serveur ? Par exemple, vous demandez facebook.com/blabla

Le serveur inclura un code status avec chaque rponse qu'il renverra au navigateur.

Si tout fonctionne comme prvu, le code status est 200. Si la page n'est pas trouve, le code status de retour sera 404.

Pour rfrence ici, une liste de quelques codes status HTTP:
200: OK (russi)
401: non autoris
403: Interdit
404: introuvable
500: Erreur de serveur interne

Premire communication client / serveur

Dans la premire 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 requte:

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

Maintenant que le serveur est dmarr, nous pouvons crer une route qui correspondra un chemin d'une requte potentiel.

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

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

Une fois cette demande reue, le serveur enverra Hello World en rponse.

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

$ node app.jsServer running on localhost:5000...

Ensuite, ouvrez votre navigateur prfr et accdez localhost: 5000. Hello World devrait tre affich.

Il est possible d'envoyer un code status HTTP avec la rponse. Cela indiquera au client que la demande / rponse est un succs ou un chec.

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

Status 200 signifie que la requte est un succs

Response HTML

Le serveur que nous avons cr envoie simplement une rponse 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 redmarrer le serveur. Si votre ancien serveur est toujours en cours d'excution dans le terminal. Appuyez sur CTRL-C pour annuler l'excution du serveur. Vous pouvez maintenant re-dmarrer 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-tte h1!

Rponse JSON

Le serveur peut galement renvoyer des donnes au navigateur. Par exemple, aprs un login, le serveur peut renvoyer des informations sur utilisateur.

L'un des moyens standard d'envoyer des donnes dans les deux sens est JSON.

JSON (JavaScript Object Notation) est un format text standard pour reprsenter des donnes structures bases sur la syntaxe d'objet JavaScript.

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

JSON est souvent utilis avec un API. Nous aborderons les API en dtail dans la prochaine leon.

Envoyer une rponse JSON avec Express est trs 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 flicitations! Vous venez de crer 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 utiliss d'Express.js: la construction de notre premire API... Restez l'coute!

Suivez-moi sur Twitter: Follow @justericchapman