NodeJS, ExpressJS and MustacheJS Template Engine

Posted on
By Addam Driver

nodejs

So while playing around with NodeJS, I was wondering what good template engine could be used. I’ve seen a few but they all required me to learn a new way of doing syntax n’ junk. Not all were very M.V.C. Friendly. After using Mustache in the past I remembered that it parses strings and not DOM elements. Sooo… that means I can bring in a file, parse it and spit it out to the page right?! YES!!

Here is a very scaled back way of using NodeJS, ExpressJS and Mustache JS to render full blown web pages as templates!

If you want to bypass the whole thing and just DOWNLOAD THE DEMO FILES HERE


FIRST, let’s create a simple html file (or any random file) inside of the same directory as the server.js file and call it “mypage.html”. You can always move it but it’s location is really just for this example. Feel free do move it where you want.


<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Basic Mustache & NodeJS Demo</title>
</head>
<body>
<ul>
{{#records}}
<li>Company: {{company}}</li>
<li>Due in charge: {{name}}</li>
<li>
<ul>
{{#systems}}
<li>{{os}}</li>
{{/systems}}
</ul>
</li>
{{/records}}
</ul>
</body>
</html>


SECOND, setup a simple node.js, server.js file (this is assuming you have node.js installed already). We want to add the FS (filesystem) API.


var fs = require('fs'); // require the filesystem api


INSTALL, you will want to install expressJS if you haven’t already. If you have not, from your console on the nodeJS server type in:

$ npm install express

That should kick off the install.


THIRD, You want to include expressJS into your server.js file to handle your http server and routing. In that, you will need to also use express.createServer(); to create the http server.


var express = require('express'), // bring in the the express api
var app = express.createServer();


INSTALL, you will want to install mustacheJS if you haven’t already. If you have not, from your console on the nodeJS server type in:

$ npm install mustache

That should kick off the install.


FOURTH,You want to include mustacheJS to the server.js file.


var mustache = require('mustache'); // bring in mustache template engine



Here is everything you should have in your server file SO FAR:

var express = require('express'); // bring in the the express api
var fs = require('fs'); // bring in the file system api
var mustache = require('mustache'); // bring in mustache template engine
var app = express.createServer(); // create the http server w/express



FIFTH, now let’s create some dummy data. I would recommend using MongoDB for this but for demo purposes, let’s use some static data shall we.

var demoData = [{ // dummy data to display
"name":"Steve Balmer",
"company": "Microsoft",
"systems": [{
"os":"Windows XP"
},{
"os":"Vista"
},{
"os":"Windows 7"
},{
"os":"Windows 8"
}]
},{
"name":"Steve Jobs",
"company": "Apple",
"systems": [{
"os":"OSX Lion"
},{
"os":"OSX Leopard"
},{
"os":"IOS"
}]
},{
"name":"Mark Z.",
"company": "Facebook"
}];


SIXTH, let’s add in the rest of the code… see the comments for what’s happening and get this baby running.

app.get('/app/:slug', function(req, res){ // get the url and slug info
var slug =[req.params.slug][0]; // grab the page slug
var rData = {records:demoData}; // wrap the data in a global object... (mustache starts from an object then parses)
var page = fs.readFileSync(slug, "utf8"); // bring in the HTML file
var html = mustache.to_html(page, rData); // replace all of the data
res.send(html); // send to client
});
app.listen(3000);// start the server listening
console.log('Server running at http://127.0.0.1:3000/'); // server start up message


CONGRATS!!, you’ve got a node server up, using express to route to a web page, bring it back parse with mustache and then kick it out to the client. Now all you have to do it hit your server with the SLUG as the file name. Example:

http://localhost:3000/app/mypage.html


Also if you want you can DOWNLOAD THE FILES HERE and go for it.

I hope this helps someone out there!
-A-


Tags: , , , , , , , , , , ,

Comments

  1. Curiouz says:

    Just a heads up, most of that code for the require.paths is to enusre using the specific version of the modules listed by having them included inside a project, rather than just pulling them in globally (libraries are changing node is growing are fair reasons to do this in production). If you install global libraries it can sometimes override the dependency for some things, however, most of the time npm can solve this issue if you do not want to check / use a specific version of a module.Unfortunately, the error that is being thrown is coming from the mongodb-native module not being installed, that is a prerequisite for mongoose. So, when it tries to compile mongoose, it dies inside of the compile since the mongodb module was not available globally.

Leave a Reply to Curiouz Cancel reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CSS Methods

HTML Goodies

JavaScript

mustache

node.js

The HTML Writers Guild IWA