Search code examples
node.jscoffeescriptmiddlewareamd

how do I use coffeescript with an AMD loader and a node server?


Http Server: node.js 0.8.16
source files: mix of js and coffee
AMD loader: curl / require
Markup: jade 
CSS: styl

I'm building a prototype app using the above setup. It's all working fine, but I'm working on getting an AMD loader integrated with the app. The assets folder looks like this:

|____assets                                                    
| |____css                                                     
| | |____style.css                                             
| | |____style.styl                                            
| |____img                                                     
| |____js                                                      
| | |____bacon.js                                              
| | |____curl.js                                               
| | |____foo.coffee                                   
| | |____index.coffee     

OK so I want to get index.coffee and foo.coffee to be compiled as js and served when the browser requests /js/foo.js etc. This would work fine if I used connect-assets and put != js('foo') in my jade markup. But that != js( is kicking off connect-assets compilation, which is (I think) on the fly compiling the coffee file to js.

But if I use curl with a path like "foo" : "/js/foo.js" it won't work because connect-assets' js() method isn't kicking off.

Is there a middleware for node that will handle requests for coffee files as js files? I've looked a bit and connect-assets was the closest I could find.

I'd like to avoid having to set up a 'watcher' on my coffee files. Since I'm using some js files and some coffee-as-js files, I don't want to have to keep track of where the 'real' js files are and where the 'on-the-fly' js files are.

Update 5/24: I ditched all the middleware fiddle-faddle and went with grunt with a watcher that compiles stuff when it changes. Works great.


Solution

  • Yep, a duplicate, mostly. I'll answer it anyway in case this helps someone else down the road.

    https://github.com/wdavidw/node-connect-coffee-script

    var app = express();
    
    srcFolder = path.join(__dirname, 'assets', 'src', 'coffee');
    publicFolder = path.join(__dirname, 'assets');
    console.log("public folder: " + publicFolder);
    
    app.configure(function(){
      app.set('port', process.env.PORT || 3000);
      app.set('views', __dirname + '/views');
      ...
      app.use(require('connect-coffee-script')({
             src: srcFolder, dest: path.join( publicFolder, 'js')
      }));
    
      app.use(stylus.middleware ({
        debug: true,
        force: true,
        src: path.join(__dirname, 'assets', 'src', 'styl' ),
        dest:  path.join(__dirname, 'assets', 'css')})
      );
    
      app.use(express.static(publicFolder));
    });
    

    Then on the layout.jade side:

    script
      curl = {
            baseUrl: "/js",
            paths: {
              "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js",
              "foo" : "foo.js",
              "index" : "index.js",
              "bacon" : "bacon.js"
            }
          };
    script(src='/js/curl.js')
    script
      //debugger; 
      curl(['js!jquery', 'js!bacon', 'js!foo!order', 'js!index!order'])
        .then(function(){
              console.log("scripts loaded");
              },
            function(){
              alert("a module failed to load");
             });