TutorialsArena

Vash Template Engine for Node.js with Express.js

Discover how to integrate the Vash template engine with Express.js in Node.js. This guide covers installation steps and basic usage for dynamic HTML generation, inspired by ASP.Net MVC's Razor syntax.

Vash, inspired by ASP.Net MVC's Razor Syntax, simplifies dynamic HTML generation in Node.js applications. This guide provides a step-by-step approach to integrating Vash with Express.js.

Installation

  1. Open your terminal and navigate to your project directory.
  2. Install Vash using npm:
    3. Command
    
npm install vash --save

    This command saves Vash as a dependency in your package.json file.

Creating Vash Templates

  1. Create a folder named views to store your Vash templates.
  2. Inside views, create a file named index.vash with the following content:
    3. index.vash
    
<!DOCTYPE html><br>
  <html><br>
  <head><br>
    <title>@model.title</title><br>
  </head><br>
  <body><br>
    <p>@model.content</p><br>
  </body><br>
  </html>

    This template defines placeholders for title and content using @model.

Integrating Vash with Express.js

  1. Create a file named server.js in your project directory.
  2. Include the following code in server.js:
    3. server.js
    
const express = require('express');
const app = express();

// Set Vash as the view engine
app.set('view engine', 'vash');

app.get('/', (req, res) => {
    // Data for the template
    const data = {
        title: 'Vash Template Demo',
        content: 'This is a dummy paragraph.'
    };

    // Render the index template with data
    res.render('index', data);
});

const server = app.listen(5000, () => {
    console.log('Server is running on port 5000');
});

    This code sets Vash as the view engine for Express.js. The app.get route handler renders the index.vash template with the provided data object.

Running the Application

  1. In your terminal, run:
    2. Command
    
node server.js
  2. Open http://localhost:5000 in your browser to see the rendered HTML content.

Layout Pages

Vash allows you to create layout pages with reusable elements like headers and footers. Here's an example:

  1. Create a file named layout.vash in the views folder:
    2. layout.vash
    
<!DOCTYPE html><br>
  <html><br>
  <head><br>
    <title>@model.title</title><br>
  </head><br>
  <body><br>
    <header><br>
      <!-- Header content --><br>
    </header><br>
    @html.block('body')<br>
    <footer><br>
      <!-- Footer content --><br>
    </footer><br>
  </body><br>
  </html>

    This layout defines a body block where dynamic content from individual pages can be injected.

  2. Modify index.vash to extend the layout and inject content:
    3. index.vash
    
@html.extend('layout', function(model) {
    @html.block('body', function(model) {
        
    @model.title
    
        
    @model.content
    
    });
});

    Here, @html.extend specifies the layout page (layout.vash). Within the body block, the actual content is defined.

  3. Update server.js to render the modified index.vash:
    4. server.js
    
// ... other code ...
app.get('/', (req, res) => {
    res.render('index', { title: 'Vash Template Demo', content: 'This is a dummy paragraph.' });
});

    Now, the rendered page will include the layout's header and footer along with the dynamic content from index.vash.

Additional Notes

  • Vash offers features like helpers, filters, and partials for advanced scenarios.
  • Explore the official Vash documentation for detailed information and examples.

By following these steps and exploring Vash's capabilities, you can create efficient and maintainable web applications in Node.js with a familiar templating syntax.