Sell products, services, content and more with Squarespace. ads via Carbon

Serve Static

Afin de servir un contenu statique comme une application à page unique (SPA), nous pouvons utiliser le module ServeStaticModule du package @nestjs/serve-static.

Installation#

Nous devons d'abord installer le package requis :

$ npm install --save @nestjs/serve-static

Bootstrap#

Une fois le processus d'installation terminé, nous pouvons importer le module ServeStaticModule dans le module racine AppModule et le configurer en passant un objet de configuration à la méthode forRoot().

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'client'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Avec ceci en place, construisez le site web statique et placez son contenu dans l'emplacement spécifié par la propriété rootPath.

Configuration#

ServeStaticModule peut être configuré avec une variété d'options pour personnaliser son comportement. Vous pouvez définir le chemin de rendu de votre application statique, spécifier des chemins exclus, activer ou désactiver l'en-tête de réponse Cache-Control, etc. Voir la liste complète des options ici.

Remarque Le renderPath par défaut de l'application statique est * (tous les chemins), et le module enverra des fichiers "index.html" en réponse. Il vous permet de créer un routage côté client pour votre SPA. Les chemins d'accès spécifiés dans vos contrôleurs seront renvoyés vers le serveur. Vous pouvez modifier ce comportement en paramétrant serveRoot, renderPath en les combinant avec d'autres options. De plus, l'option serveStaticOptions.fallthrough a été implémentée dans l'adaptateur Fastify pour imiter le comportement de "fallthrough" d'Express et doit être mise à true pour envoyer index.html au lieu d'une erreur 404 pour les routes non existantes.

Exemple#

Un exemple concret est disponible ici.