Monday, September 26, 2016

Bower components not being installed properly

I was working on a web application where bower components were not being installed properly on a CentOS 6.7 VM (the webapp was using angular-kickstart).  Specifically, the jquery-ui.min.js was returning a HTTP 404 not found error from the browser.  This occurred on a VM with a fresh bower install.

The webapp/build/dist folder did not contain the src/vendor/jquery-ui/ui/minified/jquery-ui.min.js.  For some reason a fresh bower install did not grab all the files.

Files that should have been available:
ls jquery-ui/ui/minified/
i18n                               jquery.ui.effect-pulsate.min.js
jquery.ui.accordion.min.js         jquery.ui.effect-scale.min.js
jquery.ui.autocomplete.min.js      jquery.ui.effect-shake.min.js
jquery.ui.button.min.js            jquery.ui.effect-slide.min.js
jquery.ui.core.min.js              jquery.ui.effect-transfer.min.js
jquery.ui.dialog.min.js            jquery-ui.min.js
jquery.ui.draggable.min.js         jquery.ui.mouse.min.js
jquery.ui.droppable.min.js         jquery.ui.position.min.js
jquery.ui.effect-blind.min.js      jquery.ui.progressbar.min.js
jquery.ui.effect-bounce.min.js     jquery.ui.resizable.min.js
jquery.ui.effect-clip.min.js       jquery.ui.selectable.min.js
jquery.ui.effect-drop.min.js       jquery.ui.slider.min.js
jquery.ui.effect-explode.min.js    jquery.ui.sortable.min.js
jquery.ui.effect-fade.min.js       jquery.ui.spinner.min.js
jquery.ui.effect-fold.min.js       jquery.ui.tabs.min.js
jquery.ui.effect-highlight.min.js  jquery.ui.tooltip.min.js
jquery.ui.effect.min.js            jquery.ui.widget.min.js

Files that were available.   These files were completely different, and the minified js versions were completely missing:
ls jquery-ui/ui/minified/
core.js               focusable.js         jquery-1-7.js     safe-active-element.js     widget.js      
data.js               form.js              keycode.js        safe-blur.js  version.js
disable-selection.js  form-reset-mixin.js  labels.js         scroll-parent.js        
effect.js             i18n                 plugin.js         tabbable.js
escape-selector.js    ie.js                position.js       unique-id.js

Problems (including how I fixed it):

Problem 1:  The project had a .bowerrc file that defined that the "bower_components" folder should go to "client/src/vendor".  The build script was NOT properly copying this file over to the deploy folder.  Notice the "." at the end of the source webapp folder, this handles hidden files and folders properly.

Changed the deploy script.  Notice the "." at the end of the source dir, this will copy over hidden files.
cp -rvf $BUILD_DIR/webapp/* $WEBAPP_HOME/
cp -R $BUILD_DIR/webapp/. $WEBAPP_HOME/

Problem 2:  The web application needs to have all dependencies packages inside the webapp package, the target environment has no internet connection.  The build script was running bower update on the build source code folder, not on the deployed folder location.  Bower commands need to be run on the deploy folder location; so the webapp could be packaged appropriately.

Problem 3:  Back to the original problem - the jquery-ui.min.js file could not be found!  Using the advice of this article, I added a "bower cache clean" to clean the default cache folder (<home>/.cache/bower folder) to the build script prior to the "bower install --save" command.

Everything worked!  Somehow the bower cache had old/bad data (don't know why), and doing a "bower install" was still getting corrupted data only for jquery-ui.

Changed to:
- remove npm install bower (not necessary)
- changed bower update to bower install --save (I checked and this does not actually make any changes to bower.json right now)
- Added bower cache clean prior to bower install

** Updated script details **********************
# Do NOT need to do 'npm install bower' in the deploy script.  Bower npm dependency only needs to be installed once

# BOWER dependencies
# If a bower dependency has never been installed, we must use bower install to install it.  We should only use bower install on DEV or TEST so all dependencies can be installed even when missing (without changing the build and deploys scripts).  Update will not grab these dependencies that have not been installed previously.
# We will use bower cache clean to ensure we start with a fresh bower before each new bower install.  NOTE:  On linux at least, bower cache is located in <home>/.cache/bower.  The cache was not located in the "bower_components" folder which for the webapp was client/src/vendor.
#  'bower update' Updates installed packages to their newest version according to bower.json.  Which only works if you use the modifiers like tilda.  If you specify specific version it won't do anything.  Always use bower install --save, do NOT use update.
# When --save flag is used, all additional endpoint are saved to dependencies in bower.json. Bower recommends to always use --save flag to achieve 'reproducible installs between machines'.
# You can add --allow-root to any bower command, but we won't need to do that here since we are running as the service user.
echo cleaning bower cache
bower cache clean

echo installing BOWER dependencies
bower install --save

No comments:

Post a Comment

I appreciate your time in leaving a comment!