Bower Setup in SilverStripe

Installation

Bower is a clean way of managing front-end dependencies so that you don't have to worry about manually downloading or maintaining packages.
Before you get started, you will need to download and install Node.js, which we'll use to install the Bower package and other NPM packages later on, you'll need to restart your machine unfortunately.

  1. Install Bower using Node.js
    Note: Might be worth turning on tracing with ( npm config set loglevel info ) to see what's going on especially if you're behind a proxy!

    cd ~/Sites/mysite.com/themes/mytheme/
    npm install -g bower
  2. Check if Bower installed
    This should return a version number.

    npm -v bower
  3. Create config now that Bower is installed - This will create the manifest bower.json.
    For now, just hit enter for everything, you can go back in there and change the default settings.

    bower init
  4. Git ignore if you are using Git, just add bower_components folder which is where Bower stores downloaded packages, so add the following dir to .gitignore file.
    Note: Anyone checking out your project will need to run (bower install) to populate the bower_components folder, it will basically look through your manifest (bower.json) and install your dependencies.

    bower_components
  5. Install a package
    Note: To see if a package is available, you might want to search Bower packages registry, or just do a lookup (bower lookup jquery) from command line.
    Important: If you wish Bower to update your manifest (bower.json) automatically, you must include the --save flag.


    bower install --save jquery

Integration with RequireJS

If you're using RequireJS (See RequireJS Setup in SilverStripe) to manage your module loading and dependencies, then you can simply reference the Bower installed modules from with the bower_componenets directory.  Alternatively, you might consider installing the Bower-RequireJS module, to save you from having to manually update the paths in RequireJS.

requirejs.config({
	baseUrl: '/themes/xx/javascript/lib',
	paths: {
		app: '../app',
		jquery: '/themes/xx/bower_components/jquery/dist/jquery.min',
		...
	},
	shim: { ... }
});