I use "express": "^4.14.0", "pug": "^2.0.0-beta6"
app.set('view engine', 'jade');
...
app.get('/', function (req, res) {
res.render('index.pug', {...});
}
When I use Express render function, it renders a template just once. If I change pug-template I'll get an old page version based on an already compiled template. For dev purposes, I need express recompiling .pug template for every render call. How can I achieve this?
I tried something like:
app.disable('view cache'); OR
app.set('view cache', false); OR
app.set('view cache', 'disabled');
But none of those were helpful.
Disappointing, but working:
const pug = require('pug');
const path = require('path');
res.send(pug.renderFile(path.join(__dirname,'template.pug'), templateObj));
Related
In many code examples for ejs, I see code like this:
// ...
const ejs = require('ejs');
// ...
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
res.render('index');
});
// ...
But it seems like the constant ejs is never used. Then what's the purpose of requiring it?
It doesn't seem to make any difference when I choose to require or not requiring ejs.
We can set ejs template by using: app.set('view engine', 'ejs');
And here we don't require any ejs import.
But situation can come where you to have render some ejs file and then pass on data and do some stuff with this template, then in those scenario you have to require ejs and then use its methods for it. For example:
// Template example for ejs:
const ejs = require('ejs');
ejs.renderFile(
path.join(__dirname, '../../views/pages/your_ejs_file.ejs'),
your_data,
);
That's just one use case.
https://www.npmjs.com/package/ejs
You are setting the EJS Template Engine by:
app.set('view engine', 'ejs');
But you can also use the ejs for performing caching operation like:
const ejs = require('ejs'),
const LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit
EJS is used to cache the JS function used to render templatees. And if want to clear the EJS caache you can simply call the ejs.clearCache. This is just an example but you can use ejs in many ways. More about Ejs
I am not able to use Swig templates with Express for Node.
I get the following error :
Error: Failed to lookup view "index" in views directory
The Swig templates are not being compiled into .html files
My code is below :
var express = require('express');
var cons = require('consolidate');
var swig = require('swig');
var app = express();
//Set template engine
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/views')
// Disable Express's and Swig Cache
app.set('view cache', false);
swig.setDefaults({ cache: false });
app.get('/', function(req, res){
res.render('index', {'title': 'Design'});
});
app.listen(3000);
I just had the same issue. In order to use swig templates with the swig extension working you can follow the swig Docs and then replace the two following lines with
app.engine('html', cons.swig);
app.set('view engine', 'html');
with
app.engine('swig',swig.renderFile);
app.set('view engine', 'html');
Should look something like this.
var express = require('express');
var swig = require('swig');
var app = express();
// view engine setup
// This is where all the magic happens!
app.engine('swig', swig.renderFile);
app.set('view engine', 'swig');
app.set('views', path.join(__dirname, 'views'));
app.set('view cache', false);
swig.setDefaults({ cache: false });
Expressjs 4.x docs app.engine
The app.engine takes a extension and a callback. So to all files found with the swig extension have a callback of swig.renderFile. Each file with generated to HTML.
Expressjs 4.x docs app.set
Setting the view engineto swig is setting the default engine extension to use when omitted. Were also saying that all the views can be found in the /blaha/blaha/blah/views directory.
NOTE: All files in the views directory must end int .swig.
So just a friendly reminder make sure when you "include" or reference another template you must put the filename and extension it the path. ex: layout.swig. I hope this gets your project working.
As explained here:
http://mherman.org/blog/2015/08/23/primer-on-swig-templating/#.VhWxVvlVhBc
Simply use .html files instead of .swig files. I don't know where you got the idea of using .swig files. Maybe an older version? I dunno. The current Swig's documentation Basic Usage shows using a .html file as well:
http://paularmstrong.github.io/swig/docs/
If you rename your index.swig to index.html I would expect it to work fine.
Yes, i think it's more semantic to store your templates as .swig files, if you using SWIG as template engine. So, all you need is set 'swig' as engine:
// view engine setup
app.engine('swig', swig.renderFile);
app.set('view engine', 'swig');
app.set('views', path.join(__dirname, 'views'));
Then you can store your views like ./views/layout.swig
for latest version of swig we need to include swig package which needed to installed through package manager or package.json file
var express = require('express');
var swig = require('swig');
var app = express();
// Here we need to set up and engine as per latest version of swig
//for latest version of swig we need to include swig package which //needed to installed through package manager or package.json file
app.engine('swig', swig.renderFile);
app.set('view engine', 'swig');
app.set('views', path.join(__dirname, 'views'));
app.set('view cache', false);
swig.setDefaults({ cache: false });
//Here we are setting cache defaults to false.
`
I have a test node.js server running the following code:
var app = require('express')();
app.set('views', __dirname + '/public');
app.set('view engine', 'jade');
app.get('/', function(req, res) {
res.render('index.jade', {name: "Test data."});
});
app.listen(3000);
This code works find. I'm wondering what the best practices are for choosing a .jade file based upon the url without hard-coding it, kind of like you might for html files using express.static. Of course, I don't want there to be a direct path correlation either (instead assigning different routes to different directories or groups of directories.) There doesn't seem to be a whole lot of solid information on the subject. Anything would be helpful. Thanks.
with utilization of splats you could do something like this:
var app = require('express')();
app.set('view engine', 'jade');
// /foo/Sam/path/to/view.jade yield a rendering of 'path/to/view.jade' with name: 'Sam'
app.get('/foo/:name/*.*', function(req, res) {
res.render(req.params.join('.'), {name: req.params.name});
});
app.listen(3000);
How can I use a subfolder for my 'views'?
In the main 'app.js' I've set the root folder for the views like so:
app.configure(function(){
app.set('view engine', 'jade');
app.set('views', __dirname + '/apps' );
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(__dirname + '/apps' ));
app.use(app.router);
});
And my controller loos like this:
module.exports = function(req, res, base) {
res.render( 'hello/views/');
};
The folder looks like this:
./apps/hello/views/index.js
But still it can't find it. "ERROR: Failed to lookup view "hello/views"
Thanks!
Actually, I made a vastly better solution.
In the app configuration I just set the default view like so:"
app.set('view engine', 'jade');
app.set('views', __dirname + '/views');
Later on I inlcude a boot.js (based on the mvc example of expressjs ) in which I include the following:
// allow specifying the view engine
if (obj.engine) app.set('view engine', obj.engine);
app.set('views', __dirname + '/../apps/' + name + '/views');
This will override the view folder to the one specified in the folder 'apps/xxx/views' and will even allow you to specify a new viewtype in the root of that folder like so:
// filename = /apps/hello/index.js
exports.engine = 'jade';
// Render the indexpage
exports.index = function(req, res, next){
res.render('hello');
};
I am surprised that your self answer works, since you should be telling express to render a particular view, and hello/views is a folder. However I'm not familiar with the code pattern you're using for your controller (the base argument is what's throwing me off, since Express middleware uses function(req,res,next).)
My routes look like this:
app.set('views', __dirname + '/apps' );
...
app.get('/hello', function(req,res){
res.render('hello/views/index')
});
In this case ./apps/hello/views/index.jade is a jade file, not a javascript file. If your templates are javascript, perhaps you should set view engine to something other than jade.
You can set views as array of paths
app.set('views', [path.join(__dirname, 'views/users/'), path.join(__dirname, 'views')])
You can check the resulting paths using app.get('views'); which should return an array.
[/server/views/users/, /server/views]
Express will search through the array for available paths. You can then render with just the file name like this
res.render( 'index');
res.render( 'profile');
I fixed this problem by setting the basis view to the root of the directory like so:
app.set('views', __dirname);
And the added the folders from the root on in the controller like so:
res.render( 'apps/hello/views/');
I'm going to keep this short, I'm just trying to render a jade template using express js.
I'm using express 3.0.0rc5 and jade 0.27.6.
Here's my jade templates, the layout:
// test-layout.jade
doctype 5
html
head
title My title
block head
body
#content
block content
And the index:
// test-index.jade
extends test-layout
block head
script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js")
block content
h1 My page
Here's some excerpts from app.js:
var app = express();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.get('/test-jade', function(req, res) {
res.render('test-index', {}, function(err, html) {
});
});
app.get('/test', function(req, res) {
res.send('this works');
});
Now whenever I try to go to http://myurl.com/test-jade the browser just hangs and timesout without showing any output in the console (even though I'm in dev mode).
However when I go to http://myurl.com/test I see 'this works'.
I feel like I'm missing something really simple here, I'm currently upgrading from 2.5 to 3.0.
Thanks in advance if anyone has advice.
Is it the blank call back?
res.render('test-index', {}, function(err, html) {
});
In my app I'm using
res.render('test-index', {});