An example of how to set up a project for cross-developing for the browser and node.js.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
libs added example project May 12, 2013
resources removed newline in end of hello.txt Nov 2, 2013
src Added an example for different implementations for browser/node May 16, 2013
test removed newline in end of hello.txt Nov 2, 2013
.gitignore Added an example for different implementations for browser/node May 16, 2013
.jshintrc Updated all node development dependencies to latest Feb 17, 2014
.travis.yml added travis support, update package to inclide grunt-cli May 14, 2013
Gruntfile.js
LICENSE-MIT added example project May 12, 2013
README.md Grunt is now using grunt-jasmine-node task Oct 1, 2013
package.json

README.md

grunt-browserify-jasmine-node-example Build Status

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:

  1. 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

  2. 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:

  3. 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)

License

Copyright (c) 2013 Amitay Dobo
Licensed under the MIT license.