Using HTML in Express instead of Jade

Question

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.

score 82 · Answer 1 · edited Jul 01 '17 at 21:03

82

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.

edited Jul 01 '17 at 21:03

mustaccio

18,234
16
48
57

answered Mar 01 '14 at 15:11

Biwek

994
1
8
8

2

I have just started using node.js. The solution is not clear to me. I have a small html website. I need node.js for the sending emails through my site using nodemailer. I have installed everything required. However, have to idea what should go in the app.js file to make my website run using express – user2457956 Apr 10 '16 at 18:11
4

How to print the variable `title` in html file ? – Master Yoda Oct 29 '16 at 17:23
4

If anyone is still wondering how to print the variable, like @MasterYoda asked, you can print it like this on the html: <%= title %> – Lucas Meine Sep 20 '17 at 21:32

score 62 · Answer 2 · edited Dec 13 '16 at 07:43

62

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.

edited Dec 13 '16 at 07:43

Community

1
1

answered Oct 14 '13 at 19:43

Martin Sookael

797
6
5

7

Doctype 5 is now deprecated. Use " doctype html " as the first line. – snorkelzebra May 27 '15 at 20:38
Docs for the dot: https://pugjs.org/language/plain-text.html#block-in-a-tag – Alexander Taubenkorb Dec 10 '17 at 17:00

laconbass · Answer 3 · 2013-12-16T12:06:09.067

19

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.

edited Dec 16 '13 at 12:06

answered Dec 14 '13 at 05:35

laconbass

17,080
8
46
54

2

I believe the OP still wants to use some kind of templating, just with regular HTML syntax. `sendfile` does not allow you to do any templating since it just sends bytes from a file. Further, I would recommend against using `sendfile` like this because it means you'll be hitting the disk every time a request comes in -- a huge bottleneck. For high-traffic pages, you should really do in-memory caching. – josh3736 Dec 14 '13 at 17:22
1

@josh3736 if your're right about the OP intention, the question should be improved. You're right about hitting the disk on each request, i'll improve my answer to warn about this fact. Please consider improving yours to warn about the following: if you implement a customized engine you must implement too the catching feature (if desired), it's not handled by express. – laconbass Dec 16 '13 at 12:01

kevin.groat · Answer 4 · 2014-05-23T16:44:36.417

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');

score 10 · Answer 5 · edited Mar 07 '14 at 05:50

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, your app.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.

Please take a look at my answer, yours perfectly explains how to register template engines but there is a much easier way to transfer plain html files. — laconbass, Dec 14 '13 at 05:40
@josh3736 : Your "extremely fast" hyperlink works in Firefox 41, but fails to run tests in Chromium Version 45.0.2454.101 Ubuntu 14.04 (64-bit). I wonder why. — Lonnie Best, Oct 22 '15 at 14:03

score 4 · Answer 6 · answered Mar 30 '13 at 16:41

4

You can use EJS with express which templates are HTML but support variables. Here is a good tutorial in how to use EJS in express.

http://robdodson.me/blog/2012/05/31/how-to-use-ejs-in-express/

answered Mar 30 '13 at 16:41

Pablo Vallejo

201
4
5

score 4 · Answer 7 · answered Feb 14 '16 at 20:20

To make the render engine accept html instead of jade you can follow the following steps;

Install consolidate and swig to your directory.

 npm install consolidate
 npm install swig

add following lines to your app.js file

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', ‘html');

add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.

Though this will render html without any issue, I would recommend you to use JADE by learning it. Jade is an amazing template engine and learning this will help you achieve better design & scalability.

The only really big problem with Jade is the indentation. If you get it wrong, code won't compile. Also, i wonder why Jade other than the fact that the only thing it does is shrink code... — zapper, Jun 18 '16 at 14:12

score 4 · Answer 8 · answered Nov 18 '18 at 02:20

4

first check the compatibility version of template engine by using below line

express -h

then you have to use no view from the list.select no view

express --no-view myapp

now you can use your all html,css,js and images in public folder.

answered Nov 18 '18 at 02:20

Soubhagya Kumar Barik

1,979
20
26

score 3 · Answer 9 · answered Oct 11 '16 at 18:45

3

Well, it sounds like you want to serve static files. And there is a page for that http://expressjs.com/en/starter/static-files.html

Bizarre that nobody is linking to the documentation.

answered Oct 11 '16 at 18:45

S Meaden

8,050
3
34
65

"Bizarre that nobody is linking to the documentation" I agree it's a trivial matter to use a different view language in Express. – pixel 67 May 29 '17 at 10:21

score 1 · Answer 10 · answered Dec 26 '15 at 01:06

1

Considering you have your routes already defined or do know how to do it.

app.get('*', function(req, res){
    res.sendfile('path/to/your/html/file.html');
});

NOTE: this route has to be placed after all the others since * accepts everything.

answered Dec 26 '15 at 01:06

João Rodrigues

766
8
12

score 1 · Answer 11 · answered Feb 03 '16 at 19:37

1

since Jade supports HTML, if you just want to have .html ext, you can do this

// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

then you just change file in views from jade to html.

answered Feb 03 '16 at 19:37

Weijing Jay Lin

2,991
6
33
53

Don't you have to put a 'dot' or period before html markup? – Gus Crawford Sep 27 '16 at 22:15

score 1 · Answer 12 · answered Jun 07 '17 at 12:37

1

You can also directly include your html file into your jade file

include ../../public/index.html

Original answer: Express Generator Without Jade

answered Jun 07 '17 at 12:37

Priyanshu Chauhan

5,297
5
35
34

score -10 · Answer 13 · answered Jul 15 '12 at 21:25

-10

If you want to use plain html in nodeJS, without using jade.. or whatever:

var html = '<div>'
    + 'hello'
  + '</div>';

Personnaly i'm doing fine with that.

The advantage is simplicity when control. You can use some tricks, like '<p>' + (name || '') + '</p>', ternary .. etc

If you want an indented code in the browser, you can do:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

and use \t or \n at will. But i prefer without, plus it is faster.

answered Jul 15 '12 at 21:25

I'd like to be able to use HTML files in Express (vs plain Node.JS) – Sanchit Gupta Jul 15 '12 at 21:44
ooooohh sorry (i'm french :p), so you can use the `fs` module. `fs.readFile(htmlfile, 'utf8', function (err, file) {` – Jul 15 '12 at 21:54

Using HTML in Express instead of Jade

13 Answers13

As of express 3 you can simply use `response.sendFile`

Warning

Linked

Using HTML in Express instead of Jade

13 Answers13

As of express 3 you can simply use response.sendFile

Warning

Linked

As of express 3 you can simply use `response.sendFile`