ExpressHow-ToBeginner · 4 min read

How to Use Handlebars with Express: Simple Setup Guide

To use handlebars with express, install the express-handlebars package, set it as the view engine with app.engine and app.set('view engine', 'handlebars'), then create .handlebars template files in the views folder to render dynamic HTML.

📐

Syntax

Here is the basic syntax to set up Handlebars with Express:

import express from 'express': Import Express framework.
import { engine } from 'express-handlebars': Import Handlebars engine.
app.engine('handlebars', engine()): Register Handlebars as the template engine.
app.set('view engine', 'handlebars'): Tell Express to use Handlebars for rendering views.
app.set('views', './views'): Specify the folder where templates live.
res.render('templateName', data): Render a Handlebars template with data.

javascript

import express from 'express'
import { engine } from 'express-handlebars'

const app = express()

app.engine('handlebars', engine())
app.set('view engine', 'handlebars')
app.set('views', './views')

app.get('/', (req, res) => {
  res.render('home', { title: 'Welcome', message: 'Hello from Handlebars!' })
})

app.listen(3000, () => console.log('Server running on http://localhost:3000'))

💻

Example

This example shows a complete Express app using Handlebars to render a simple page with a title and message.

Create a views/home.handlebars file with HTML and Handlebars placeholders.

javascript

import express from 'express'
import { engine } from 'express-handlebars'

const app = express()

app.engine('handlebars', engine())
app.set('view engine', 'handlebars')
app.set('views', './views')

app.get('/', (req, res) => {
  res.render('home', { title: 'Welcome', message: 'Hello from Handlebars!' })
})

app.listen(3000, () => console.log('Server running on http://localhost:3000'))

// views/home.handlebars content:
// <html>
// <head><title>{{title}}</title></head>
// <body>
//   <h1>{{title}}</h1>
//   <p>{{message}}</p>
// </body>
// </html>

Output

<html> <head><title>Welcome</title></head> <body> <h1>Welcome</h1> <p>Hello from Handlebars!</p> </body> </html>

⚠️

Common Pitfalls

Forgetting to install express-handlebars with npm install express-handlebars.
Not setting the view engine with app.set('view engine', 'handlebars') causes Express to not recognize templates.
Placing template files outside the views folder or misnaming them (must end with .handlebars).
Using res.sendFile instead of res.render to render templates.
Not restarting the server after adding or changing templates.

javascript

/* Wrong way: Missing view engine setup */
import express from 'express'
const app = express()
app.get('/', (req, res) => {
  res.render('home') // Error: no view engine set
})

/* Right way: */
import express from 'express'
import { engine } from 'express-handlebars'
const app = express()
app.engine('handlebars', engine())
app.set('view engine', 'handlebars')

📊

Quick Reference

Remember these key steps to use Handlebars with Express:

Install express-handlebars.
Register Handlebars engine with app.engine.
Set view engine to handlebars.
Put templates in views folder with .handlebars extension.
Use res.render('template', data) to render pages.

✅

Key Takeaways

Install and import express-handlebars to use Handlebars with Express.

Set Handlebars as the view engine using app.engine and app.set.

Place your .handlebars templates inside the views folder.

Use res.render to send dynamic HTML pages rendered by Handlebars.

Restart your server after template or code changes to see updates.