The goal of this post is to provide a simple description of how to install Bower JS and how to use Bower JS to manage client side dependencies. The first time I tried to use Bower I had problems. Hopefully this tutorial will provide others a complete resource to navigate around the issues that I found.
- You are a Windows developer
- You will use the Windows Command Prompt instead of Bash
- You have little or no knowledge of Node.js
- You have little or no knowledge of GIT
1. Download and install Node.js
To run Bower you will need to download and install Node.js. Go to http://nodejs.org/ website and select the “install” button (see image below). This should download the version of Node.js you need. For me, when I clicked the “install” the version for Windows 64-bit downloaded. Once Node.js is download, execute the file.
I will not go thought the steps for installing Node.js; it’s very straight forward. During the install I used all default options.
2. Confirm Node.js is installed
When Node.js installation has completed we need to confirm it was installed successfully. Open a Windows Command Prompt and type “Node” and [enter]. You should get prompted with a “>”.
(If you previously had Windows Command Prompt open, you will need to close it and reopen it. The reason is that Node will be added to Environment Variable Path. If the Command Prompt is open when you install Node, it will not have the new Node Path.)
Now at the prompt type something like “2 + 2″ and [enter]. You should get a result. I got back 4. Now we have confirmed that Node.js is installed correctly. You can quit Node.js by using the keyboard and typing [ctrl]+C twice.
3. Create Folder Structure
Create the following folder structure.
(In the image above, ignore “External Libraries”. This is part of the WebStorm IDE)
4. Install Bower
Use Node Package Manger (npm) to install Bower. Since we are using the “-g” (global) switch we can install Bower from any directory.
(The npm statement is case sensitive.)
5. Test Bower is Installed
Since we will want to install the dependencies in the “app” direction, go ahead and navigate to the “app” directory”
Lets do a Bower search for jQuery. Remember, it is case sensitive
There is a ton of jQuery libraries. But that’s okay.
6. Install Dependencies (jQuery & Underscore)
In the command window enter “bower install jQuery” and press [Enter]. Again remember case sentitivity.
You may receive an error if you do not have GIT installed.
From Bower’s website (bower.io) you can get to GIT’s (git-scm.com) website to down GIT.
From GIT’s (git-scm.com) download GIT
When I installed GIT, I used all the defaults. But a key option that needs to be select is to “Run Git from the Windows Command Prompt”. This will add the PATH variable for Git.
8.Install Dependencies (jQuery & Underscore) – Again
Important – Close the current Command Prompt. If you attempt to install jQUery again with the current command prompt you will get the same error.
Open a new Command Prompt and navigate to the “app” directory that we created previously.
Install jQuery using Bower. Remember, it’s case sensitive.
Now install Underscore
9. Confirm Dependencies
There should be a new directory create by Bower call “bower_components” this is where jQuery and Underscore should have been installed at.
No you can go out and create your application without having to worry maintaining client side dependencies.
I hope this helped.
Really helpful but what is benefit of using Bower while we can just link jquery and underscore from CDN directly.
And also why in your last pic jquery and underscore folder has many other folders and files?
Thanks very much. In step 3 the WebStorm bit comes out of the blue – you just lost everyone who does not use it, but fortunately I do. Thanks for taking the time to create this easy-to follow post.
I was trying to install Zurb Foundation 5 SASS version and being a newbie to Ruby and Git followed their instructions and installed both before running the Bower-based install. Their documentation mentioned nothing about the install options required so I went with the defaults (not the smartest, I know but it was a means to an end).
Your point about ensuring the checkbox to Run Git from Windows Command Prompt was a lifesaver and put me onto the right path.
Thanks for your helpful and insightful post.
Awesome I was searching in the web for an hour to know how to install bower. Gave me a start up thanks a lot……………………………….
This is really simple and great step by step explanation. Thanks.
thanks for a great tutorial to install Bower on Windows. It was hard to find a good tutorial for Windows user, this was the best one and very well explained.
Awesome. Iam searching hours for this tut. !! very very good, Thank you so much
Thanks a lot. This resolved my issues with bower installation.
Life saver. Thank you so much
I had a problem here with the Environmental PATH not updating on installing both Node.js and GIT. It can be solved by doing 1 of 2 things. 1. Quit and restart Windows Explorer from the Windows Task manager (end process, then new task -> ‘explorer’) or simply restarting your computer. A closing of the command prompt is not enough. Seem many other had the same issue.
You may want to add that open cmd.exe as “Run as Administrator”, so that the steps succeed. I had to redo as Administrator as the non-admin console didn’t succeed.
Terrific tutorial. Thanks for saving me much time!
very good tutorial for installing bower on windows! thanks you
Thank you! This tutorial has saved my time. In my first time installing bower, I got an error because I didn’t set up git correctly. After reading this tutorial, I know the problem was my git setup and fixed it.
Great! Thanks for providing this tutorial!
Nice – great tutorial. I would suggest you add a hint in the Node.js install section that if Node won’t run from Windows command prompt, you may need to reboot Windows and try again, because the path environment variable may not get updated until after restarting.
Thanks a lot for KickStart with Bower.IO
The first dot points, I said to myself, hey that’s me! Kudos, just trying out the tutorial now, cheers.
Thank you, it helps a lot
It was really a great tutorial
Great Job! keep going!
Really Helpful, Thanks !!!