Serve Static

In order to serve static content like a Single Page Application (SPA) we can use the ServeStaticModule from the @nestjs/serve-static package.

Installation

First we need to install the required package:

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

Bootstrap

Once the installation process is done, we can import the ServeStaticModule into the root AppModule and configure it by passing in a configuration object to the forRoot() method.

  1. import { Module } from '@nestjs/common';
  2. import { AppController } from './app.controller';
  3. import { AppService } from './app.service';
  4. import { ServeStaticModule } from '@nestjs/serve-static';
  5. import { join } from 'path';
  6. @Module({
  7. imports: [
  8. ServeStaticModule.forRoot({
  9. rootPath: join(__dirname, '..', 'client'),
  10. }),
  11. ],
  12. controllers: [AppController],
  13. providers: [AppService],
  14. })
  15. export class AppModule {}

With this in place, build the static website and place its content in the location specified by the rootPath property.

Configuration

ServeStaticModule can be configured with a variety of options to customize its behavior. You can set the path to render your static app, specify excluded paths, enable or disable setting Cache-Control response header, etc. See the full list of options here.

warning Notice The default renderPath of the Static App is * (all paths), and the module will send “index.html” files in response. It lets you create Client-Side routing for your SPA. Paths, specified in your controllers will fallback to the server. You can change this behavior setting serveRoot, renderPath combining them with other options.

Example

A working example is available here.