Should you commit Bower components to Git?

There is some debate as to whether or not Bower components should be committed to the source repository or not. Checkout Addy Osmani's article Checking in front-end dependencies for further details.

The arguments can be summarized as follows:

For committing Bower components:

  • Without the dependencies committed, the target server (e.g. Heroku) must run bower install to generate the dependencies. For Rails projects on Heroku, this would require a special build pack.
  • The deployment process is not dependent on the availability of the Bower repositories (although arguably this is small risk).
  • Running bower install on a fresh clone of the source repository could cause newer versions of the dependencies to be installed.

Against committing Bower components:

  • /bower_components contains a large amount of third-party source code which is not a dependency of your project and should not therefore be in your repository.
  • This additional code simply increases the size of the repository.

However, there is, perhaps, a third option which gives us the best of both worlds. It requires a bit of hassle with the .gitignore file - and that's the compromise - but it might resolve an impasse should it arise!

Rather than ignoring the entire bower_components folder, 'unignore' the specific folders that contain the components you are dependent on. For example, in a Rails project that uses both JQuery and Bootstrap, add the following to your .gitignore file:

# ignore contents of bower_components

# unignore jquery folder
# ignore contents of jquery folder
# except dist

# unignore bootstrap folder
# ignore contents of bootstrap folder
# except dist (uncomment the following line if you are using the dist files):
# !vendor/bower_components/bootstrap/dist
# except less, js & fonts (uncomment the following 3 lines if you are using less ):
# !vendor/bower_components/bootstrap/less
# !vendor/bower_components/bootstrap/js
# !vendor/bower_components/bootstrap/fonts

As you can see, it's a bit messy, but it works nevertheless and you only have to do it once (per dependency).

The first line vendor/bower_components/* ensures that everything under bower_components is ignored by default. The /* is important as just vendor/bower_components on its own will ignore the entire folder and the subsequent lines will have no effect.

Next, it is necessary to unignore jquery, then immediately ignore all its contents. This ensures that we can unignore specific subfolders of jquery.


Finally, !vendor/bower_components/jquery/dist unignores the dist folder, which contains our dependencies.

Having the best of both worlds means that now:

  • Heroku (for example) does not need to install the dependencies first and therefore does not required a special build pack.
  • The project repository is not cluttered with third-party source files.

Plus, you can still run bower install on a new clone of the repository if you want to.