NestJS — Enterprise Node.js

Full-Stack Integration: Static Assets, Templates & Frontend Builds

18 min Lesson 77 of 80

Full-Stack Integration: Static Assets, Templates & Frontend Builds

A full-stack NestJS app may host an admin UI, serve a compiled React or Vue build, render transactional pages, and expose API routes from the same process. The key is controlling boundaries and caching.

Core idea

This feature is about controlling how the application is organized and how it behaves at runtime. These are the points a developer should understand before using it in a real project:

ServeStaticModule can mount a frontend dist folder at the root while API routes stay under /api.
Template engines are useful for server-rendered pages such as password reset confirmations or admin screens.
Static assets should use hashed filenames and long cache headers.
API routes and frontend fallback routes must be ordered so the SPA catch-all does not swallow API calls.
For public high-traffic frontends, separate CDN hosting may outperform serving files from the Nest process.

Practical example

The following example shows the idea in a practical NestJS project. The goal is not to memorize the snippet, but to understand where it belongs in the architecture:

ServeStaticModule.forRoot({
  rootPath: join(__dirname, '..', 'client'),
  exclude: ['/api/{*path}'],
});

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

@Controller('account')
export class AccountPagesController {
  @Get('verified')
  @Render('verified')
  verified() {
    return { title: 'Email verified' };
  }
}

Design note: One process is convenient, but do not let convenience erase boundaries. Frontend routing, API routing, and rendered pages should each have clear ownership.

Production checklist

Mount APIs under a prefix before adding SPA fallbacks.
Use hashed frontend assets and long-lived cache headers.
Keep sensitive rendered pages behind guards.
Move static delivery to CDN when bandwidth or latency becomes important.

Rule of thumb: If the feature makes boundaries clearer and tests easier, it is probably the right choice. If it hides dependencies or makes tracing harder, redesign.

Summary

This lesson covers an advanced NestJS area that matters when building enterprise applications. Focus on clear boundaries, testable behavior, and choosing the right tool for the context instead of using every feature everywhere.