{"id":189389,"date":"2014-11-28T07:30:35","date_gmt":"2014-11-28T14:30:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=189389"},"modified":"2017-04-12T16:59:31","modified_gmt":"2017-04-12T23:59:31","slug":"whats-great-bower","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/whats-great-bower\/","title":{"rendered":"What&#8217;s So Great About Bower?"},"content":{"rendered":"<p><em class=\"explanation\">The following is a guest post by Dan Sundy from <a href=\"http:\/\/heliosdesignlabs.com\/\" rel=\"noopener\">Helios Design Labs<\/a>. Dan is both going to explain how to use Bower and make a case for doing so, from the perspective of someone who resisted the idea at first.<\/em><\/p>\n<p><!--more--><\/p>\n<p>When I first started working with Bower I didn&#8217;t quite get the appeal. &#8220;Seriously?&#8221; I thought. &#8220;Now it&#8217;s too much work to download and unzip a file?&#8221; I also wasn&#8217;t super excited about cramming a bunch of new commands into a brain that was already bulging at the seams with Git, Grunt, Gulp, Jekyll, Node, etc.<\/p>\n<p>There are two things I would tell that half-a-year ago version of myself. First, Bower can do a little bit more than download a file or two. Second, spending an hour learning a tool that will eliminate a repetitive task is worth it.<\/p>\n<h3>First Things First: What the Heck is Bower?<\/h3>\n<p>For the uninitiated, Bower is a package manager. It&#8217;s good at, well, managing packages&mdash;anything that you depend on an external author for. Good examples are CSS frameworks like Bootstrap, libraries like jQuery, jQuery plugins, or JavaScript frameworks like Angular. The official Bower website, <a href=\"http:\/\/bower.io\/\" rel=\"noopener\">Bower.io<\/a>, probably says it best:<\/p>\n<blockquote>\n<p>Web sites are made of lots of things \u2014 frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.<\/p>\n<p>Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you\u2019re looking for.<\/p>\n<\/blockquote>\n<h3>Prerequisites<\/h3>\n<p>There are some things you&#8217;ll need before you can start working with Bower:<\/p>\n<ul>\n<li><strong>The command line.<\/strong> Yup, it&#8217;s a command line tool (c&#8217;mon it&#8217;s not <em>that<\/em> scary).<\/li>\n<li><strong>Node and NPM.<\/strong> Bower is a Node module so to get it you need NPM.<\/li>\n<li><strong>Git.<\/strong> Bower packages are Git repos. Bower uses Git to understand where the package is, what version it&#8217;s on&mdash;that sort of thing.<\/li>\n<li><strong>Global Installation.<\/strong> Technically you could install it in every project but you&#8217;ll probably want to have it everywhere.<\/li>\n<\/ul>\n<p>To install Bower globally:<\/p>\n<pre><code>$ npm install -g bower<\/code><\/pre>\n<p><em>Note: Depending on your setup you may have to use `sudo npm install -g bower` to install it globally.<\/em><\/p>\n<h3>The Basics<\/h3>\n<p>To start, picture the directory structure for a new site. Mine usually look something like this:<\/p>\n<pre><code>|-.git\/\r\n|-dist\/\r\n|-node_modules\/\r\n|-src\/\r\n|  |-assets\/\r\n|  |-css\/\r\n|  |-fonts\/\r\n|  |-js\/\r\n|  |  |-lib\/\r\n|  |  |-main.js\r\n|  |\r\n|  |-sass\/\r\n|  |  |-style.sass\r\n|  |\r\n|  |-index.html\r\n|\r\n|-.gitignore\r\n|-gulpfile.js\r\n|-package.json\r\n|-README.md<\/code><\/pre>\n<p>There&#8217;s a `src` folder where the bulk of the development work is done. A Gulp build task will eventually prep everything and compile our optimized code into a production-ready `dist` folder.<\/p>\n<p>Let&#8217;s say you want to include jQuery in this project. Usually you would go to <a href=\"http:\/\/jquery.com\/\" rel=\"noopener\">jquery.com<\/a>, find and click on the correct download link, then unzip and put the files in the right directory. <\/p>\n<p>With Bower, just run the following command:<\/p>\n<pre><code>$ bower install jquery<\/code><\/pre>\n<p>Now a `bower_components` directory with a `jquery` folder has appeared.<\/p>\n<pre><code>|-.git\/\r\n|-bower_components\/\r\n|  |-jquery\/\r\n|\r\n|-dist\/\r\n|-node_modules\/\r\n|-src\/\r\n|  |-assets\/\r\n|  |-css\/\r\n|  |-fonts\/\r\n|  |-js\/\r\n|  |  |-lib\/\r\n|  |  |-main.js\r\n|  |\r\n|  |-sass\/\r\n|  |  |-style.sass\r\n|  |\r\n|  |-index.html\r\n|\r\n|-.gitignore\r\n|-gulpfile.js\r\n|-package.json\r\n|-README.md<\/code><\/pre>\n<p>jQuery has made it easy to get their code by creating and registering a package for Bower. Most popular libraries and frameworks have done the same. If you want to check that the asset you want is a Bower package you can do a search:<\/p>\n<pre><code>$ bower search &lt;package-name&gt;<\/code><\/pre>\n<p>If it isn&#8217;t registered, it is still possible to grab repos with git endpoints like this:<\/p>\n<pre><code>$ bower install git:\/\/github.com\/example-user\/example-package.git<\/code><\/pre>\n<p><em>Advanced: If you want to get fancy, you can even install private repos that you have access to. Check out <a href=\"https:\/\/www.youtube.com\/watch?v=ExU_ZcONHxs\" rel=\"noopener\">this video tutorial<\/a> by Rob Dodson.<\/em><\/p>\n<p>Here are some other basic commands you can use to view and manage assets that you have installed.<\/p>\n<p>List all your packages:<\/p>\n<pre><code>$ bower list<\/code><\/pre>\n<p>Get information about any package that you have installed:<\/p>\n<pre><code>$ bower info &lt;package-name&gt;<\/code><\/pre>\n<p>Check for updates with:<\/p>\n<pre><code>$ bower check-new<\/code><\/pre>\n<p>Then, if there are updates, update a package:<\/p>\n<pre><code>$ bower update &lt;package-name&gt;<\/code><\/pre>\n<p>But maybe updating to the latest version broke something. <\/p>\n<p>Install any specific version&mdash;old or new&mdash;with: <\/p>\n<pre><code>$ bower install &lt;package-name&gt;#&lt;version&gt;<\/code><\/pre>\n<p>This is definitely not an exhaustive list. If you&#8217;re interested in getting started I recommend you make a test project and work through one of the many tutorials that can be found online. This one by Treehouse is great: <a href=\"http:\/\/blog.teamtreehouse.com\/getting-started-bower\" rel=\"noopener\">Getting Started with Bower<\/a>. Then you can dig into all the commands by checking out <a href=\"http:\/\/bower.io\/docs\/api\/\" rel=\"noopener\">Bower&#8217;s API<\/a>.<\/p>\n<h3>Hey, But Wait, There&#8217;s More!<\/h3>\n<p>The small dev team I work with has been using Bower for the past year or so. While package management via the command line was great, I wasn&#8217;t sold until we started using the `bower.json` and `.bowerrc` files.<\/p>\n<h4>.bowerrc<\/h4>\n<p>The `.bowerrc` file can do a number of things, but I&#8217;ve mostly seen it used to change the name and location of the `bower_components` directory. (This made me happy because I hated having that random `bower_components` folder floating around in the project root).<\/p>\n<p>Here&#8217;s what a `.bowerrc` file can look like:<\/p>\n<pre rel=\"JSON\"><code>{\r\n  \"directory\": \"src\/components\"\r\n}<\/code><\/pre>\n<p>The directory option sends packages to a location that makes the most sense&mdash;in this case, the `src\/` directory. Have a look at the new project structure:<\/p>\n<pre><code>|-.git\/\r\n|-dist\/\r\n|-node_modules\/\r\n|-src\/\r\n|  |-assets\/\r\n|  |-components\/\r\n|  |  |-jquery\/\r\n|  |\r\n|  |-css\/\r\n|  |-fonts\/\r\n|  |-js\/\r\n|  |  |-lib\/\r\n|  |  |-main.js\r\n|  |\r\n|  |-sass\/\r\n|  |  |-style.sass\r\n|  |\r\n|  |-index.html\r\n|\r\n|-.gitignore\r\n|-.bowerrc\r\n|-gulpfile.js\r\n|-package.json\r\n|-README.md<\/code><\/pre>\n<p>Notice that the `bower_components\/` folder is gone and there is a `components\/` folder in the `src\/` directory.<\/p>\n<p><em>Advanced: It&#8217;s a good idea to use something like <a href=\"https:\/\/www.npmjs.org\/package\/gulp-usemin\" rel=\"noopener\">gulp-usemin<\/a> or <a href=\"https:\/\/github.com\/yeoman\/grunt-usemin\" rel=\"noopener\">grunt-usemin<\/a> to take care of concatenation and minification for all of the extra styles and scripts.<\/em><\/p>\n<p>So how can the `bower.json` file help us out?<\/p>\n<h4>bower.json<\/h4>\n<p>The `bower.json` file looks a lot like Node&#8217;s `package.json`. It is a manifest file that allows you to specify options. Let&#8217;s have a look at an example (which can be generated by running <code>bower init<\/code>):<\/p>\n<pre rel=\"JSON\"><code>{\r\n  \"name\": \"bower-example\",\r\n  \"version\": \"0.0.0\",\r\n  \"authors\": [\r\n    \"author &lt;author@example.com&gt;\"\r\n  ],\r\n  \"description\": \"An example project using bower.\",\r\n  \"main\": \"index.html\",\r\n  \"license\": \"MIT\",\r\n  \"private\": true,\r\n  \"ignore\": [\r\n    \"**\/.*\",\r\n    \"node_modules\",\r\n    \"bower_components\",\r\n    \"test\",\r\n    \"tests\"\r\n  ],\r\n  \"devDependencies\": {\r\n    \"jquery\": \"~2.1.1\"\r\n  }\r\n}<\/code><\/pre>\n<p>A lot of these options are there in case you are registering this repo as a Bower package. But see the <code>devDependencies<\/code> object at the very bottom? That object will be updated automatically if you append <code>--save-dev<\/code> to a Bower command, like this:<\/p>\n<pre><code>$ bower install jquery --save-dev<\/code><\/pre>\n<p>Now if fellow coder runs `bower install`, the computer will install everything from the <code>devDependencies<\/code> list in the folder specified in `.bowerrc`. Similarly, if one developer adds a package or updates a package version using <code>--save-dev<\/code>, the whole team can sync up their assets using <code>bower install<\/code> (after pulling down the latest version of the `bower.json` file).<\/p>\n<p>Since all the hunting and gathering work has been eliminated with the `bower.json` file, there is no longer a need to version any of those assets. The `components\/` folder can be added to the `.gitignore` file to keep your repository <em>lean<\/em> and <em>mean<\/em>.<\/p>\n<pre><code>*.DS_Store\r\n.sass-cache\r\nnode_modules\/\r\ndist\/\r\nsrc\/components\/<\/code><\/pre>\n<h3>Parting Shot<\/h3>\n<p>I was listening to an <a href=\"http:\/\/shoptalkshow.com\/episodes\/140-justin-sainton\/\" rel=\"noopener\">episode<\/a> of my favorite web dev podcast (wink, wink) and the hosts were chatting about whether Bower was actually useful, or just a passing fad. They were wondering if its point is to make downloading easier or whether it is used for updating versions of your libraries, like ruby gems do. They talked about it being a &#8220;front-endy NPM&#8221; (I&#8217;m paraphrasing). <\/p>\n<p>The beauty is, it does all of those things. You can use it for downloading and keeping code updated, but you can take it further. Bower can help you keep project libraries and frameworks in sync, or integrate it with other tools like <a href=\"http:\/\/yeoman.io\/\" rel=\"noopener\">Yeoman<\/a> to trim even more time off your dev setup. Plus, you can create and register Bower packages of your own so that you can install and update them in all your projects quickly (and safely).<\/p>\n<p>Oh, and regarding <a href=\"http:\/\/shoptalkshow.com\/episodes\/140-justin-sainton\/#t=41:35\" rel=\"noopener\">the question that got the discussion started<\/a>: You wouldn&#8217;t use Bower to install WordPress, and WordPress shouldn&#8217;t be in your `bower_components` folder. But you could use Bower within your WordPress theme to manage external assets (just don&#8217;t load libraries like jQuery that are already included in the WordPress core).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is a guest post by Dan Sundy from Helios Design Labs. Dan is both going to explain how to use Bower and make a case for doing so, from the perspective of someone who resisted the idea at first.<\/p>\n","protected":false},"author":248385,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":266303,"url":"https:\/\/css-tricks.com\/gotchas-publishing-modules-npm-bower\/","url_meta":{"origin":189389,"position":0},"title":"Gotchas When Publishing Modules in npm and Bower","date":"February 20, 2018","format":false,"excerpt":"Bower and npm are de-facto the package managers of the web. I doubt there are many front-end developers out there who haven\u2019t heard of them or used them to manage dependencies. Whilst many of us use them as consumers, one day you might decide to share a project of your\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/npm-and-bower-1.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":202780,"url":"https:\/\/css-tricks.com\/tools-to-notify-you-when-dependencies-update\/","url_meta":{"origin":189389,"position":1},"title":"Tools To Notify You When Dependencies Update","date":"June 1, 2015","format":false,"excerpt":"Any given website has, approximately, a whole bunch of dependencies. Take CodePen. The site is Ruby on Rails. Both Ruby and Rails are actively developed, versioned dependencies. There are a good 30+ gems in the project that help us do different internal things (e.g. process Sass into CSS) and user-facing\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":166042,"url":"https:\/\/css-tricks.com\/codekit-2-0\/","url_meta":{"origin":189389,"position":2},"title":"On CodeKit 2.0","date":"March 17, 2014","format":false,"excerpt":"The following is a guest post by Bryan Jones, the creator of CodeKit. I've been using CodeKit for a couple of years now and I've talked about it plenty. In my opinion it changed the game in front end development making it easy to use advanced tools that, while powerful,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":245718,"url":"https:\/\/css-tricks.com\/reframe-js-notes\/","url_meta":{"origin":189389,"position":3},"title":"Reframe.js Notes","date":"September 19, 2016","format":false,"excerpt":"FitVids.js is still a perfectly workable mini plugin for making videos (or anything) responsive. You need it, or something like it, for sites that have things like YouTube or Vimeo videos, Instagram embeds, or really anything that's not responsive in the aspect-ratio sense. \/ resize their width\/height in an aspect\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":256789,"url":"https:\/\/css-tricks.com\/lets-say-wanna-open-source-little-thing\/","url_meta":{"origin":189389,"position":4},"title":"Let&#8217;s say you wanna open source a little thing&#8230;","date":"July 14, 2017","format":false,"excerpt":"Let's say you've written a super handy little bit of JavaScript. Nice! Well done, you. Surely, the world can benefit from this. A handful of people, at least. No need to keep this locked up. You've benefitted from open source tremendously in your career. This is the perfect opportunity to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":269935,"url":"https:\/\/css-tricks.com\/server-side-visualization-with-nightmare\/","url_meta":{"origin":189389,"position":5},"title":"Server-Side Visualization With Nightmare","date":"April 24, 2018","format":false,"excerpt":"This is an extract from chapter 11 of Ashley Davis\u2019s book Data Wrangling with JavaScript now available on the Manning Early Access Program. I absolutely love this idea as there is so much data visualization stuff on the web that relies on fully functioning client side JavaScript and potentially more\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/data-wrangling-with-javascript.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/189389"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248385"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=189389"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/189389\/revisions"}],"predecessor-version":[{"id":189417,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/189389\/revisions\/189417"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=189389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=189389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=189389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}