CODEWITHSUNDEEP
htmlnode.jsexpresspug
Sanchit Gupta
Sanchit Gupta

Reputation: 1293

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.

Upvotes: 108

Views: 89123

Answers (13)

Soubhagya Kumar Barik
Soubhagya Kumar Barik

Reputation: 2615

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.

Upvotes: 4

Biwek
Biwek

Reputation: 994

You can do it this way:

  1. Install ejs:

    npm install ejs

  2. Set your template engine in app.js as ejs

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

  3. Now in your route file you can assign template variables 

    // ./routes/index.js
exports.index = function(req, res){
res.render('index', { title: 'ejs' });};

  4. Then you can create your html view in /views directory.

Upvotes: 82

Priyanshu Chauhan
Priyanshu Chauhan

Reputation: 5545

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

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

Original answer: Express Generator Without Jade

Upvotes: 1

Martin Sookael
Martin Sookael

Reputation: 807

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.

Upvotes: 63

S Meaden
S Meaden

Reputation: 8270

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.

Upvotes: 4

AnandShanbhag
AnandShanbhag

Reputation: 7110

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

  1. Install consolidate and swig to your directory.

     npm install consolidate
 npm install swig

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

  3. 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.

Upvotes: 4

Weijing Jay Lin
Weijing Jay Lin

Reputation: 3238

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.

Upvotes: 1

Jo&#227;o Rodrigues
Jo&#227;o Rodrigues

Reputation: 794

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.

Upvotes: 1

kevin.groat
kevin.groat

Reputation: 1294

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

Upvotes: 16

josh3736
josh3736

Reputation: 145102

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.

Upvotes: 10

laconbass
laconbass

Reputation: 17824

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.

Upvotes: 19

Pablo Vallejo
Pablo Vallejo

Reputation: 201

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/

Upvotes: 4

user1255808
user1255808

Reputation:

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.

Upvotes: -10

Related Questions