how to use both ejs and jade in one nodejs & express project?
Asked Answered
M

2

5

I want to use ejs for partials and use jade for individual pages, how to use both in one nodejs & express project?

Microgamete answered 28/5, 2013 at 3:23 Comment(4)
I think this answer might help you: https://mcmap.net/q/463327/-is-there-any-way-to-use-multiple-view-engines-with-express-node-jsTattletale
Out of curiosity, why would you want to to do it?Verruca
For partials, just use handlerbars to replace variables is fast and enough, for complex pages, a powerful templating engine is needed. that depends. I 've figure it out and I will share itMicrogamete
Hey @HenryLeu can you share you wisdom please? Am willing to do the exact same thing.Countless
M
10

It 's easy to find the way in expressjs api docs and consolidate.js at github

Reference the express.js doc fragment below, please


app.engine(ext, callback)

Register the given template engine callback as ext By default will require() the engine based on the file extension. For example if you try to render a "foo.jade" file Express will invoke the following internally, and cache the require() on subsequent calls to increase performance.

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

For engines that do not provide .__express out of the box - or if you wish to "map" a different extension to the template engine you may use this method. For example mapping the EJS template engine to ".html" files:

app.engine('html', require('ejs').renderFile);

In this case EJS provides a .renderFile() method with the same signature that Express expects: (path, options, callback), though note that it aliases this method as ejs.__express internally so if you're using ".ejs" extensions you dont need to do anything.

Some template engines do not follow this convention, the consolidate.js library was created to map all of node's popular template engines to follow this convention, thus allowing them to work seemlessly within Express.

var engines = require('consolidate');
app.engine('haml', engines.haml);
app.engine('html', engines.hogan);
Microgamete answered 10/8, 2013 at 12:16 Comment(2)
But don't I need to use express.set('view engine', 'ext'); somewhere?Bombshell
@Bombshell Can you elaborate on this? I'm trying to get this to work and not sure if a default view engine is required when consolidate is used? I'm in the docs so a pointer to the ref would be appreciated if you have one. Thanks.Quail
T
4

This works for my:

  1. add pug and ejs as renders

index.js

const express = require('express');
const path = require('path');
const app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.set('view engine', 'ejs');
  1. call render with a filename.fileext.

routes/users

const express = require('express');
const router = express.Router();
router.get('/', function (req, res, next) {
  res.render('users.ejs');
});
module.exports = router;

routes/about

const express = require('express');
const router = express.Router();
router.get('/', function (req, res, next) {
  res.render('about.pug');
});
module.exports = router;
Trichomonad answered 24/2, 2018 at 9:9 Comment(4)
Thank you for bringing in the new name pug. I'm new to this stuff. Did you do any testing with consolidate.js? I think that is the route I need to take since I'm trying to provide a single variable to the front-end using ejs.Quail
i did test with mocha+assertTrichomonad
I looked at consolidate.js but best I could tell, it doesn't let me mix render approaches on a single page. Since I was already using PUG, I went the route of AJAX to get my data. Overkill....Quail
This is an updated answer, maybe the answer should be updated to this for correctnessPentathlon

© 2022 - 2024 — McMap. All rights reserved.