Where do I add NIB in a WebStorm 8 generated node.js + Expres + Jade + Stylus project?

Question

I am trying to get started with node.js, Express, Jade, Styl and NIB using WebStorm 8. Unfortunately WebStorm doesn't offer to include NIB support out of the box so I am searching for how to add it manually.

the app.js it generates looks like this:

/**
 * Module dependencies.
 */


var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = require('http'); var path = require('path');

var app = express();

// all environments app.set('port', process.env.PORT || 3000); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.json()); app.use(express.urlencoded()); app.use(express.methodOverride()); app.use(app.router); app.use(require('stylus').middleware(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public')));

// development only if ('development' == app.get('env')) { 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')); }); 

As far as I could understand from googling the things there is to be a piece of code like this

function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .use(nib()) // <-here it goes!
}

But I can't find any place like this. How do I attach NIB to the stack in this case?

Excuse me for a noob question. Help please. I have basic JavaScript skills (used to code some for the client side the old-fashioned manual way) but an a bit confused in this case. And yes, I would really prefer the IDE way if possible - I believe I can create the project from scratch and that would be less confusing but I love to use code completion, debugging and stuff like that to explore the things - this is my favourite way of learning, but I just need a bit push to start in this case. Thanks.

Answer 1

It's an old question but to add any stylus lib's to webstorm you need to modify the file watcher

See : https://devnet.jetbrains.com/message/5501662#5501662 for an example of how to do this for nib, but this will work for jeet in webstorm 8 / 9 as well.

Answer 2

You need to have your stylus middleware call the compile function. Try:

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var nib = require('nib');
var stylus = require('stylus');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);

app.use(stylus.middleware(
  { src: __dirname + '/public'
  , compile: compile
  }
))

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

// development only
if ('development' == app.get('env')) {
  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'));
});

function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .use(nib()) // <-here it goes!
}