How do I use Node and Express with coffeescript and requirejs?

Question

Here\'s what I want.

• A node application using the express webserver
• Using coffeescript on the server and more importantly the client
• Using re

Answer 1

Try mimosa, it'll help you with each one of those things out of the box. http://www.mimosajs.com

mimosa new [name] will give you a starter project with all of it.

Answer 2

Sorry for the new answer, but I decided to go make an account. =)

Mimosa will give you a small Express application if you choose Express as part of the mimosa new workflow. And if you choose CoffeeScript it'll give you an Express app in CoffeeScript. And it'll have RequireJS included in the scaffolded application. So you should not need to rewrite anything. You just need to plug your stuff in. If anything the Express app it gives you will serve as an example for you to do it yourself without using Mimosa.

Answer 3

I've created a package to help solve this problem; it's called connect-assets-jspaths.

From the readme:

Installation

npm install connect-assets-jspaths

• Note, there is a dependency on CoffeeScript.

Server Side Usage

assets = require "connect-assets"
jsPaths = require "connect-assets-jspaths"

# Snip ...

app.use assets()
# Exports the global function exportPaths() and jsUrl(); see below in View Helpers.
jsPaths assets

# Optionally, pass a log function to see progress
# jsPaths assets, console.log

Watch changes and re-compile

Now you can pass some additional callbacks in and it will monitor your connect assets directories for changes.

fileChangedCallback = (err, filePath) ->
    console.log "File Changed: #{filePath}"

jsPaths assets, console.log, fileChangedCallback, (err, watcher) ->
    console.log "Watcher initialized"

NOTE You'll probably want to disable this for production mode.

View Usage

This module exports two global functions exportPaths() and jsUrl().

// Using this in your view
!= exportPaths("jsPaths")

// Turns into this when rendered in production
<script type="text/javascript">
    var jsPaths = { "main", "/builtAssets/js/main.13819282742.js" /* snip all the other file paths */ };
</script>


// Using this in your view
- var mainJsPath = jsUrl("/js/main.js")
script(type="text/javascript", data-main="#{mainJsPath}", src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.0.2/require.min.js")    

// Turns into this when rendered in production
<script type="text/javascript" data-main="/builtAssets/js/main.13819282742.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.0.2/require.min.js"></script>

Dynamic RequireJS Paths

Now that we have a variable with our requireJS friendly paths in it, we can set those paths in the RequireJS config

# Example main.coffee file in /assets/js folder

requirePaths =
  paths:
    jquery: "//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min"
    underscore: "//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min"
    backbone: "//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min"
    text: "/js/lib/text"
    handlebars: "/js/lib/handlebars"

if jsPaths
  for own key, value of jsPaths
    # Fix up the lib references
    key = key.slice 4 if key.slice(0, 4) == "lib/"
    requirePaths.paths[key] = value 

require.config
  paths: requirePaths.paths

  shim:
    jquery:
      exports: "$"
    underscore:
      exports: "_"
    backbone:
      deps: ["underscore", "jquery"]
      exports: "Backbone"

require ['app'], (App) ->
    new App().initialize()