Votre serveur web sous NodeJS

Implémentez rapidement un serveur web sous nodeJS et découvrez le framework web Express

Nous allons être amenés, dans des articles à venir, à évoquer nombre de librairies frontend. Aussi il parait indispensable de faire un point dès à présent sur la façon d'implémenter un serveur web.
Nous allons, pour ce faire, commencer par développer le serveur le plus simple qui soit, puis ensuite, implémenter le même via le framework express, et voir ce que celui-ci peut nous apporter.

Serveur web basique

Implémenter un serveur web va consister à invoquer la méthode createServer de l'interface http en prenant soin d'initialiser un certain nombre de messages d'en-tête à destination du navigateur. Par ailleurs, nous allons initier un démon d'écoute sur un port choisi arbitrairement. Pour l'exemple, nous associerons notre serveur au port 3280 sur notre machine locale (adresse ip 127.0.0.1).
Dans un nouveau fichier source serveur_simple.js nous implémentons notre serveur ainsi :

const http = require('http');
const host = '127.0.0.1';
const port = 3280;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Le serveur web fonctionne !');
});

server.listen(port, host, () => {
  console.log(`Server running at http://${host}:${port}/`);
});

Puis nous le lançons via la ligne de commande et obtenons, si tout va bien, un message en retour nous indiquant que le serveur tourne et écoute le port 3280 :

node serveur_simple.js

Serveur running at http://127.0.0.1:3280/

Il ne nous reste plus qu'à nous rendre dans un navigateur internet puis d'accéder à l'adresse http://127.0.0.1:3280/ pour découvrir ceci :

Le serveur web fonctionne !

Tout ça pour ça, me direz-vous. Effectivement, mais notre objectif est rempli, le serveur fonctionne. Sans parler de contenu, que nous verrons ultérieurement à l'heure d'évoquer la data visualisation via D3js par exemple, que pouvons-nous attendre d'un serveur web ?
Nous allons à coup sur être amenés à implémenter un routage qui permettra à l'utilisateur d'accéder a diverses parties de notre application via des adresses différentes. Nous pourrions aussi développer une API que nous permettra de renvoyer simplement des données brutes. Tout ceci peut s'apparenter à des fonctionnalités techniques qui, au lieu d'être réécrites de toute pièce peuvent être importées via des frameworks. Nous allons, dans la suite de cet article, évoquer le framework web express.

Serveur web basique, sous express

Commençons par réécrire notre précèdent serveur en utilisant cette fois le framework express. Il nous faut, au préalable importer la librairie express :

npm install express --save

Ceci étant fait, implémentons notre serveur, dans un nouveau fichier source serveur_express.js :

const express = require('express')
const server = express()

const host = '127.0.0.1';
const port = 3280;

server.get('/', (req, res) => {
  res.send('Le serveur web express fonctionne !')
})

server.listen(port, host, () => {
  console.log(`Server running at http://${host}:${port}/`);
});

Nous voyons, dans le code ci-dessus, que nous n'avons plus besoin d'invoquer directement la création de l'instance via createServer car celle-ci est réalisée via l'appel au constructeur express. Par ailleurs, si l'écoute du port ne change pas, nous avons en revanche un premier routage vers la racine du serveur qui nous renvoie notre message. Lançons à présent notre serveur :

node serveur_express.js

Serveur running at http://127.0.0.1:3280/

L'accès, via un navigateur internet, à l'adresse http://127.0.0.1:3280/ nous permet de découvrir ceci :

Le serveur web express fonctionne !

Routage

Nous avons évoqué le routage précédemment, en voici un exemple. Reprenons le code de notre serveur express et ajoutons lui deux routes supplémentaires :

const express = require('express')
const server = express()

const host = '127.0.0.1';
const port = 3280;

server.get('/', (req, res) => {
  res.send('Bienvenue a la racine !')
})

server.get('/dashboard1', (req, res) => {
  res.send('Premier tableau de bord de notre analyse !')
})

server.get('/dashboard2', (req, res) => {
  res.send('Second tableau de bord de notre analyse !')
})

server.listen(port, host, () => {
  console.log(`Server running at http://${host}:${port}/`);
});

Comme vous pouvez le constater, nous avons modifier le message de la sortie associée à la racine, puis ajouter deux routes. Ainsi, après lancement du serveur, si l'utilisateur se rend à l'adresse http://127.0.0.1:3280/dashboard1, il aura en sortie une vue propre au tableau de bord qu'il a requêté.
Nous commençons à percevoir les prémices d'un modèle MVC. Express fait, bien entendu bien plus que cela, et nous vous invitons à découvrir toute l'étendue de ce que propose ce framework directement sur le site qui lui est dédié à l'adresse https://expressjs.com/

Retrouvez dans la rubrique "Nos datasets" toutes les données dont vous aurez besoin pour tester et pratiquer !