grunt-browserify-jasmine-node-example

An example of how to set up a project for cross-developing for the browser and node.js.

The example is using jasmine on the browser and jasmine-node for unit testing, but similiar concepts apply for any testing framework which works both on the browser and node.

See further discussion at my blog post.

Getting Started

Install node.js, and grunt-cli globally.

npm install -g grunt-cli

Clone/Download the repository, and from its directory, install the dependencies:

npm install

You are now ready to run the build and the tests:

# build one time
grunt 
# continously watch for changes and build when they occur
grunt watch

Documentation

Project structure

- src          : application code
  - browser    : browser only code
  - common     : both for node.js and browser
  - node       : node.js only code
- test
  - specs      : jasmine test specs
    - browser  : run with jasmine browser only
    - common   : run with jasmine + jasmine-node
    - node     : ruh with jasmine-node only
- resources    : resource files
- libs         : external libraries
- dist         : build output
GruntFile.js   : buld configuration

Running tests

Tests can be run in 3 modes:

Jasmine-node:

The only tests that are using the source code directly (i.e. pre build). They are run as part of the main build, or you can run jasmine_node
Jasmine through automated PhantomJS browser

Runs with the browserified code, using a headless PhantomJS server, as part of the build, or by grunt jasmine To run:
Jasmine in the browser

Runs with the browserified code. Build the project and open the test bootstrap page with any browser, i.e. firefox test/SpecRunner.html

Running the "Application"

One of the browserify targets creates a bundle just for the "src/browser/App" module (and its dependencies).

The module is aliased as "SampleApp", so it can be loaded and run by an external html file. A client could load it in javascript using:

        var sampleApp = require('SampleApp');
        sampleApp.main();

You can see the application running at test/AppRunner.html

Notes

underscore.js is packaged from the npm package to the built app_bundle. Alternatives would be packaging it in a different bundle, but as a browserified file, or loading it as an external script file, and using its global variable. This is currently (AFAIK) not supported in browserify, but can be achieved through a hack to the code. This is currently commented out in HelloWorld.js
Jquery is loaded as a window global and not as a module for require(). An alternative would be to use a jquery version which supports being exposed as a commonJS module, or using browserify-shim to wrap it so it could be used with a require().

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Also, please don't edit files in the "dist" subdirectory as they are generated via Grunt.

Release History

(Nothing yet)

amitayd/grunt-browserify-jasmine-node-example