Modèle-Vue-Contrôleur

Nest, par défaut, utilise la bibliothèque Express en arrière-plan. Ainsi, chaque technique pour utiliser le modèle MVC (Modèle-Vue-Contrôleur) dans Express s’applique également à Nest.

Tout d’abord, créons une simple application Nest en utilisant l’outil CLI :

$ npm i -g @nestjs/cli
$ nest new project

Pour créer une application MVC, nous avons également besoin d’un moteur de template pour rendre nos vues HTML :

$ npm install --save hbs

Nous avons utilisé le moteur hbs (Handlebars), mais vous pouvez utiliser celui qui répond le mieux à vos besoins. Une fois le processus d’installation terminé, nous devons configurer l’instance express en utilisant le code suivant :

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');

  await app.listen(3000);
}
bootstrap();

Nous avons indiqué à Express que le répertoire public sera utilisé pour stocker des ressources statiques, que views contiendra des modèles et que le moteur de modèle hbs doit être utilisé pour rendre la sortie HTML.

Rendu de modèle

Maintenant, créons un répertoire views et un modèle index.hbs à l’intérieur. Dans le modèle, nous allons imprimer un message passé du contrôleur :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>App</title>
  </head>
  <body>
    {{ message }}
  </body>
</html>

Ensuite, ouvrez le fichier app.controller et remplacez la méthode root() par le code suivant :

import { Get, Controller, Render } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Render('index')
  root() {
    return { message: 'Hello world!' };
  }
}

Dans ce code, nous spécifions le modèle à utiliser dans le décorateur @Render(), et la valeur de retour de la méthode de gestion de la route est passée au modèle pour le rendu. Notez que la valeur de retour est un objet avec une propriété message, correspondant au placeholder message que nous avons créé dans le modèle.

Pendant que l’application est en cours d’exécution, ouvrez votre navigateur et accédez à http://localhost:3000. Vous devriez voir le message Hello world!.

Rendu dynamique de modèle

Si la logique de l’application doit décider dynamiquement quel modèle rendre, alors nous devrions utiliser le décorateur @Res(), et fournir le nom de la vue dans notre gestionnaire de route, plutôt que dans le décorateur @Render() :

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

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

  @Get()
  root(@Res() res: Response) {
    return res.render(
      this.appService.getViewName(),
      { message: 'Hello world!' },
    );
  }
}

Exemple

Un exemple fonctionnel est disponible ici.

Fastify

Comme mentionné dans ce chapitre, nous pouvons utiliser n’importe quel fournisseur HTTP compatible avec Nest. Une telle bibliothèque est Fastify. Pour créer une application MVC avec Fastify, nous devons installer les packages suivants :

$ npm i --save @fastify/static @fastify/view handlebars

Les étapes suivantes couvrent presque le même processus d’utilisation avec Express, avec quelques différences mineures spécifiques à la plate-forme. Une fois le processus d’installation terminé, ouvrez le fichier main.ts et mettez à jour son contenu :

import { NestFactory } from '@nestjs/core';
import { NestFastifyApplication, FastifyAdapter } from '@nestjs/platform-fastify';
import { AppModule } from './app.module';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );

  app.useStaticAssets({
    root: join(__dirname, '..', 'public'),
    prefix: '/public/',
  });
  app.setViewEngine({
    engine: {
      handlebars: require('handlebars'),
    },
    templates: join(__dirname, '..', 'views'),
  });
  await app.listen(3000);
}
bootstrap();

L’API de Fastify est légèrement différente, mais le résultat final de ces appels de méthode reste le même. Une différence à noter avec Fastify est que le nom du modèle passé dans le décorateur @Render() doit inclure une extension de fichier.

import { Get, Controller, Render } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Render('index.hbs')
  root() {
    return { message: 'Hello world!' };
  }
}

Pendant que l’application est en cours d’exécution, ouvrez votre navigateur et accédez à http://localhost:3000. Vous devriez voir le message Hello world!.

Exemple

Un exemple fonctionnel est disponible ici.