Using Template Engines in Node.js for Dynamic Content

{
  "title": "Using Template Engines in Node.js for Dynamic Content",
  "description": "Discover how to implement various template engines to generate dynamic HTML content in your Node.js applications.",
  "category": "Node.js Cursor Rules",
  "rules": [
    {
      "name": "Select an Appropriate Template Engine",
      "description": "Choose a template engine that aligns with your project's requirements and team expertise. Popular options include EJS, Pug, and Handlebars.",
      "examples": [
        {
          "input": "const express = require('express');\nconst app = express();\napp.set('view engine', 'ejs');",
          "output": "Express is configured to use EJS as the template engine."
        }
      ]
    },
    {
      "name": "Organize Templates Effectively",
      "description": "Maintain a clear directory structure for your templates to enhance maintainability. Store templates in a dedicated 'views' directory and use subdirectories for partials and layouts.",
      "examples": [
        {
          "input": "views/\n  ├── layouts/\n  │   └── main.ejs\n  ├── partials/\n  │   └── header.ejs\n  └── pages/\n      └── index.ejs",
          "output": "Templates are organized into layouts, partials, and pages within the 'views' directory."
        }
      ]
    },
    {
      "name": "Separate Logic from Presentation",
      "description": "Keep business logic out of your templates. Perform data processing in your application code and pass the processed data to the templates for rendering.",
      "examples": [
        {
          "input": "app.get('/', (req, res) => {\n  const data = fetchData();\n  res.render('index', { data });\n});",
          "output": "Data is processed in the route handler and passed to the template for rendering."
        }
      ]
    },
    {
      "name": "Implement Caching for Performance",
      "description": "Enable caching mechanisms to improve performance by reducing template compilation overhead, especially in production environments.",
      "examples": [
        {
          "input": "const express = require('express');\nconst app = express();\napp.set('view cache', true);",
          "output": "Template caching is enabled in Express to enhance performance."
        }
      ]
    },
    {
      "name": "Ensure Security in Templates",
      "description": "Sanitize and validate all user inputs to prevent security vulnerabilities such as Cross-Site Scripting (XSS). Utilize built-in escaping features of your template engine and avoid rendering untrusted data directly.",
      "examples": [
        {
          "input": "<%= userInput %>",
          "output": "EJS escapes the output by default, mitigating XSS risks."
        }
      ]
    },
    {
      "name": "Utilize Partials for Reusability",
      "description": "Break down templates into smaller, reusable partials to promote code reuse and simplify maintenance.",
      "examples": [
        {
          "input": "<%- include('partials/header') %>\n<h1>Welcome</h1>\n<%- include('partials/footer') %>",
          "output": "Header and footer partials are included in the main template."
        }
      ]
    },
    {
      "name": "Use Template Inheritance",
      "description": "Leverage template inheritance features to create base templates that can be extended by other templates, ensuring consistency and reducing duplication.",
      "examples": [
        {
          "input": "extends layout\nblock content\n  h1 Welcome",
          "output": "A Pug template extends a base layout and defines a content block."
        }
      ]
    },
    {
      "name": "Keep Templates Simple",
      "description": "Avoid embedding complex logic within templates. Keep them focused on presentation, and handle logic in your application code.",
      "examples": [
        {
          "input": "<% if (user.isAdmin) { %>\n  <a href='/admin'>Admin Panel</a>\n<% } %>",
          "output": "Simple conditional logic is used in the template to display the admin panel link."
        }
      ]
    },
    {
      "name": "Test Templates Thoroughly",
      "description": "Regularly test your templates to ensure they render correctly and handle data as expected. This helps identify and fix issues early in the development process.",
      "examples": [
        {
          "input": "const request = require('supertest');\nconst app = require('../app');\n\ndescribe('GET /', () => {\n  it('should render the homepage', (done) => {\n    request(app)\n      .get('/')\n      .expect(200, done);\n  });\n});",
          "output": "A test case verifies that the homepage renders successfully."
        }
      ]
    }
  ]
}