How to Use EJS in Express
Update: If you’re starting a fresh project with Express it’s much easier to just run
express --ejs. That will scaffold out an Express app for you with EJS ready to go!
Here’s a quick explanation of how to use EJS instead of Jade in your Express projects. This is super easy and covered well in the documentation but I wanted to put it here since that’s what I worked on today :)
To start I’ll create a new project from the command line:
Now that I have my foobar project created I need to install
If you’re within your project directory this will place ejs in the
node_modules dir. Let’s also add it to our package.json.
The tilde operator means that we require ejs verion 0.7.1 or greater but only up to the next major release. So the following are equivalent:
"~1.2" = ">=1.2.0 <2.0.0". For a deeper explanation of package.json and NPM in general checkout this great post.
Leaving Jade for EJS
If you’re using the boilerplate that Express generates then it should be setup to use Jade as the rendering engine for its views. I think that Jade is cool but I need to baby step into Node/Express and make sure I understand everything that’s going on instead of trying to consume so many different tools at once. With this in mind I decided to switch from Jade to EJS at least in the beginning because the syntax has no learning curve. To change your rendering engine you’ll need to either add or edit the following call:
The boilerplate should have this set to
jade inside of a configuration block. Once we’ve changed that line to read
ejs we’re ready to start writing some views.
Setting up your layout
By default Express’ boilerplate will look for a file named layout in our views directory. Let’s write one called
This is all really straightforward with the exception of the
<%- body %> line which basically works like a
yield in erb. Whatever template we pass to Express’
response.render() function will fill this dependency, here’s an example:
Furthermore we can use partials with Express and EJS like so:
And there ya go! Simple but hopefully useful if you’re just getting started like I am :) - Rob
You should follow me on Twitter here.
- Mood: Eager, Alert
- Sleep: 7
- Hunger: 7
- Coffee: 0