Using HTML in Express instead of Jade
How to I get rid of Jade while using Express with Node.JS? I want to just use plain html. In other articles I have seen that people recommended app.register() which is now deprecated in the latest version.
You can do it this way:
-
Install ejs:
npm install ejs -
Set your template engine in app.js as ejs
// app.js app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); -
Now in your route file you can assign template variables
// ./routes/index.js exports.index = function(req, res){ res.render('index', { title: 'ejs' });}; Then you can create your html view in /views directory.
Jade also accepts html input.
Just add a dot to the end of line to start submitting pure html.
If that does the trick for you then try:
doctype html
html. // THAT DOT
<body>
<div>Hello, yes this is dog</div>
</body>
PS - No need to close HTML - that's done automagically by Jade.
As of express 3 you can simply use response.sendFile
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});)
From the official express api reference:
res.sendfile(path, [options], [fn]])Transfer the file at the given path.
Automatically defaults the Content-Type response header field based on the filename's extension. The callback
fn(err)is invoked when the transfer is complete or when an error occurs.
Warning
res.sendFile provides client-side cache through http cache headers but it does not cache file contents on server-side. The code above will hit the disk on each request.
In my opinion, using something as big as ejs just to read html files is a bit heavy-handed. I just wrote my own template engine for html files that's remarkably simple. The file looks like this:
var fs = require('fs');
module.exports = function(path, options, fn){
var cacheLocation = path + ':html';
if(typeof module.exports.cache[cacheLocation] === "string"){
return fn(null, module.exports.cache[cacheLocation]);
}
fs.readFile(path, 'utf8', function(err, data){
if(err) { return fn(err); }
return fn(null, module.exports.cache[cacheLocation] = data);
});
}
module.exports.cache = {};
I called mine htmlEngine, and the way you use it is simply by saying:
app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');
app.register() hasn't been depreciated, it has just been renamed to app.engine() since Express 3 changes the way template engines are handled.
Express 2.x template engine compatibility required the following module export:
exports.compile = function(templateString, options) { return a Function; };Express 3.x template engines should export the following:
exports.__express = function(filename, options, callback) { callback(err, string); };If a template engine does not expose this method, you're not out of luck, the
app.engine()method allows you to map any function to an extension. Suppose you had a markdown library and wanted to render .md files, but this library did not support Express, yourapp.engine()call may look something like this:var markdown = require('some-markdown-library'); var fs = require('fs'); app.engine('md', function(path, options, fn){ fs.readFile(path, 'utf8', function(err, str){ if (err) return fn(err); str = markdown.parse(str).toString(); fn(null, str); }); });
If you're looking for a templating engine that lets you use 'plain' HTML, I recommend doT because it is extremely fast.
Of course, keep in mind that the Express 3 view model leaves view caching up to you (or your templating engine). In a production environment, you probably want to cache your views in memory so that you aren't doing disk I/O on every request.