Déc 19, 2019 Javascript

Maîtriser Javascript : express.js

Créer une application web avec Node est devenu facile avec l’apparition de modules dédiés. Express.js est le plus célèbre et aussi le plus utilisé, il offre une structure avec laquelle il est facile de bâtir une application. D’autre part il existe une grande communauté qui participe à ce projet et on ne reste jamais avec une question sans réponse.

Installation

Express doit être chargé avec npm comme tous les modules externes à Node.js. Commencez par initialiser une application :

npm init

Puis installez express :

npm i express -s

Il existe aussi un générateur pour créer une application complète, j’en parle plus loin.

Premier serveur

Voici la version minimale pour créer un serveur, par exemple dans un fichier index.js :

const express = require('express'), app = express(), port = 3000
app.get('/', (req, res) => res.send('Coucou Express !'))
.listen(port, () => console.log(`Example de serveur qui écoute sur le port ${port} !`))

On charge le module express, on déclare une constante app et un port 3000.

On crée une route avec le verbe GET qui se contente de renvoyer « Coucou Express ! ».

On écoute le port 3000.

node index
Example de serveur qui écoute sur le port 3000 !

On peut maintenant accéder au serveur en local avec localhost:3000 :

Vous voyez que c’est tout simple !

Les routes

On a vu ci-dessus notre serveur de base avec une route avec le verbe GET. Créer une route avec Express est simple, on utilise l’objet app qu’on a créé et la méthode du verbe qu’on veut, il suffit ensuite de préciser l’url en minuscules et pour terminer la réponse à renvoyer. Par exemple :

app.post('/contact', (req, res) =>  res.send("Demande de contact bien reçue !"))

Il ne reste plus qu’à voir si ça fonctionne :

Gestion des paramètres

On peut récupérer des paramètres dans l’url :

app.get('/post/:n', (req, res) =>  res.send(req.params.n))

On voit qu’on utilise les deux oints (:) pour repérer le paramètre.

Vous retrouvez tout ce qui concerne les routes dans la documentation.

Un générateur

On peut utiliser le générateur fourni avec Express (Node.js >= 8.2.0) :

npx express-generator --view=pug
npx: installed 10 in 3.666s

   create : public\
   create : public\javascripts\
   create : public\images\
   create : public\stylesheets\
   create : public\stylesheets\style.css
   create : routes\
   create : routes\index.js
   create : routes\users.js
   create : views\
   create : views\error.pug
   create : views\index.pug
   create : views\layout.pug
   create : app.js
   create : package.json
   create : bin\
   create : bin\www

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=nodetest:* & npm start

J’ai précisé le viewer pug parce qu’actuellement il y a encore installation de Jade qui ne sera plus utilisé.

Ensuite comme indiqué on installe les dépendances :

npm i

On se retrouve avec cette structure :

Et pour finir on lance le serveur :

SET DEBUG=nodetest:* & npm start

> nodetest@0.0.0 start E:\nodetest
> node ./bin/www

  nodetest:server Listening on port 3000 +0ms

Et si tout se passe bien :

C’est une organisation possible mais ce n’est évidemment pas la seule, l’avantage c’est qu’elle est rapide à mettre en place…

Le petit reproche qu’on pourrait lui faire c’est de ne pas utiliser un modèle MVC. Mais c’est une bonne approche tant qu’on ne se lance pas dans un site dynamique.

NestJS

Express c’est bien mais on peut faire mieux en l’enrichissant un peu. Ainsi sont nés de nombreux frameworks. Devant cette pléthore on se demande bien lequel choisir…

Mais celui qui semble sortir du lot est NestJS. Il privilégie TypeScript (j’ai écrit quelques articles sur ce langage) comme langage mais supporte quand même un JavaScript de base.

Pour créer une application NestJS c’est simple, il faut commencer par installer le CLI de façon globale :

npm i -g @nestjs/cli

Et ensuite créer l’application :

nest new test

Après un peu d’attente on se retrouve avec cette architecture :

On peut lancer l’application :

cd test
npm run start

Le fichier d’entrée est main.ts :

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Pour créer l’application on fait appel à la classe NestFactory. Ici on utilise async pour créer une fonction asynchrone, et await pour attendre la résolution de la promesse. C’est une façon élégante d’écrire des promesses. On obtiendrait le même résultat de façon plus classique avec cette syntaxe :

(function() {
  return NestFactory.create(AppModule).then(app => app.listen(3000))
})()

Mais c’est quand même moins lisible…

NestJS utilise des contrôleurs complétés par un routeur. L’intallation par défaut en prévoit un (app.controller.ts) :

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

Un contrôleur est défini par le décorateur @Controller(). On peut mettre l’url par défaut comme paramètre. Dans le contrôleur on définit les routes avec les décorateurs @Get, @Post…

NestJS utilise aussi des providers définis par le décorateur @Injectable(). L’installation de base en prévoit un (app.service.ts) :

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello toi!';
  }
}

On dispose alors de fonctionnalités qu’on peut injecter, on le voit dans le constructeur du contrôleur :

constructor(private readonly appService: AppService) {}

NestJS utilise des modules définis par le décorateur @Module(). On en trouve également un dans l’installation de base (app.module.ts) :

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

C’est le module de base qui organise toute l’application.

Je n’ai fait là qu’une présentation très sommaire de NestJS qui mérite vraiment d’être découvert ! Une bonne entrée est ce lot d’exemples à explorer.

Conclusion

J’ai montré dans cet article que la réalisation d’un serveur écrit en Javascript est devenu une chose courante et facile et qu’on dispose de nombreux frameworks pour gagner en efficacité.

Laisser un commentaire