Introduction

Today we’re going to show you how to change your default view engine in Express from Jade to Handlebars, then we’ll make a sample Handlebars view to ensure our switch was successful. If you are unsure of what Express or Jade are please review Get Up & Running on Windows with Node.js & Express.

Changing The Engine

Our first step in changing the view engine of Express is to install the Handlebars module utilizing npm (Node Package Manager). To do this open up your cmd prompt or terminal and type the following within your app’s directory:

You should see the package installing, and you can navigate to the node_modules directory to confirm the install after it finishes. Make sure that your package.json file has jade version starred out:

Now we need to open our app.js file and delete the following line:

And add these:

These lines create the Handlebars engine as a native Express templating engine, and set it as the view engine for the Express app.

Creating A View

We’re just going to replicate the default Express view for the purpose of this tutorial, so head over to the views directory and delete all the jade files, when you’re finished create a new file called index.handlebars and type the following:

Conclusion

Now, if you left your default routers within the app.js file and the index.js file, we’ll have the same page as the default Express jade view, but rendered using Handlebars! For more about Handlebars visit their site.