Kick-Start: Bower – A Simple Tutorial of Setting-Up and Using Bower.JS

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.

Assumptions:

  • 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

The primary reason to use Bower is so that you do not have to manage client side dependencies (css, JavaScript, and etc). Here we will install Bower so that we can use it latter to manage dependencies.

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.

Install GIT

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.

10. Finished

No you can go out and create your application without having to worry maintaining client side dependencies.

I hope this helped.

About these ads
This entry was posted in JavaScript and tagged , . Bookmark the permalink.

10 Responses to Kick-Start: Bower – A Simple Tutorial of Setting-Up and Using Bower.JS

  1. 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?

  2. Ted says:

    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.

  3. Peter Gibb says:

    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.

  4. srikanth says:

    Awesome I was searching in the web for an hour to know how to install bower. Gave me a start up thanks a lot……………………………….
    Srikanth

  5. Indresh says:

    This is really simple and great step by step explanation. Thanks.

  6. Vien Hoang says:

    Hi,
    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.

    Thanks again!

  7. Ron says:

    Awesome. Iam searching hours for this tut. !! very very good, Thank you so much

  8. Thanks a lot. This resolved my issues with bower installation.

  9. zergakyuk says:

    Life saver. Thank you so much

  10. alfredburns says:

    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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s