handlebars.jsnestjs

How to render header footer and main contain separate in nestjs


i try this it's working but I have multi pages and i wanna make the same header footer and render on each page ..

@Get('test')
@Render('B2B/test.hbs')
createClient() {
   return { message: 'Hello create_client!' };
}

Solution

  • 1. Install Necessary Packages

    First, ensure you have @nestjs/platform-express and hbs installed in your project. If not, you can install them using npm or yarn:

    npm install @nestjs/platform-express hbs
    

    2. Setup Handlebars in Your Main File (main.ts)

    In your main.ts, import hbs and configure your NestJS application to use Handlebars as the view engine. Also, set up static assets and register partials.

    import { NestFactory } from '@nestjs/core';
    import { NestExpressApplication } from '@nestjs/platform-express';
    import * as hbs from 'hbs';
    import { join } from 'path';
    import { AppModule } from './app.module';
    
    async function bootstrap() {
      const app = await NestFactory.create<NestExpressApplication>(AppModule);
    
      // Set up static assets
      app.useStaticAssets(join(__dirname, '..', 'public'));
    
      // Register Handlebars partials
      hbs.registerPartials(join(__dirname, '..', 'views/partials'));
      hbs.registerPartials(join(__dirname, '..', 'views/layout'));
    
      // Set base views directory and view engine
      app.setBaseViewsDir(join(__dirname, '..', 'views'));
      app.setViewEngine('hbs');
    
      await app.listen(3000);
    }
    
    bootstrap();
    

    3. Create Partials

    Create your Handlebars partials in the specified directories. For example, create footer.hbs and header.hbs inside the views/partials directory.

    Footer (views/partials/footer.hbs): Add your footer HTML code here.
    Header (views/partials/header.hbs): Add your header HTML code here.
    

    4. Use Partials in Your Views

    In your main view file (e.g., index.hbs), you can now include these partials using the {{> partialName}} syntax.

    <div class="page-wrapper compact-wrapper" id="pageWrapper">
        <!-- Page Header Start -->
        {{> header}}
        <div class="page-body-wrapper sidebar-icon">
            <!-- Your page content goes here -->
            ...
            {{> footer}}
        </div>
    </div>