View Logic – Node Style

I’m currently in the middle of a Node investigation. Here was the list of my requirements:

  1. I need to be able to run a small web server
  2. I need to be able to handle templated views with server-side code
  3. I need to be able to do social authentication
  4. I need to be able to use an MVC architecture
  5. I need to be able to provide a Web API
  6. I need to be able to publish a node app to Azure
  7. I need to be able to edit node applications in Visual Studio 2015

I started the process in the last article by installing NodeJS and writing a simple web server that served static content. I want to use a rendering engine on the server side to generate some views – the V part of an MVC architecture. That’s the subject of todays article.

Express has a favorite – Jade – and I don’t like it. I’m looking for something more akin to the Razor cshtml files in ASP.NET, and I believe I found it in EJS. It takes your HTML, embeds Server-side Javascript, renders the resulting HTML and sends it to the client.

There are a lot of view template engines for Express. With ASP.NET, you pretty much have Razor. Sure – there are likely others, but Razor has the lions share of the attention to the point that it’s pretty worthless to discuss anything else. Not so in Node. There are a lot of templating engines. I looked for one that was easy to configure and closest to what Razor supplies. If you like something else, go for it.

Step 1: Include EJS as a library

Just like express, ejs comes in with a library and I need to use npm install to bring it in. I also want to support layout files (which is a concept from ASP.NET again) – that is provided by the express-partials library, so I’ll install that as well:

npm install --save ejs express-partials

This command will also add the libraries to your package.json file.

Step 2: Wire up EJS as the View Renderer

I also need to tell Express to use EJS as the view renderer. This is done in my index.js file:

var express = require("express");
var partials = require("express-partials");
var ejs = require("ejs");

var app = express();

// Set Express to use the EJS view engine
app.engine("html", ejs.renderFile);
app.set("view engine", "html");

// Set up express to use layouts

// Anything under /client is served as a static file
app.use("/client", express.static("client"));

app.get("/", function(req, res) {
  res.render("index", {
    title: "Index Page (from index.js)"

var server = app.listen(3000, function() {
  var port = server.address().port;
  console.log("Listening on http port %d", port);

I’ve changed four things here. Firstly, I’ve brought in the ejs and express-partials libraries at the top. Secondly, I’ve set the view engine to be ejs. This is always done in two steps. Specify that a certain extension (in my case – “.html”) is to use a specific rendering technology (in my case the ejs file renderer), and then specify that the default view engine is to use that extension. In other words “when I ask for a .html file to be rendered, pass it through the EJS renderer”. My third change is to configure express-partials – this is the fancy express library term for using layout controls. Finally, I’ve altered the app.get line for the home page route to render a view called index and passed it an object with information that I can use in the rendering.

Step 3: Write a Layout

The views are stored in the views directory, unless you change it. EJS looks for a special file called layout.html (it’s .html because I changed the extension when I added the rendering engine – otherwise, it would be layout.ejs). Here are the contents:

<!DOCTYPE html>
  <meta charset="utf-8">
  <title><%= title %> | Basic WebApp</title>
  <%- body %>

In an ideal world (and we strive for ideal), the title will be replaced by the title property of the object passed into the res.render() method, and the body will be replaced by the contents of our actual view. Speaking of which, I need to write a views/index.html view. Here are the contents:

<h1>Hello World from EJS views/index.html</h1>

You can run the server at this point using node index.js and browse to http://localhost:3000 – this should give you what you expect. Bring up the F12 Developer Tools and check out the HTML – make sure the layout.html is combined with the index.html.

In learning about EJS, I like that the syntax closely resembles the ASP.NET Razor logic – minus the shift across to Javascript. This was also a lot closer to the ideal of having control over the HTML rather than delegating that to code I didn’t write (like Jade or Handlebars, for instance). I may be overanalyzing this somewhat and Jade may be fantastic, but I liked how simple this was.

You can find the resulting code from this experiment on my GitHub Repository.