express and connect-assetmanager

Question

I am trying to use connect-assetmanager with express. Apparently I don't understand how to adapt the connect-based example to an express app.

I took the skeleton app that's created by the express command-line (scroll to bottom for commands I ran) and tried to merge into it the example from the connect-assetmanager home page. Here is my app.js:

var express = require('express')
  , routes = require('./routes')
  , assetManager = require('connect-assetmanager');

var assetManagerGroups = {
    'css': {
        'route': /\/static\/css\/[0-9]+\/.*\.css/
        , 'path': './public/stylesheets/'
        , 'dataType': 'css'
        , 'files': [ 'style.css', 'style2.css' ]
    }
};

var assetsManagerMiddleware = assetManager(assetManagerGroups);
var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(assetsManagerMiddleware); 
  app.use(express.static(__dirname + '/public'));
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

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

Then I modified layout.jade to have its style sheet reference point to the asset manager route: /static/css/style.css

The welcome page loads (minus any styling) and in the chrome dev tools I see a failed request for the above css path. There are no errors in the node command window. Am I using the wrong approach to connecting the asset manager middleware to express? Or is it something stupid like reading the example regex incorrectly?

For reference, here is what I ran to create the sample app:

# using 2.5 since that's what the larger app is based on
sudo npm install -g [email protected]

# create the sample express app
express expressAssetTest
cd expressAssetTest
# add connect-assetmanager to the dependencies
echo '{
    "name": "expressAssetTest"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.11"
    , "jade": ">= 0.0.1"
    , "connect-assetmanager": ">= 0.0.3"
  }
}' > package.json
# add a 2nd stylesheet for testing purposes
echo ".mycssclass { top: 0; }" > public/stylesheets/style2.css
sudo npm install

Answer 1

My setup is similar, trying to integrate connect-assetmanager with locomotive. I was having the same issue with my javascript merge. I got it to work by changing the route regex from

'route': /\/static\/javascripts\/[0-9]+\/.*\.js/

to

'route': /\/static\/javascripts\/script\.js/

and calling /static/javascripts/script.js from my layout template

I'm not sure why the example has that particular regex, a more appropriate one might be something like this:

'route': /\/static\/javascripts\/[^/?*:;{}\\]+\.js/

based on the suggestion here : Regex for finding valid filename