Middleware function not calling the function

Question

I am implementing stylus to my existing project. I have downloaded 'stylus' and nib modules. after I implement both, the middle ware not calling the compile function at all. I am not getting any of the errors.

I believe that, some order which i am placed may be wrong or some of other methods interprting the compile function.

any one please help me to sort this issue please?

here is my app.js file functions:

var 
    express = require('express'),
    cons    = require('consolidate'),
    http    = require('http'),
    stylus  = require('stylus'),
    nib     = require('nib'),
    path    = require('path');

//------
var 
fs  = require("fs"),
app = express();

//adding compile function and compress
function compile(str, path) {
    console.log('path is ' + path);//I am not getting any console
  return stylus(str)
    .set('filename', path)
    .set('compress', true)
    .use(nib());
}

// assign the underscore engine to .html files
app.engine('html', cons.underscore);

// all environments
app.set('port', process.env.PORT || 5000);

app.set('view engine', 'jade');
app.set('views', __dirname + '/ui');
// app.set('env', 'development');
//app.register('.html', require('jade'));
//app.engine('html', require('ejs').renderFile);

app.use(express.favicon());
// app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
// app.use(app.router);

//adding middleware for sytlus
app.use(stylus.middleware({ // i am using the midware here / what is wrong?
    src: __dirname + '/ui',
    compile:compile,
    compress: true
}));

// // development only
// if ('development' === app.get('env')) {
//  app.use(express.errorHandler());
// }

require('amdefine/intercept');
if (typeof define !== 'function') {
    var define = require('amdefine')(module);
}

//var amdRequire = require(__dirname + "/ui/tests/config/test");
//console.log("amdRequire ========== " + amdRequire);

app.all('*', function (req, res, next) {
    if (req.xhr) {
        //console.log("req.path ==== " + req.path);
        var filePath = __dirname + "/ui/restResponses" + req.path + "/" + req.method;

        console.log("xhr path ------- " + filePath);
        if (req.method === "GET") {
            for (var g in req.query) {
                if (req.query.hasOwnProperty(g)) {
                    console.log("GET::: req.query." + p + ": " + req.query[p] );
                }
            }
        } else if (req.method === "POST") {
            for (var p in req.body) {
                if (req.body.hasOwnProperty(p)) {
                    console.log("POST::: req.body." + p + ": " + req.body[p] );
                }
            }

        }


        var jsFile = require(filePath);
        var response = jsFile(req, res, next);

        /*define([filePath], function (dependency) {
            console.log("dependency ==" + dependency);
        });*/

        res.send(response);

    } else {
        next();
    }
});


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

http.createServer(app).listen(app.get('port'), function () {
  console.log('Express server listening on port ' + app.get('port'));
});

Answer 1

Start with the basics: Does your HTML correctly reference a stylesheet? Does the browser send a GET for the stylesheet? What is the URL of the browser's GET request for the stylesheet? Given your filesystem layout, are you SURE the URL maps properly to the filesystem? Also run your app with DEBUG=express:router in the environment. You can also use a middleware that does nothing but log req.path then call next() to help you track things down.