JS Package Management Bower (with Rails) & NPM

Bower-Rails-NPMBeing a front-end developer is not easy, managing all dependencies can be painful. Luckily, in that kind of a job, you can use a lot of different packages. After some time you learn that there are package managers like NPM or Bower that help you to install further packages to simplify your work. As soon as you learn that Bower is more of a front-end / client-side thing and NPM is mostly for server-side / node modules, it turns out that NPM also offers front-end packages. Quite confusing, isn’t it? Then let us think, is there any need for Bower? Can I use NPM for everything? Or is it better to use both?

The answer is simple: It’s a matter of taste. You can use NPM only, even for front-end packages. As far as I know, some developers even recommend doing so. There is not a one strong argument to convince you to do it that way. I would say it depends on the project size or, as I already mentioned, it might be a matter of taste.

Apart from those dilemmas, in this post I’m going to explain how Bower works and how to use it in your projects. What’s more, at the very end I will show an alternative way using NPM and Browserify.

Installing Bower

You can install Bower via the NPM command:

1
$ npm install -g bower

Important thing, don’t forget the ‘-g’ option as it will lead to a global installation, it will enable you to use the ‘bower’ command in your command line later on.

Setting up your project

For a proper dependency management, a nice way to set up a project is to use:

1
$ bower init

This will lead you through a form which creates a bower.json file for you. Values can be adjusted to meet your requirements, yet in most cases leaving the default values will work just fine. There is also a possibility to edit the bower.json file and change or add values later on. The created file should look similar to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"name": "something",
"authors": [
"Your Name "
],
"description": "A short description",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}

In the bower.json file you can specify all Bower packages that you need. Installation is an easy process, just run:

1
$ bower install

In order to specify the packages you want to install, add something like the following to your file:

1
2
3
4
5
6
…
"dependencies": {
"dependencyA": "~2.1.4",
"dependencyB": "~1.4.7"
}
...

You can also add new packages directly while installing them using the ‘—save’ option:

1
$ bower install --save

This is a good thing for one more reason. It will also take care of the versioning for you, Bower will take the latest versions.

The bower.json file is especially useful while programming in a group. All contributors can just clone the repository, run ‘bower install’ and all packages are automatically installed. Of course this will only be an advantage when the bower_components folder is added to the .gitignore file.

Once the package (e.g. jQuery ) is installed, simply add it to your HTML file.

1
<script src="bower_components/jquery/dist/jquery.min.js"></script>

The installation folder

By default, all components are installed into ‘bower_components’. If you wish to change it, create a new file in the project root folder named ‘.bowerrc’.

1
 $ touch .bowerrc

Once you do it, simply write this in the file:

1
2
3
{ 
"directory": "/your/desired/installation/path/" 
}

This can be /public/bower_components/ or any other that you need. It is important though, that this folder is accessible from your HTML files, so you can add them via the

1
<script src="/installation/path/">// <![CDATA[

tag.

Note: Don’t forget to cover the specified folder in your .gitignore, or otherwise one of the biggest advantages of using Bower gets lost!

Specifying the installation folder is not possible in such an easy way with NPM (good thing, you definitely don’t want all npm packages to be installed into your public folder!).

Bower and NPM

The question you may ask is why I didn’t say “Bower OR NPM”. Well, as already stated, NPM is used for your node modules, e.g. test runners like Karma, whereas Bower is for all front-end packages, e.g. jQuery or AngularJS. Therefore, if you’re using Bower, most of the time you will also use NPM for your project.

Well, you can argue that NPM also offers front-end packages, which of course is true. If so, why bother using Bower if for my tests I need NPM anyway? This is mostly a matter of taste or comfort. Long story short, It’s just very easy to use the .bowerrc file to specify your public packages.

Using NPM for front-end

Now, let me explain how to use NPM even for front-end packages. You can do such thing with the npm package ‘browserify’:

1
$ npm install -g browserify

This is a package used to parse ‘require()’ statements (which are usually Node.js statements) to something a browser is able to understand. Basically, you can use different node modules and ‘require’ them in your javascript file:

1
2
3
        	// yourApp.js
var $ = require(‘jQuery’)
        	// now you can use jQuery as usual

Note, that as long as you require node_modules you don’t need to determine the exact path.
Now ‘browserify’ it with:

1
$ browserify yourApp.js -o bundle.js

The output file, introduced with the -o option will be now created and needs to be included into your HTML:

1
<script src=”bundle.js”>

And you’re done!

The thing I like most about it, is that you only have one single script tag in your HTML file, whereas in Bower, you need to add every component by yourself. What is more, your app will have a clean modular structure since you need to ‘require’ every node module as a single part.

Note: If you’re using AngularJS and want to use it with ‘browserify’, things can get tricky, Angular has its own modular structure (ngRoute, ngResource, …). It is generally recommended to use Bower for that. There are guides for using Angular with ‘browserify’, though.

Using Bower in a Rails app

You can also use Bower in your Rails apps. This is quite nice, it offers a good dependency management for the client side (which isn’t as easy in Rails as it is with Bower).

Let’s begin, then. Again, create a bower.json for the clean package configuration. However, before you run a ‘bower install’, first make sure to specify the installation directory of the components in a .bowerrc file:

1
2
3
{
"directory": "vendor/assets/components"
}

Now, we need to know rails about these packages for its asset pipeline. Open /config/application.rb and add the following:

1
config.assets.paths &lt;&lt; Rails.root.join('vendor', 'assets', 'components')

Now you only need to ‘require’ the files, as usual. In your /app/assets/javascripts/application.js add the desired dependencies; in the following example we ‘require’ Bootstrap:

1
//= require bootstrap/dist/js/bootstrap

For CSS files add to /app/assets/css/application.css:

1
*= require bootstrap/dist/css/bootstrap

Now you’re ready to use all packages that Bower offers freely in your beloved Rails app.

Differences between NPM and Bower

A key difference between NPM and Bower is their file structure. Since Bower is generally aimed at the front-end, it tries to reduce page load. Therefore, it structures the packages in a flat tree; every dependency will only be added once.
NPM, however, aims at the stability and creates a nested file tree. This means that, every package has its own dependencies. This approach secures, that every package has all the correct versions of their dependencies, while with Bower, every package uses the same version of a dependency.

Example time! Let’s say that you need packages 1, 2, 3 in your project, while 1 and 2 are dependent on 3, which itself is dependent on 4 (a little confusing but try to follow my thinking here). This would be Bower’s file structure:

[bower_components]

  • package 1 (needs 3)
  • package 2 (needs 3)
  • package 3 (needs 4)
  • package 4

Notice how every package is exactly on the same layer and is added only once.
On the other hand, NPM’s approach results in a different structure:

[node_modules]
|–package 1
|    |–package 3
|        |–package 4
|–package 2
|    |–package 3
|        |–package 4
|–package 3
|    |–package 4

Bower creates much less page load, while NPM guarantees stability. It means that Bower could cause problems when two packages need the same dependency but in different versions.

What we learned

Let’s sum up everything we have went through. Now you know how to use Bower for your dependency management and (I hope you noticed) it isn’t as hard as it probably seemed to be at the beginning. You also know how to completely go without Bower and just use NPM for all packages, even though it requires you to use other tools like Browserify, which, fortunately, is just as easy as using Bower once you get the hang of it.
You can also use Bower in your Rails app without any problems, useful skill, since not all front-end packages are always up to date as Ruby gems. Bower however, since it’s cited as ‘a package manager for the web’, usually has the latest versions ready for you.

// ]]>

Sharing is caring!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.