Browserify Structure

Readme.md

Client Side Module System

Goal: Use some modules (React components) on client side and server

Directory Structure

/client/
  app.coffee
  routes.coffee # backbone.Router
  models/
    user.coffee # backbone.Model
/lib/
  components/
    start/
      index.coffee # react component
      blocks.coffee # react component used by index.coffee
    profile/
      index.coffee
      settings.coffee
/server/
  index.coffee
  routes.coffee # express.js
  sessions.coffee
  models/
    user.coffee # mongoose.Schema

Client Side: Files after Compilation

/public/
  vendor-612d3d.js # backbone, lodash, react
  app-a81d3d.js # app specific files
  index.html

To accomplish this, browserify needs to be configured in a way that libraries are written to their own file (vendor.js) and used as external dependencies for app.js.

Additionally, one should be able to overwrite the library files with browser-specific ones, e.g. by using the minified compiled versions of backbone and react from bower and to replace underscore with lodash.

For an example configuration, see this StackOverflow answer.