Using lessjs with express 3

Using lessjs with express 3

Problem

I am new to nodejs and everything related to it. I am using the twitter-bootstrap framework with node js. I ran the following commands –

npm install -g twitter-bootstrap-node
twitter-bootstrap create myproject

This was using express 2 by default so I upgraded to express 3. Since then I am getting the following error when I start express-

$ node app
Warning: express.createServer() is deprecated, express
applications no longer inherit from http.Server,
please use:

  var express = require("express");
  var app = express();


/Users/tusharmathur/Pebbles/app.js:17
  app.use(express.compiler({
                  ^
TypeError: Object function createApplication() {
  var app = connect();
  utils.merge(app, proto);
  app.request = { __proto__: req };
  app.response = { __proto__: res };
  app.init();
  return app;
} has no method 'compiler'
    at Function.app.configure.app.use.express.errorHandler.dumpExceptions (/Users/tusharmathur/Pebbles/app.js:17:19)
    at Function.app.configure (/Users/tusharmathur/Pebbles/node_modules/express/lib/application.js:395:61)
    at Object.<anonymous> (/Users/tusharmathur/Pebbles/app.js:12:5)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:903:3

Here is my app.js file

/**
 * Module dependencies.
 */

var express = require('express'),
  routes = require('./routes');

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.compiler({
    src: __dirname + '/public',
    enable: ['less']
  }));
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));

});

app.configure('development', function() {
  app.use(express.errorHandler({
    dumpExceptions: true,
    showStack: true
  }));
});

app.configure('production', function() {
  app.use(express.errorHandler());
});

// Compatible

// Now less files with @import 'whatever.less' will work(https://github.com/senchalabs/connect/pull/174)
var TWITTER_BOOTSTRAP_PATH = './vendor/twitter/bootstrap/less';
express.compiler.compilers.less.compile = function(str, fn) {
  try {
    var less = require('less');
    var parser = new less.Parser({
      paths: [TWITTER_BOOTSTRAP_PATH]
    });
    parser.parse(str, function(err, root) {
      fn(err, root.toCSS());
    });
  } catch (err) {
    fn(err);
  }
}

// Routes

app.get('/', routes.index);

app.listen(3000, function() {
  console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
});
Problem courtesy of: Tushar

Solution

As the message says, Express does not have this compiler message anymore. You should use another middleware which allows you to build you Less files. One example is less.js-middleware.

After installing it (npm install less-middleware) you can use it as demonstrated in the documentation:

var lessMiddleware = require('less-middleware');    
var app = express.createServer();

app.configure(function () {    
    app.use(lessMiddleware({
        src: __dirname + '/public',
        compress: true
    }));
});
Solution courtesy of: Sebastian vom Meer

Discussion

Leave a Reply

Your email address will not be published. Required fields are marked *