Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Using HTML view templates in Express JS framework

Posted: February 22, 2015
Written by: Saints At Play
Category: Express JS

One of the great things about working with the MEAN stack (MongoDB, Express JS, AngularJS and Node - for those not in the know!) is its relative simplicity: JavaScript is the common thread tying all the components of the stack together, so the learning curve is relatively shallow.

One of the worst things? Jade templates.

Seriously.......Jade sucks.

Here's how to get the Express framework to use HTML templates instead.

It's all in the rendering

Thankfully, due to the amazing community of developers surrounding and contributing to Node, we can implement HTML views for our Express Apps using EJS (Embedded JavaScript), which is an open-source templating language written in JavaScript. This is available as a node module which can be installed directly into our project(s) straight from the command line.

To do this open up your console, navigate to the root of your Express JS project directory and issue the following command:

npm install ejs --save

Note that we use the --save flag, when installing node modules, to write the dependency to our package.json file.

Hopefully the installation proceeded smoothly and you should see an ejs sub-directory now located in your projects node_modules directory.

Now that we have successfully installed EJS we want to instruct the Express framework to no longer use Jade as the engine for rendering view templates. This involves opening and making some minor changes to the app.js file in the root of your project directory.

Locate the following lines in your app.js file:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());

Now replace (or comment out) the following line that instructs Express JS to use Jade as the template rendering engine:

app.set('view engine', 'jade');

With the following call to implement EJS for rendering view templates instead:

app.set('view engine', 'ejs');

With this minor modification we can now start to use HTML inside our view templates (and it didn't take much in the way of configuration did it?)

Creating a view

In your project views directory create a file named index.ejs for your application's home page and enter the following content for this view:

<h2><%= heading %></h2>
<p><%= welcome %></p>

This file contains 2 placeholder tags with variables titled heading and welcome. These placeholder variables will be populated with data from the project default route (just to demonstrate how data can be passed to and rendered into a HTML template).

These placeholder tags use the <%= syntax to HTML escape the JavaScript data that will be rendered there.

Don't forget to save this file before we move on!

More details on the syntax options avilable for the EJS plug-in are available here.

Passing data to our view

As we are going to pass some data to the home page for our application we need to modify the default route being used by Express JS. To do this open up the /route/index.js file and locate the following section of code:

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

Let's make some amendments and populate this default route with data for our home page view:

router.get('/', function(req, res, next) 
{
  res.render('index', 
  { 
    heading   : 'Welcome', 
    welcome   : 'This is how easy it is to embed HTML inside Express Views'
  });
});

Save the file, go back to your console and, within the root of your project directory, start up your node app with the following command:

npm start

You should then see output akin to the following:

> nameOfYourAppDisplayedHere@0.0.0 start /Users/YourName/Sites/nameOfAppHere
> node ./bin/www

If so, your Node server is running! Now hit up the following address in your browser:

http://localhost:3000/

And, all being well, you should see your index view rendering like so:

Welcome

This is how easy it is to embed HTML inside Express Views

Goodbye Jade, hello HTML! :)

« Return to Posts

Comments

Gravatar
Saints At Play

April 11, 2015

Raja: The ReferenceError: ua is not defined typically means you are trying to call a JavaScript object that hasn't been created/defined. Somewhere in your JavaScript the ua object is not being initialised / being made available globally AND/OR the link to Google's Universal Analytics isn't being called (or hasn't been called before you try to use the ua object).

Hope this helps.

Gravatar
Raja

April 7, 2015

Bonjour ,
Dans mon projet je besoin d'appeler un objet de file.js à file.ejs.par ce que j'ai l'erreur suivant lors de execution ReferenceError: ua is not defined
pouvez- vous m'aider.
Merci d'avance

Gravatar
May

February 24, 2015

Hello, I wan to subscribe for this webpage to obtain most recent updates, therefore
where can i do itt please help.

Posting comments after three months has been disabled.