I would like to configure jade engine to handle .html files in my views folder. Here is my currentserver configuration:
app.configure(function(){
var pub_dir = __dirname + '/public';
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.session({ secret: nconf.get("site:secret") }));
app.use(everyauth.middleware());
app.use(require('less-middleware')({ src: pub_dir, force:true }));
app.use(express.static(pub_dir));
app.use(app.router);
app.use(logErrors);
app.use(clientErrorHandler);
app.use(errorHandler);
});
https://github.com/visionmedia/express/blob/master/examples/ejs/index.js
app.engine('.html', require('jade').__express);
Make sure you already have jade in your node_modules
npm install --save jade
In express 4.x, you can simply set the view engine to jade.
app.set('view engine', 'jade')
Related
The server find the views in "development" mode but not in "production" mode. Instead of the real views it shows me the 404 view.
For instance, with this route "/login":
It work : with development code (CASE 1), GET views/login.html provide the real login content
It doesn't work : with production code (CASE 2), GET views/login.html provide the content of my 404 view
In order to test in development mode both configurations, I just swith code manually. Here is some of my Express configuration:
// Express Configuration
app.configure('development', function(){
// CASE 2: PRODUCTION CONFIG TO TEST
app.use(express.favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + '/views');
/* CASE 1: REAL DEVELOPMENT CONFIG
app.use(require('connect-livereload')());
app.use(express.static(path.join(__dirname, '.tmp')));
app.use(express.static(path.join(__dirname, 'app')));
app.use(express.errorHandler());
app.set('views', __dirname + '/app/views');
*/
});
app.configure('production', function(){
app.use(express.favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + '/views');
});
app.configure(function(){
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
// Router needs to be last
app.use(app.router);
});
// Controllers
var api = require('./lib/controllers/api'),
controllers = require('./lib/controllers');
// Angular Routes
app.get('/views/*', controllers.partials);
app.get('/*', controllers.index);
Here are the architecture which is used in dev mode:
->app
---->scripts
---->views
------>login.html
------>404.html
Here are the architecture in prod mode and the folders used (after "grunt build"):
->public
->views
--->login.html
--->404.html
I'm using Express framework with less-middleware and jade template engine
When I'm trying to get my css file in browser "/css/style.css" - I get the error
"Express 500 Error: Unrecognised input"
Here is basic setup in app.js
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.set('view options', {
layout: false
});
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get("/api/places", api.getAllPlaces);
app.get("/api/place/:id", api.getOnePlace);
app.all('*', routes.index);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
Any help appreciated! Thanks.
That was just typo in *.less file. Thanks!
Is there a reason why I should avoid doing this?
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/views'));
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')));
});
var html_dir = './views/';
app.get('/', function(req, res){
res.sendfile(html_dir + "login.html");
});
you need to use res.write and res.end() and just read the content's of the file vis the core require('fs') you can use res.set(field, [value]) for the headers
full docs
Using Node.js + Express, but for some reason cannot get css to work properly. I have the following two folders:
/public/css/lib - where .css files should go
/public/css/src - where .styl files are
And the following configs:
app.configure(function() {
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger({
format: 'dev'
}));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('whatever'));
app.use(express.session());
app.use(app.router);
app.use(require('stylus').middleware({
src: __dirname + '/public/css/src',
dest: __dirname + '/public/css/lib',
compress: true,
force: true,
compile: function(str, path) {
return stylus(str)
.set('filename', path)
.set('warn', true)
.set('compress', true);
}
}));
app.use(express.static(path.join(__dirname, 'public')));
});
But I get no .css file auto-generated when starting the app or making changes to .styl files, or going to /css/lib/app.css.
What am I doing wrong?
I want to use 2 layouts for main page and admin page
What should i configure my code to do that?
here is my current code configure
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(require('stylus').middleware({ src: __dirname + '/public' }));
app.use(express.static(__dirname + '/public'));
app.use(express.cookieParser());
app.use(express.session({secret: 'secrect', store: MemStore({
reapInterval: 60000 * 10
})}));
app.use(app.router);
});
I usually set layout to false globally, so I know exactly what layout I use where (so no default layout):
app.set('view options', { layout: false });
Then in my routes I can set a layout per route like so:
res.render('my_page', { layout: 'my_layout' });
Read more about Express layouts and templates engines