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!' };
}
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
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();
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.
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>