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!
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
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
I've the following scaffolded express application:
var
express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, _ = require('underscore');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 5000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.compress());
app.use(express.responseTime());
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);
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 modification I've made to code generated by express generator:
app.use(express.compress());
app.use(express.responseTime());
The problem: processed to LESS files are gzipped and has X- HTTP-header with response time, but output from my controllers (HTML pages) is not gzippped and is served without headers.
Maybe I understand connect middleware wrong?
For the pages generated by your routes to be compressed (I assume that's what you mean by controllers) you need to move this line:
app.use(app.router);
after this line:
app.use(express.compress());
express.compress only affects those components added after it.
For express 4, it is necessary to install the module.
var compress = require('compression')();
app.use(compress);
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.