I followed the example here to add nib to my site:
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, nib = require('nib');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
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: 'your secret here' }));
app.use(require('stylus').middleware({ src: __dirname + '/public' }));
app.use(nib());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
But when I start the server I get this error:
500 TypeError: Object #<IncomingMessage> has no method 'include'
at Object.handle (/home/alex/apps/foo/node_modules/nib/lib/nib.js:51:11)
at next (/home/alex/apps/foo/node_modules/express/node_modules/connect/lib/http.js:201:15)
at Object.handle (/home/alex/apps/foo/node_modules/stylus/lib/middleware.js:187:7)
at next (/home/alex/apps/foo/node_modules/express/node_modules/connect/lib/http.js:201:15)
at /home/alex/apps/foo/node_modules/express/node_modules/connect/lib/middleware/session.js:323:9
at /home/alex/apps/foo/node_modules/express/node_modules/connect/lib/middleware/session.js:342:9
at Array.0 (/home/alex/apps/foo/node_modules/express/node_modules/connect/lib/middleware/session/memory.js:52:9)
at EventEmitter._tickCallback (node.js:126:26)
Any suggestions to fix this?
try this in your "development" mode since you don't want to have stylus compiling at run time in a production environment:
app.configure('development', function(){
var stylusMiddleware = stylus.middleware({
src: __dirname + '/stylus/', // .styl files are located in `/stylus`
dest: __dirname + '/public/', // .styl resources are compiled `/css/*.css`
debug: true,
compile: function(str, path) { // optional, but recommended
return stylus(str)
.set('filename', path)
.set('warn', true)
.set('compress', true)
.use(nib());
}
});
app.use(stylusMiddleware);
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
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'));
});
that's my usual setup with nib and stylus. and with this set up you'd need to move up your require("stylus") to the top as stylus = require("stylus"), similar to your require("nib").
you will have to have your general configure method list after the development one.
Related
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!
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 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')
I get this error:
500 Error: ENOENT, open 'C:\Users\Gilbert\WebstormProjects\games\views\layout.hbs
but my project has no reference to this file. when trying to render a simple test page with HBS, I used a pregenerated express app that created a layout.jshtml file but deleated this file.
app.js:
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
routes/index.js:
/*
* GET home page.
*/
exports.index = function(req, res){
res.render('hi.hbs', { title: 'Express' });
};
views/hi.hbs:
<h1>IT WORKS</h1>
With HBS you must manually disable need for a layout with layout:false this should be done in the view options to make it app global.
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