Are there best practices in using bower in a source-controlled, mavenized, java web application

Question

I'm quite new to bower but not web application development. Previously, I've just downloaded the required JavaScript and CSS files from third-party libraries/frameworks and placed them into my web application's src/main/webapp/scripts (or equivalent) folder. This ensures that only the files needed by the web application are deployed.

With my default setup, the entire bower_components directory will be committed to source control and if I follow the examples for referencing a bower package, eg,

<script src="/bower_components/jquery/jquery.js"></script>

I'm going to end up deploying the entire bower_components directory with my web application. This seems like huge overkill (especially were I to use jQuery UI because all the themes are downloaded into bower).

Is there a best practices in using bower with a web application such that the application isn't bloated with unnecessary third-party library files? Please remember that this is also Java and Maven web application.

Answer 1

Seeing that you tagged maven on this question, I completely disagree with checking in 3rd party libraries, after having tasted the goodness of maven dependency management :) no matter whether it is a jar or js.

This is something that we've been trying to reconcile at my work as there doesn't seem to be a natural way to do js dependencies in maven. Specifically for bower there looks to be a good maven plugin here:

https://bitbucket.org/cofarrell/bower-maven-plugin

for which you can specify the target directory. I haven't used it yet, but I would want to have it bring in the js files to my target directory so I don't have to put it in my source. If we move forward with this, this is what I envision.

---

If you're interested I have more to add (since there's not a lot out there about this topic)... We are currently using maven "js" artifacts so we can leverage maven's dependency management with our 3rd party js. A plugin that we've forked to do this for us is at:

https://github.com/cameroncan/js-import-maven-plugin .

It does its job, but was built for our use case. Please submit issues if you find it is in need of genericizing. We do have to manually upload these artifacts to nexus, but that hasn't been too big of an issue.

A big advantage of using the maven dependency mechanism is the transitive dependency resolution. We have our js broken out into different modules and without maven, there will likely be collisions with the versions of our js files, resulting in a big mess in the final app that pulls all of the js dependencies in.

Answer 2

I just read some articles on this subject and it seems that Bower itself recommends "checking-in" the bower_components into source control:

"...you should always check installed packages into source control.”

From the articles I read, I kind of get the following:

1. If your project is to be consumed by others (eg: as a bower package too), then don't include bower_components in source control

2. If your project is to be deployed, include bower_components in source control

Answer 3

You can use bower-installer which is a node package to control which files to be copied to your static resources folder from the downloaded distribution package folder. Please look into below link.

https://www.npmjs.com/package/bower-installer

I followed below steps to select which files to be copied to my lib folder

1) Install bower-installer by runnnig npm install -g bower-installer command

2) Create 'bower_components' folder outside of your src folder.

3) Edit bower.json configuration file(in the 'bower_component's folder ) and specify path for each js library components.

4) Run bower-installer from terminal