Quick Background to this series:Just over a year ago I started to get into web development because I wanted skills to help me start a business. I discovered that web development and programming in general was incredibly interesting, demanded creativity and was potentially staggering in scope and complexity. I’ve been hooked since. During my journey I’ve been frustrated countless times by tutorials which are just annoyingly difficult to follow – full of assumptions which would cause me to stumble. So I’m going to write some that are easy to follow, written for people like me who are self-taught. That is to say, I’m going to be really patronizing.
Bower – why should you care?
Because it makes building complex websites/applications easier, and learning how to use it will save you time in the long run. And because loads of boffins use it, so if you want to work with them or learn from their code, you’ll need to understand it too.
Bower -What is it?
Basically it’s npm for the front-end – which means that it installs stuff your app might need (like jQuery) for you without you having to download and maintain it.
*Caveats: *“Part 1″ of this series is starting in pretty random place. In order to follow this tutorial, it is assumed you have a grasp of:
If you don’t feel comfortable with these, there’s a wealth of info on the web, but I’d personally recommend:codecademy if you’re broke, and codeschool if you don’t mind paying a few bucks. Also checkout my post onhow to learn them quickly for a good primer
- node.js – This might be massively off-putting, but I’ve made the node.js parts of this tutorial absolutely as simple as possible.
The answers to this question on stackoverflow (an incredible coding resource – perhaps the greatest) contain a lot of useful information about getting started with node.js.
Finally, examples and processes in this post are on a Windows machine.
Alright, let’s get cracking.
If you head over the Bower website you will find what devs call ‘The Documentation’, which means explanations/examples and general reference information. Bower’s description is given like so:
“Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.”
Gawd, so what the hell does that mean? I’ve read James Joyce’s Ulysees twice and still that kind of stuff makes my head feel funny. Here’s my translation:
In order to explain how it does this, we will create a demo web app. This is going to be as simple as I can possibly make it. The full source code is available here
1) server.js the node.js server) with the following code (note that you’ll have to install the Connect middleware using npm (see the section below on installing bower via npm for more detail, the command you’ll want is “npm connect”):
So here I’m listing as a dependency for my project “jquery” – notice that I’ve specified which version (2.0.3) I want. The “~” symbol, means any version later than 2.0.3, but not any versions later than 2.1.0 (in case an update isn’t backwards compatible). This is the science of update management – a deep rabbit hole we won’t go down now.
Right! So let’s enjoy the fruits of our labor. Recall that in our bower.json file we specified our dependencies – in this case, jQuery? Now, in the command prompt (you will need to navigate to the directory where you have saved the bower.json file) use the following command:
This creates a new folder in your directory called “bower_components” and inside this folder you will find jQuery downloaded and ready to use. It has been downloaded by typing that one command.
In our index.html file, we include the link to jQuery inside a script tag:
Note that the first time I tried to do this I received the following error:
“ENOGIT git is not installed nor in the PATH”
This puzzled me as it implied I hadn’t installed Git (a version control system which is required for node – you get it here)…but I had. A bit of searching revealed that when you install Git you have to ensure that the second box on the screen below is ticked:Run Git from the Windows Command Prompt.
So, install Git with this option selected, close and reopen your command prompt (again, navigating to your project folder), and you’re now good to go.
Now bear in mind this is an incredibly simple example. Of course for a project of this size you wouldn’t bother with Bower. But a reasonable web app will usually have numerous dependencies: jQuery, coffeescript, Backbone.js, underscore.js, Bootstrap, require.js – the list goes on. I’d say that the key benefit of Bower is that it makes it extremely easy for you and others to update and keep track of which versions you are using. It’s a question of just checking/editing the bower.json file. This is much easier than hunting for the files yourself. It also has benefits when it comes to modular loading, which I’ll be exploring in my next post on require.js.
Source Code for the demo in this post is here.