# Adding Bower Files to Sage (8.0.0) **URL:** https://discourse.roots.io/t/adding-bower-files-to-sage-8-0-0/2825 **Category:** sage **Created:** 2015-01-27T16:10:56Z **Posts:** 23 ## Post 1 by @emaildano — 2015-01-27T16:10:56Z I’m pretty new to gulp but I’m giving it a try. How / where would I include other Js files from Bower? With Grunt it was pretty straight forward but now I’m pretty sure these files go into `manifest.json` but I’m not 100% or know how to add other files there. Any help here would be much appreicated! ``` { "dependencies": { "main.js": { "files": [ "scripts/**/*", "scripts/main.js" ], "main": true }, "main.css": { "files": [ "styles/main.scss" ], "main": true }, "editor-style.css": { "files": [ "styles/utilities/editor-style.less" ] }, "jquery.js": { "bower": ["jquery"] }, "modernizr.js": { "bower": ["modernizr"] } } } ``` * * * @austin, I just realized that’s apart of your [asset-builder](https://github.com/austinpray/asset-builder) repo. I’m looking [though the docs](https://github.com/austinpray/asset-builder/blob/master/SPEC.md) and I included a new Js file but it won’t clear jshint. I included it to be apart of `main.js`. How do I include Js files here without them coming up in Js hint? --- ## Post 2 by @ben — 2015-01-27T16:48:48Z Bower assets are automatically included because we use `main-bower-files`. You can override which assets get pulled in by a package by editing `bower.json` and overriding `main` — you can see how we’re doing that with Bootstrap. > [@emaildano](#): > > How do I include Js files here without them coming up in Js hint? Don’t you want to fix your JS errors? Anyway: [Disable JSHint for a file](http://evanhahn.com/disable-jshint-for-a-file/) --- ## Post 3 by @cfx — 2015-01-27T17:53:53Z For quick reference, the `bower.json` overrides are here (for now): [https://github.com/roots/roots/blob/8.0.0/bower.json#L14](https://github.com/roots/roots/blob/8.0.0/bower.json#L14) --- ## Post 4 by @emaildano — 2015-01-27T18:03:17Z @benword, thanks! Never used that feature before. Re: the js errors, they were ones from within the plugins js files not ones I wrote. They showed up because I manually wrote in the paths above `"scripts/main.js"`. --- ## Post 5 by @emaildano — 2015-01-27T18:35:49Z So, maybe I just need a few steps to help me out. Here’s a quick run down of the steps to add a bower dependency. Let me know if I’m doing anything wrong here. For my example I’m going to use [Chart.js](https://github.com/nnnick/Chart.js/). 1. Add package to `bower.json` 2. Declare which files you need from that package in `"overrides":` and create a handle. 3. Add that handle to `manifest.json`. Is that it? ``` { "name": "sage", "homepage": "http://roots.io/sage/", "authors": [ "Ben Word " ], "license": "MIT", "private": true, "dependencies": { "modernizr": "2.8.2", "jquery": "1.11.2", "bootstrap": "3.3.1", "chart.js": "1.0.1" }, "overrides": { "modernizr": { "main": "./modernizr.js" }, "bootstrap": { "main": [ "./less/bootstrap.less", "./js/transition.js", "./js/alert.js", "./js/button.js", "./js/carousel.js", "./js/collapse.js", "./js/dropdown.js", "./js/modal.js", "./js/tooltip.js", "./js/popover.js", "./js/scrollspy.js", "./js/tab.js", "./js/affix.js", "./fonts/glyphicons-halflings-regular.eot", "./fonts/glyphicons-halflings-regular.svg", "./fonts/glyphicons-halflings-regular.ttf", "./fonts/glyphicons-halflings-regular.woff" ] }, "bootstrap-sass-official": { "main": [ "./assets/stylesheets/_bootstrap.scss", "./assets/javascripts/transition.js", "./assets/javascripts/alert.js", "./assets/javascripts/button.js", "./assets/javascripts/carousel.js", "./assets/javascripts/collapse.js", "./assets/javascripts/dropdown.js", "./assets/javascripts/modal.js", "./assets/javascripts/tooltip.js", "./assets/javascripts/popover.js", "./assets/javascripts/scrollspy.js", "./assets/javascripts/tab.js", "./assets/javascripts/affix.js", "./assets/fonts/glyphicons-halflings-regular.eot", "./assets/fonts/glyphicons-halflings-regular.svg", "./assets/fonts/glyphicons-halflings-regular.ttf", "./assets/fonts/glyphicons-halflings-regular.woff" ] }, "chart.js": { "main": "./chart.js" } } } ``` ``` { "dependencies": { "main.js": { "files": [ "scripts/**/*", "scripts/main.js" ], "main": true }, "main.css": { "files": [ "styles/main.less" ], "main": true }, "editor-style.css": { "files": [ "styles/editor-style.less" ] }, "jquery.js": { "bower": ["jquery"] }, "modernizr.js": { "bower": ["modernizr"] }, "chart.js": { "bower": ["chart.js"] } } } ``` --- ## Post 6 by @swalkinshaw — 2015-01-27T20:10:01Z @emaildano keep in mind that you only need that explicit entry in `manifest.json` for `chart.js` if you want it to be a separate file. If you want it to be part of `main.js` then you don’t need to do anything after the Bower steps. --- ## Post 7 by @cfx — 2015-01-28T00:14:31Z Just installing via Bower may result in some JS errors because unfortunately the [Chart.js `bower.json` file](https://github.com/nnnick/Chart.js/blob/master/bower.json#L8) lists a minified JS file in `main`. Looks like a good candidate for a pull request on that project. Apart from that and @swalkinshaw’s comment, these steps look good (i.e., no need to touch `manifest.json` at all if you want the Chart.js script minified into your concatenated JS file). My only addition is that some devs find a command line installation easier/quicker:`bower install Chart.js --save`. --- ## Post 8 by @swalkinshaw — 2015-01-28T01:08:41Z @cfx he added the override in his `bower.json` above to get the unminified version. --- ## Post 9 by @cfx — 2015-01-28T12:43:10Z I just mentioned that to elaborate for other viewers and in case the OP (or anyone else) wants to submit a PR to that project. --- ## Post 10 by @austin — 2015-01-28T17:42:05Z @emaildano Make sure you have the latest gulpfile: [https://github.com/roots/roots/commit/c6a0f6eab9fd995caa4cfcc6e88d109fa1c99a86#diff-b9e12334e9eafd8341a6107dd98510c9R173](https://github.com/roots/roots/commit/c6a0f6eab9fd995caa4cfcc6e88d109fa1c99a86#diff-b9e12334e9eafd8341a6107dd98510c9R173) JsHint will only run on your project javascript now. Previously it did run on all JS including third-party bower files (bad). --- ## Post 11 by @austin — 2015-01-28T18:30:52Z Are ya’ll ready for a flowchart? ![](https://discourse.roots.io/uploads/default/1492/5182b99cd3db7793.png) --- ## Post 12 by @vralle — 2015-07-09T20:20:46Z Hi! My steps for adding [photoswipe](https://github.com/dimsemenov/photoswipe): ``` bower install photoswipe --save ``` add PhotoSwipe to bower.json: ``` { "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word " ], "license": "MIT", "private": true, "dependencies": { "modernizr": "2.8.2", "bootstrap-sass-official": "~3.3.5", "photoswipe": "~4.0.8" }, "overrides": { "modernizr": { "main": "./modernizr.js" }, "photoswipe": { "main": [ "./dist/photoswipe.js", "./dist/photoswipe.css", "./dist/photoswipe-ui-default.js", "./dist/default-skin/default-skin.css", "./dist/default-skin/default-skin.png", "./dist/default-skin/default-skin.svg", "./dist/default-skin/preloader.gif" ] }, "bootstrap-sass-official": { ... ``` add PhotoSwipe to manifest.json: ``` ... "modernizr.js": { "bower": ["modernizr"] }, "photoswipe": { "bower": ["photoswipe"] } ... ``` After run `gulp` I get 2 images from PhotoSwipe in “/dist/images/”, but nothing for js and css. Sage 15/6/20 bower v.1.4.1 Any hint? More info: If delete “photoswipe” section from manifest.json - compiled “main” script and style include PhotoSwipe files. But nothing for the SVG file. --- ## Post 13 by @Pablo_Gates — 2015-12-17T14:40:50Z `bower.json`: ``` { "name": "sage", "homepage": "http://roots.io/sage/", "authors": [ "Ben Word " ], "license": "MIT", "private": true, "dependencies": { "modernizr": "~2.8.3", "fastclick": "~1.0.6", "jquery-flipster": "~1.0.1", "owl-carousel": "~1.3.2", "components-font-awesome": "~4.5.0", "foundation-sites": "~6.0.5", "motion-ui": "~1.1.0" }, "overrides": { "modernizr": { "main": ["./modernizr.js"] } } } ``` `manifest.json`: ``` "dependencies": { "main.js": { "files": [ "scripts/**/*", "scripts/main.js" ], "main": true }, "jquery.flipster.js": { "files": ["../bower_components/jquery-flipster/src/jquery.flipster.js"], "main": true }, "main.css": { "files": ["styles/main.scss"], "main": true }, "jquery.flipster.css": { "files": ["../bower_components/jquery-flipster/dist/jquery.flipster.css"], "main": true }, "editor-style.css": { "files": ["styles/editor-style.scss"] }, "jquery.js": { "bower": ["jquery"] }, "fastclick.js": { "bower": ["fastclick"] }, "owl.carousel.js": { "bower": ["owl-carousel"] }, "modernizr.js": { "bower": ["modernizr"] } }, "config": { "devUrl": "http://192.168.0.200:8888/genesis_it/" } } ``` Owl carousel doesn’t work :frowning: Don’t compile in `main` add new jquery libs has been very hard --- ## Post 14 by @noudilus — 2015-12-22T20:53:17Z Owl Carousel doesn’t work for me either. Bower.json override: ``` "owl.carousel": { "main": [ "./src/scss/*", "./dist/owl.carousel.js" ] }, ``` It compiles to main.css but doesn’t seem to do anything… --- ## Post 15 by @Twansparant — 2015-12-22T21:04:00Z I don’t think it needs an override, in the owl.carousel’s **bower.json** the **main** is declared correctly: ``` "main": [ "dist/owl.carousel.js", "dist/assets/owl.carousel.css" ], ``` --- ## Post 16 by @Pablo_Gates — 2015-12-22T21:32:27Z for some reason my gulp had buggy thanks, solved! --- ## Post 17 by @kalenjohnson — 2015-12-22T21:48:41Z > [@noudilus](#): > > “./src/scss/\*”, You shouldn’t need to include a star, there should be one entry scss file. And that should be added via wiredep to your `app.scss` file, just like Bootstrap’s files. I don’t know if a star will work with scss files anyways. --- ## Post 18 by @noudilus — 2015-12-23T19:09:19Z @kalenjohnson and @Twansparant, thanks. @Twansparant is right. Owl css and js compile with gulp. Unfortunately something else is going wrong. I can find the classes (like ‘owl-item’) in my compiled main.css, but the properties are not applied to the element with the corresponding class… I will post the solution here once I find it. Update: Turns out I had to manually add .owl-carousel class to the wrapper to make the css selector add it’s properties. :laughing: --- ## Post 19 by @marmitta — 2015-12-29T19:24:15Z I’m trying to add my first frontend package to Sage 8.3.0. I’ve spent hours on this. The package is De Sandro’s Masonry. First (and only?) step should be simply using bower: `bower install --save masonry` From what i had understand reading the documentation, Gulp with asset-builder should collect js file marked as `main` in package’s `bower.json`, and that’s ok. That package is very simple, only one file js, no issue here. ` ... "description": "Cascading grid layout library", "main": "masonry.js", "dependencies": { ... ` I suppose the `.js` should “compile” in `dist/scripts/main.js` without any extra steps, like stated in the documentation. Should be not necessary to add manually masonry to `manifest.json` What happens after launching ‘Gulp’ is that my `main.js` is compiled badly without masonry and others custom behaviour script. No errors at all by Gulp are shown processing. Reading this post i have tried to set an override and use mainfest.json to separate the `masonry.js` from main, but in any case i’m not able to get my dist `main.js` back to work, until i remove masonry package from `bower.json` dependencies… I’m not able to understand if my issue is related to the library or wrong workflow… --- ## Post 20 by @Twansparant — 2015-12-29T19:39:41Z > [@marmitta](#): > > I’m not able to understand if my issue is related to the library or wrong workflow… Have a look at the **Isotope** chapter here: [https://roots.io/using-bootstrap-with-bower-how-to-override-bower-packages/](https://roots.io/using-bootstrap-with-bower-how-to-override-bower-packages/) Probably same issue with the bower.json: [https://github.com/desandro/masonry/blob/master/bower.json](https://github.com/desandro/masonry/blob/master/bower.json) Try overriding it with the` ./dist/masonry.pkgd.js` file --- ## Post 21 by @marmitta — 2015-12-30T12:06:16Z > [@Twansparant](#): > > Try overriding it with the` ./dist/masonry.pkgd.js` file Thank you for the advice, it seems to point in the right direction as a asset-builder issue, [like stated here](https://github.com/austinpray/asset-builder/wiki/User-Contributed-Examples). I have luckily found also an Austin Pray’s hint [in this post](https://discourse.roots.io/t/best-practice-when-overriding-main-files-of-bower-sub-dependencies/3590/6) so i used: ` “overrides”: { “masonry”: { “main”: [“./dist/masonry.pkgd.min.js”], “dependencies”: {} } } ` And i got at least my main javascript back to work. For what i had understand, these issues are probably caused by library’s dependencies misconfigured in package’s `bower.json` . Not already checked if Masonry is properly working but now it should. Steep learning curve with these tools… --- ## Post 22 by @shwaydogg — 2016-08-02T19:46:16Z I’m having trouble adding the Materialize Bower Package following the steps above. Any ideas: [https://stackoverflow.com/questions/38705866/steps-to-add-materialize-bower-package-to-sage-theme](https://stackoverflow.com/questions/38705866/steps-to-add-materialize-bower-package-to-sage-theme) --- ## Post 23 by @cfx — 2016-08-03T00:14:29Z It looks like you’re not actually _using_ Bower. Simply adding the Materialize project to your JSON configs and attempting to include it manually isn’t using Bower. I ran `$ bower install materialize --save` in my theme dir and it worked instantly (although I did need to make several overrides to get SASS and fonts working correctly).