trying to render html files using jade but it still adresses it as a jade

Question

i have read theses two posts regrading my issue:

    http://stackoverflow.com/questions/4529586/render-basic-html-view-in-node-js-express
http://stackoverflow.com/questions/12046421/how-to-configure-express-js-jade-to-process-html-files

and my code is as follows:

app.engine('.html', require('jade').__express);
app.set('views', __dirname + '/app/views');
app.set('view engine', 'html');

it is clear that for some reason it is trying to read index as if it was still a jade file and thus i am getting the error. i believe i configured it correct to server a .html file. what is the problem here? i am getting lost...

i have tried to reorder the lines but still same error.

but for some reason i get this error:

Error: ....\views\index.html:4
    2| <html lang="en" ng-app="squashApp">
    3| <head>
  > 4|   <meta charset="utf-8">
    5|   <title>Squash Organizer</title>
    6|   <link rel="stylesheet" href="css/app.css"/>
    7|   <link rel="stylesheet" href="css/bootstrap.css"/>

unexpected token "indent"
    at Object.Parser.parseExpr (C:\Users\workspace\squash\node_modules\jade\lib\parser.js:241:15)
    at Object.Parser.parse (C:\Users\workspace\squash\node_modules\jade\lib\parser.js:133:25)
    at parse (C:\Users\workspace\squash\node_modules\jade\lib\jade.js:93:62)
    at Object.exports.compile (C:\Users\workspace\squash\node_modules\jade\lib\jade.js:156:9)
    at Object.exports.render (C:\Users\workspace\squash\node_modules\jade\lib\jade.js:210:15)
    at Object.exports.renderFile (C:\Users\workspace\squash\node_modules\jade\lib\jade.js:247:18)
    at View.exports.renderFile [as engine] (C:\Users\workspace\squash\node_modules\jade\lib\jade.js:232:21)
    at View.render (C:\Users\workspace\squash\node_modules\express\lib\view.js:76:8)
    at Function.app.render (C:\Users\workspace\squash\node_modules\express\lib\application.js:505:10)
    at ServerResponse.res.render (C:\Users\workspace\squash\node_modules\express\lib\response.js:756:7)

thanks.

If you don't want to use jade, have you tried just removing the `app.engine('.html', require('jade').__express);` line? — George, Aug 13 '13 at 13:42
Why are you trying to render .html file? It is supposed to be static not dynamic. Either use `express.static` or send the file as is. — user568109, Aug 13 '13 at 18:12

soulcheck · Answer 1 · 2013-08-13T13:58:15.943

With this line:

app.engine('.html', require('jade').__express);

You told express to render templates ending with .html using jade.

With this one:

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

you told express that it should interpret template names without extension as ones ending with html.

So my guess is that you're trying to render 'index', express interprets it as index.html and then passes to jade as it was instructed to do.

It's better to map jade to it's own extentension (.jade is an obvious candidate). And render your index.html using it's full name.

Add consolidate.js to your project:
```
var engines = require('consolidate');
```

Tell jade to render stuff ending with .jade.

app.engine('jade', require('jade').__express);

Register simple html renderer for stuff ending with .html:

app.engine('html', function(str, options) {
   return function(locals) {
       return str;
   };
});

Tell express to render templates with no extension as jade:
```
app.set('view engine', 'jade');
```

Use this to render your index:

res.render('index.html');

and this:

res.render('view-name-without-extension');

to render jade template.

i didn't really understand what should i do. could you further explain please? — lobengula3rd, Aug 13 '13 at 13:47
You have to run "npm install Consolidate". Resulting edit on my end, tested .. `/* further up */ var engines = require('consolidate'); /* then later */ app.engine('jade', require('jade').__express); app.engine('html', function(str, options) { return function(locals) { return str; }; }); app.set('view engine', 'jade'); app.use(express.static(path.join(__dirname, 'public')));` — Jon Davis, Dec 23 '13 at 04:05

score 1 · Answer 2 · edited Jun 26 '15 at 21:00

By Default express takes Jade template engine. Your app.js should look like this.

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade'); // <<<---- CHANGES FROM EJS TO JADE !!!
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

The only thing different here is the switch from ejs to Jade, correct? — Keon, Jun 26 '15 at 18:54

trying to render html files using jade but it still adresses it as a jade

2 Answers2

Linked