Node.js - should I use the npm install of history.js or the single files in this package?

Question

I think everyone has their own way to do their asset dependencies but I fell in love with doing this in Bower. Here's how I set Bower up to do my assets for my SailsJS apps:

First install bower:

npm install --save bower

Then create a file called .bowerrc which will tell bower where to put your assets:

{
    "directory": "assets/components"
}

Then run bower init to initialize your Bower configuration:

bower init
[?] name: myapp
[?] version: 0.1.0
[?] description: my app description
[?] main file:
[?] keywords:
[?] authors: me
[?] license: MIT
[?] homepage:
[?] set currently installed components as dependencies? No
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes

// ... cut out the resulting JSON ...

[?] Looks good? Yes

What results is a new file called bower.json which contains the JSON configuration. Next you'll want to install history.js which is super simple:

bower install -S history.js

When you do this it downloads history.js and puts it into your components folder. Since History.JS doesn't require a specific helper library and it sounds like you want to use jQuery you can then install jQuery:

bower install -S jquery

Next you'll want the linker to use these. So open up Gruntfile.js. Find the section for jsFilesToInject. Add your new components to it:

var jsFilesToInject = [
  'js/socket.io.js',
  'js/sails.io.js',
  'js/app.js',

  // Now the Bower components.
  'components/jquery/jquery.js',

  // I determined this by looking at assets/components/history.js/README.md
  'components/history.js/scripts/bundled/html4+html5/jquery.history.js'
];

Then go and open up views/layout.ejs and add the necessary script and CSS blocks for the linker to work:

<head>
  <!--STYLES-->
  <!--STYLES END-->
  <!--SCRIPTS-->
  <!--SCRIPTS END-->
</head>

These comment tags are pointers for the linker to know where to inject your scripts. Note that the Sails Assets Documentation has more information on configuring the linker, such as additional folders to create for auto-linking your own JS/CSS/JST.

Start or restart your Sails app and the linker should copy the files to the appropriate folder and automatically inject them into your layout.

I'd add one more thing. In your package.json for your Node/Sails app I'd also add:

{
  "scripts": {
    "postinstall": "./node_modules/bower/bin/bower install"
  }
}

This will trigger npm to run bower install whenever "npm install" is run. So if you deploy your app to a service like Heroku it'll automatically retrieve your assets for you as well.

I didn't address Ajaxify and that's because, for whatever reason, it isn't packaged via Bower. You'd have to get this and place it in your assets/js/whatever folder and add it to the linker.

You will, also, want to look at its README.md as it says what other dependencies it has and what order to include them in. The order of the JS and CSS files in Gruntfile.js is the order they will be injected into the app. I'd look at the ajaxify docs and add its dependencies via Bower.

Hope this helps.