Bower – What is it?

Bower is a package manager for web that offers front-end package management solutions. Bower runs over Git and depends on Node.js and NPM (Node Packaged Modules). You can view all the packages available through Bower’s registry here.

This tutorial guides you to install Bower on a VPS running Ubuntu 12.04. Before getting into installation, make sure that you have done the virtual private server set up. Also you need to have Node.js and NPM installed.

Installation of Bower on VPS

First of all, you have to install Git. Here is a tutorial where you can find useful information for setting up Git. In a nutshell, you will be able to install Git using the following command.

sudo apt-get install git-core

Now, to install Bower, run the command:

npm install -g bower

This command will install Bower on your VPS. To view the list of available commands for Bower, run the help command on your terminal.

bower help

In case if you have logged in as the root user, you will have to provide the ‘–allow-root’ option for the command to run.

bower help --allow-root

Usage of Bower in Projects

Here, you will see how Bower can be useful to manage package dependency for your projects.

Create a new folder ‘project’ in your web server’s root directory and navigate inside that directory.

cd /var/www

mkdir project

cd project

This is the project’s root directory. Let’s assume that it will use the Twitter Bootsrtap. You have to download the zip file and unpack the files on the cloud server. The Bower can be used to turn your project into a package, declare Bootstrap as a dependency and make Bower fetch it for you. For that, you will need a file bower.json which will have a list of dependencies. Create the file and edit it to include Bootstrap as a dependency.

nano /var/www/project/bower.json

{

"name": "my-project",

"dependencies": {

"bootstrap": ">= 3.0.0"

}

}

Now, save and exit. Your project will have Bootstrap 3.0 or higher versions set as dependency. For having Bower fetch and install the dependencies, you will have to declare and run the following command.

bower install

In case of root login, you will have to add the ‘–allow-root’ option.

You can see that a new folder created in your project called bower_components. Inside that you will see another set of 2 new folders, bootstrat and jquery. Bower depends on jQuery too. Hence the folder jquery.

For displaying a list of packages you have already installed for the project on your VPS, run the command.

bower list

You can view the paths to the files required for a particular application by adding ‘–paths’ option to the command:

bower list --paths

There is another way for installing a package specifying the actual package you want to install on your VPS. That’s by using the ‘install’ command.

Let’s see how it’s done. Create a new project folder and install Bootstrap.

cd /var/www

mkdir project2

cd project2

From the newly created project folder, run the command:

bower install bootstrap

With this command too, you will see that the results were almost the same as done earlier, except that it was much faster now. Thus, Bower can be used for installing virtually anything at the Git end point or url, not so much found on the Bower components website.

For example, if you run the command by replacing bootstrap with a git address, it would fetch the git project.

bower install git://github.com/someone/some-package.git

Even a zip file will get extracted into the folder using the command:

bower install http://www.example.com/package.zip

For uninstalling a package that you already installed in your project, run the following command:

bower uninstall bootstrap

You can replace bootstrap with the name of your projects that you would like to be uninstalled.