Is there middleware that can compile LESS CSS on a node webserver using Express 4.0?

Question

Since the connect framework is not used anymore the less-middleware solution does not work anymore or otherwise I am doing something wrong.

I am using express 4.0 and tried using less-middleware 1.0.4 however it does not work and it does not say anywhere that it is supported in express 4.0 since the connect framework is not supported anymore.

So is there middleware that can compile LESS CSS on a node webserver using express 4.0 that has sufficient documentation on how to do it or could you show me. Thanks!

Code I was having issues with can be seen below. If you can see something wrong, please let me know.

var _ = require('lodash');
var express = require('express');
var http = require('http');
var path = require('path');
var app= express();
var fs = require('fs');
var mime = require('mime');
var lessMiddleware = require('less-middleware');

var cache = {};

//get the models
//require('./app_server/models/db');

//set the port to be used
app.set('port', process.env.PORT || 3000);
//set the view folders
app.set('views', path.join(__dirname, 'public/'));

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
//app.set('view engine', 'jade');


//this should be removed in express 4.0
// app.use(app.router);

//sets the directory that the use can call data from (e.g. link css and js files)
console.log('__dirname', __dirname);

app.use(lessMiddleware(path.join(__dirname, "/app_server/less"), {
    dest: __dirname + "/public/css",
    // if you're using a different src/dest directory, you MUST
    // include the prefix, which matches the dest public directory
    prefix: "/css",
    // force true recompiles on every request... not the best
    // for production, but fine in debug while working through changes
    force: true,
    debug: true
}));

app.use(express.static(path.join(__dirname, 'public')));

//gets routes file that links routes to controllers
require('./routes')(app);

//server helper functions
function send404(response) {
    response.writeHead(404, {'Content-Type': 'text/plain'});
    response.write('Error 404: resource not found.');
    response.end();
}

function sendFile(response, filePath, fileContents) {
    response.writeHead(200, {"content-type": mime.lookup(filePath)});
    response.end(fileContents);
}

function serveStatic(response, cache, absPath) {
    if(cache[absPath]){
        sendFile(response, absPath, cache[absPath]);
    } else {
        fs.exists(absPath, function (exists) {
            if(exists){
                fs.readFile(absPath, function (err, data) {
                    if(err){
                        send404(response);
                    } else {
                        cache[absPath] = data;
                        sendFile(response, absPath, data);
                    }
                });
            } else {
                send404(response);
            }
        })
    }
}

var server = http.createServer(function (request, response) {
    var filePath = false;
    if(!request.url.match(/^\/?(lib|stylesheets|partials|css)/gi)){
        filePath = 'public/index.html';
    } else {
        filePath = 'public' + request.url;
    }

    var absPath = './' + filePath;
    serveStatic(response, cache, absPath);
});

    //make the server work (listen)
    server.listen(process.env.PORT || 3000, function () {
    //    console.log('Server Listening on port 3000');
        console.log('Express server listening on port ' + app.get('port') + ' and running in ' + app.get('env') + ' mode');

    });

Html is

<link rel="stylesheet" type="text/css" href="/css/main.css" media="screen"/>

Stab in the dark, have you tried gulp, gulp-less? (not entirely sure of its use server side) — Kiee
– Kiee, Commented Dec 26, 2014 at 13:31
If it is not compiled by the server, I won't find it useful. In Australia, we use koalas. — Turkina's Fury
– Turkina's Fury, Commented Dec 26, 2014 at 23:14
you set debug true in your middleware. It should expose console logs instantly when you run your app. What you see down there. One more thing, you can use gulp-less as @Kiee suggested. These are node modules supposed to use at the time of your web app build. — Palak Bhansali
– Palak Bhansali, Commented Dec 27, 2014 at 9:57
Yeah I did set debug to true in the options as you can see. It didn't respond in anyway unfortunately. On the Express npm page or express page it states that express 4.0 requires middleware to be added now and so I suspect that somehow this middleware does not work anymore because the connect framework is not part of express anymore either. Please correct me if I am wrong and show a working jsfiddle please. — Turkina's Fury
– Turkina's Fury, Commented Dec 27, 2014 at 11:23

user3210973 · Accepted Answer · 2015-02-11 10:36:46Z

2

I have 'less-middleware' working fine in express 4.0. Code i'm using is:

// Convert less to css on the fly
app.use(require('less-middleware')('public'));
// Public folder
app.use(express.static('public'));

After that any less file in public folder (or its subfolders) should be served as css.

answered Feb 11, 2015 at 10:36

user3210973

605 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is there middleware that can compile LESS CSS on a node webserver using Express 4.0?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related