CODEWITHSUNDEEP
node.jsstylusnode.js-connect
fraxture
fraxture

Reputation: 5510

Trouble Setting up Stylus Middleware w/ Node and Connect

I'm attempting to set up the Stylus Middleware, and I'm having no success. The documentation is not good for beginners or those new to Node.js. What I surmised was that I need to create a little mini Node app that will use the stylus middleware. However, I've been unable to get this to work even with the simple set up on that page. Here is what I've done:

Of course, I have node installed as well as stylus. Then I created a file stylus-middleware.app. So far I've added the following code (based on the simplest example in the documentation):

var app = connect();
app.middleware(__dirname);

When I attempt to run the simple app, I get the following error:

Tue Feb 19:~/Sites/test $ node stylus.app
/Library/WebServer/Documents/test/stylus.app:1
ction (exports, require, module, __filename, __dirname) { var app = connect();
                                                                    ^
ReferenceError: connect is not defined
    at Object.<anonymous> (/Library/WebServer/Documents/test/stylus.app:1:73)
    at Module._compile (module.js:449:26)
    at Object.Module._extensions..js (module.js:467:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.runMain (module.js:492:10)
    at process.startup.processNextTick.process._tickCallback (node.js:244:9)

I did a web search and discovered that connect() is a function related to the Connect plugin for node.js, so I tried to install it, but the error I got was the same. So I'm stumped. I don't know enough about how node.js works yet to know what's going on here.

Any advice would be much appreciated!

Update

After some messing around, I have understood how to set up the stylus middleware and link it to a Connect server. However, my code is still not working. I'm not getting any errors, but stylus is not compiling the .styl files that are located in the directory of the app (i.e. in __dirname). Heres' the app code as it stands now:

function compile(str, path) {
      return stylus(str)
        .import(__dirname)
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
}
 
 
var stylus = require('stylus');
var connect = require('connect');
var app = connect();
app.use(stylus.middleware({
        src: __dirname,
        dest: __dirname,
        compile: compile
}));
app.use(connect.static(__dirname));
var server = require('http').createServer(app).listen(8000);
console.log('Watching .styl files in directory: '+__dirname);

If anyone has any idea what is missing here or has some suggestions, I'd love to hear some ideas.

Upvotes: 0

Views: 2402

Answers (3)

Jay Searra
Jay Searra

Reputation: 11

You may need to install a file inspector that detects when you make changes to your files and automagically recompiles your .styl files

The two most popular are nodemon and npm-supervisor.

As a test, you can delete your .CSS files and see if the .styl files compile into .CSS when you start your application.

Upvotes: 1

robertklep
robertklep

Reputation: 203231

Here's a minimal app that works fine for me. It uses Express instead of Connect, though.

Install Express and Stylus first:

npm install express
npm install stylus

Next, create the server code (app.js or whatever filename you fancy):

var express = require('express');
var stylus  = require('stylus');
var app     = express();

app.use(stylus.middleware({
    src     : __dirname + '/node/www',
    dest    : __dirname + '/node/nginx',
    compile : function(str, path) {
      return stylus(str)
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
    }
}));

app.use(express.static(__dirname + '/node/nginx'));

app.listen(3000);

Create a simple Stylus stylesheet (call it ./node/www/app.styl):

body
  background #123

Start the server:

node app.js

Perform a request for the CSS file:

curl http://localhost:3000/app.css

After that request, look in ./node/nginx to see if it now contains a (generated) app.css.

EDIT: just realized this might only solve part of your problem.

If your intention is to serve the generated CSS files with nginx, it's not going to work. The reason for that is that the Stylus middleware intercepts requests for .css files to see if a) it has a accompanying .styl file and b) that .styl file needs to be compiled. If nginx catches all requests for CSS files the request will never end up being processed by the Stylus middleware.

Upvotes: 1

AndyD
AndyD

Reputation: 5385

You will need to install connect on the command line and then require it into your code:

npm install connect

and then require it like this

var connect = require('connect),
    app = connect();

Upvotes: 1

Related Questions