If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
NestJS एक powerful framework है जो server-side rendering के लिए different view template engines को support करता है। इन engines में से एक popular engine है hbs
(Handlebars).
अगर आपको dynamic HTML pages render करने हैं with थे help of templates, तो NestJS का MVC (Model-View-Controller) pattern काफी useful होता है।
इस Topic में हम देखेंगे कैसे NestJS में hbs
(Handlebars) का use करते हुए HTML pages को render किया जा सकता है। हम step-by-step Handlebars view engine को integrate करेंगे और dynamic content को render करना सीखेंगे
●●●
NestJS में hbs
view engine को setup करने के लिए, पहले हमें hbs
और @nestjs/platform-express
package install करना पड़ेगा।
npm install hbs @nestjs/platform-express
पहले हमें main.ts
में Handlebars को configure करना पड़ेगा। View engine को setup करने के लिए हम NestExpressApplication
का use करेंगे जो NestJS के MVC framework में view templates को handle करने में help करता है।
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(
AppModule,
);
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(3000);
}
bootstrap();
यहां
app.useStaticAssets()
का मतलब है कि view पर serve होने वाली static files जैसे images , videos etc किस folder में है।
app.setBaseViewsDir()
का use करके हम बताते हैं कि views (HTML templates) कौनसे folder में store होंगे।
app.setViewEngine('hbs')
से हम hbs (Handlebars) को view engine के रूप में set कर रहे हैं।
●●●
अब हम देखेंगे कैसे एक basic static HTML page को render करते हैं using hbs
.
पहले हमें एक controller
banana पड़ेगा जो HTML page को render करेगा।
File : src/app.controller.ts
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index') // Rendering 'index.hbs'
getHomePage() {
return {}; // Static content ke liye koi data pass nahi kar rahe
}
}
यहां
@Render('index')
decorator का use करके हम index.hbs
file को render कर रहे हैं।
getHomePage()
method एक basic GET
request handle करता है और index page render करता है।
File : views/index.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to NestJS</title>
</head>
<body>
<h1>Hello, Welcome to NestJS with hbs!</h1>
</body>
</html>
●●●
अब हम देखेंगे कैसे controller से dynamic content को view में render करते हैं।
File : src/app.controller.ts
@Controller()
export class AppController {
@Get()
@Render('index')
getHomePage() {
// Passing dynamic data to the view
return { title: 'NestJS with hbs', message: 'This is dynamic content from the controller.' };
}
}
Example में return के through हम title
और message
को view को pass कर रहे हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title> <!-- Dynamic title from controller -->
</head>
<body>
<h1>{{message}}</h1> <!-- Dynamic message from controller -->
</body>
</html>
यहां हमने {{title}}
और {{message}}
Handlebars syntax का use किया है dynamic content render करने के लिए जो controller से pass किया गया था।
हम hbs view template में dynamic value को controller से as a Object
return करते हैं , आप need के according us object में जो चाहे वो return कर सकते हैं।
●●●
Use Partial Templates : अगर आपके views में repeated content है, तो आप partials का use कर सकते हैं, जिससे code reusability और maintainability बढ़ती है।
Use Layouts for Consistency : Layouts का use करके आप हर page के लिए common structure बना सकते हैं, जैसे headers, footers, या sidebars. इससे आपका code modular और clean रहेगा।
Sanitize User Input : जब आप dynamic data inject कर रहे हो, ensure करें कि input को properly sanitize
किया गया है ताकि security vulnerabilities जैसे XSS (Cross-Site Scripting) attacks से बचा जा सके।
Use DTOs for Data Passing : जब भी आप controller से data view को pass करते हैं, तो ensure करें कि आप DTOs
(Data Transfer Objects) का use कर रहे हैं ताकि data validation और structure maintain हो।
Use Proper Error Handling : View rendering के दौरान अगर कोई error आता है, तो ensure करें कि proper error handling और logging implemented हो।