Sling Academy
Home/Node.js/Express + Handlebars: Passing variables back and forth

Express + Handlebars: Passing variables back and forth

Last updated: January 18, 2024

Introduction

Handlebars is a popular templating engine that can be integrated with Express, a Node.js web application framework. When developing web applications, a common task is passing data from the server to the client and vice versa. This tutorial will cover the essentials of transferring variables between Express and Handlebars templates, enhancing the interactivity of your web pages.

Getting Started with Express and Handlebars

Before diving into data passing, ensure Node.js is installed. Then, set up a new Express project and install the required packages:

$ mkdir express-handlebars-demo
$ cd express-handlebars-demo
$ npm init -y
$ npm install express express-handlebars body-parser

Here’s a simple server setup:

const express = require('express');
const exphbs  = require('express-handlebars');
const bodyParser = require('body-parser');

const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get('/', (req, res) => {
    res.render('home');
});

app.listen(3000, () => {
    console.log('The web server has started on port 3000');
});

Passing Variables from Express to Handlebars

To pass data from Express to a Handlebars template, include an object as the second argument to the render method:

app.get('/', (req, res) => {
    res.render('home', {
        user: 'John Doe',
        age: 30
    });
});

In your Handlebars template, you can then use the passed variables:

{{! home.handlebars template }}
<h1>Welcome, {{user}}!</h1>
<p>You are {{age}} years old.</p>

Forms and POST Requests

To collect user input, forms are used with POST requests:

{{! home.handlebars template }}
<form method="POST" action="/submit">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

Handle the submission on the server:

app.post('/submit', (req, res) => {
    const username = req.body.username;
    res.render('response', {
        username: username
    });
});

Query Parameters and GET Requests

GET requests can carry data via query parameters. Handle this in Express and send the data to Handlebars:

app.get('/user', (req, res) => {
    const name = req.query.name;
    res.render('user', { name: name });
});

Accessing the data in the Handlebars template is straightforward:

{{! user.handlebars template }}
<p>Hello, {{name}}!</p>

Using Partials

Handlebars partials allow the reuse of common template parts:

{{! partials/header.handlebars }}
<header><h1>My Website</h1></header>

// Registering partials
app.engine('handlebars', exphbs({
    defaultLayout: 'main',
    partialsDir: __dirname + '/views/partials/'
}));

Using a partial in a template:

{{! home.handlebars template }}
{{> header}}
...
{{/user}}
// Note the user block is rendered where the {{/user}} call is.

Passing Variables from Handlebars to Express

Passing variables back to Express from a template is done with forms or AJAX requests. For example, here’s how to capture data with AJAX:


<script>
function submitData() {
  const data = {
    user: document.getElementById('user').value,
  };

  fetch('/api/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  .then(response => response.json())
  .then(data => console.log(data));
}
</script>

On the Express side, receive and use the data:

app.post('/api/data', (req, res) => {
  console.log('Data received:', req.body);
  res.json({ status: 'success', data: req.body });
});

Conclusion

This brief walkthrough covers the basic interactions between an Express server and Handlebars templates. By mastering the flow of data between the client and server, you can create dynamic and responsive web applications that engage users effectively.

As an additional resource, consider looking at the documentation for Express and Handlebars to better understand available features that can augment your application’s functionality.

Remember, practice makes perfect, so keep experimenting and developing your skills!

Next Article: Express + Handlebars: How to Include Subviews

Previous Article: Node.js + Express: How to return text files

Series: Node.js & Express Tutorials

Node.js

You May Also Like

  • NestJS: How to create cursor-based pagination (2 examples)
  • Cursor-Based Pagination in SequelizeJS: Practical Examples
  • MongooseJS: Cursor-Based Pagination Examples
  • Node.js: How to get location from IP address (3 approaches)
  • SequelizeJS: How to reset auto-increment ID after deleting records
  • SequelizeJS: Grouping Results by Multiple Columns
  • NestJS: Using Faker.js to populate database (for testing)
  • NodeJS: Search and download images by keyword from Unsplash API
  • NestJS: Generate N random users using Faker.js
  • Sequelize Upsert: How to insert or update a record in one query
  • NodeJS: Declaring types when using dotenv with TypeScript
  • Using ExpressJS and Multer with TypeScript
  • NodeJS: Link to static assets (JS, CSS) in Pug templates
  • NodeJS: How to use mixins in Pug templates
  • NodeJS: Displaying images and links in Pug templates
  • ExpressJS + Pug: How to use loops to render array data
  • ExpressJS: Using MORGAN to Log HTTP Requests
  • NodeJS: Using express-fileupload to simply upload files
  • ExpressJS: How to render JSON in Pug templates