Applications grow in size and complexity by the day, and as new needs arise, new tools do too. Bower is one of them, let me tell you about it.
One day, you’re just bringing in jQuery into your nice little project, and then, suddenly, in a weeks time, you need to keep track of a framework, plugins, JS and CSS libraries and whatnot for this other side thing you’re doing. You may just keep a long txt file with a list of CDNs or an overloaded library folder with all of your favorite resources, and that is okay. You’re just missing out on the greatness of Bower, your new best friend.
Today, I’m going to show you the power of NPM and Bower working in tandem. I’ll expand on this in future posts by bringing in a few more tools (Gulp/Grunt, RequireJS, Webpack/Browserify) that you’ll surely find useful, I promise!
Bower is a very handy tool that fetches and brings in anything that you need for your project. That means libraries, frameworks, assets and, according to the official site, rainbows too. Anything that you may ever need is a few keystrokes away.
Before we get into the matter though, we need to get a couple dependencies set up; namely: NPM (Node Package Manager) and Git. Let’s get started.
Installing Git
First of all, get a hold of Git SCM. Once you get to the Adjusting your PATH environment step, pick the Use Git from the Windows Command Promp option. Picture related:
From this point on, keep the default settings, as they’ll do fine.
Installing Node.js + NPM
Grab the Node.js installer from the official site and install it using the default settings. Once finished, open up your Command Line or Terminal and type in the following command:
node -v v5.1.0
It does not matter what version shows up there, we’re just making sure that Node.js is installed and usable from within the console. You can also check what NPM version you have installed by running:
npm -v 3.3.12
Installing Bower
With NPM running, installing Bower is easy as pie. Open up the Command Line/Terminal and use the following command:
npm install -g bower
This will install the package globally (-g flag) on your machine. You should be able to run the following command to make sure that Bower is running:
bower -v 1.5.2
Using Bower for Glory and Honor
Now that we’ve got our friendly birdman up and running, we can start using it to our hearts content. Imagine that I just started up a new project in my C:AwesomeProject folder. I want to use a few external tools: jQuery, React, Font Awesome and Normalize CSS.
Well, I just need to:
C:> cd AwesomeProject C:AwesomeProject> bower install jquery react font-awesome normalize.css
And that’s it! I now have a bower_components folder inside my project folder with everything that I need ready to go. Ideally, I would bundle up the JS and CSS files with another tool (we’ll get to that!), but we can start using them right off the bat by adding them to our project from within the bower_components folder like so:
http://bower_components/react/react.min.js
There we go! All set and ready for coding, Bower bring some very nice quality of life improvements!
You can browse through registered Bower packages here. You can even use git repository endpoints or just plain URLs to download anything off anywhere!
There is much more to it than what I’ve shown you here, go ahead and visit the official Bower site, and stay tuned, I’ll be following up on this guy soon.
Give it a shot and see how you fare. Remember that I will be following up on this topic in future posts as I introduce new tools that improve the overall workflow of the development process. These tools may seem like too much at first, but once a project starts getting big and complex, everything starts making sense.
StartJS 