NestJs Render HTML : NestJs hbs Template

📔 : NestJS Tutorials 🔗

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 Install Handlebars (hbs)

NestJS में hbs view engine को setup करने के लिए, पहले हमें hbs और @nestjs/platform-express package install करना पड़ेगा।

npm install hbs @nestjs/platform-express

NestJs Set hbs configurations

पहले हमें 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 कर रहे हैं।

NestJs Render HTML Example

अब हम देखेंगे कैसे एक 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 करता है।

Create View Template

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>

NestJs Render Dynamic HTML Page

अब हम देखेंगे कैसे 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 कर रहे हैं।

Update View

<!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 कर सकते हैं।

NestJs hbs Best Practices

  • 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 हो।

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook