Ubuntu Web Programming

Install Bower Package Manager in Ubuntu 14.04

S Ranjith      

Bower is a package manager for a web application. It offers a very simple and effective solution to front end package management problem. Bower can mange all kind of packes, even if HTML, CSS or Images and scripts also. A package is a third party code or library used in a web application. A package is a third-party code or asset usually accessible from a Git repository.

And Bower solves the problem of maintaining the third party libraries .  Bower+ Grunt is a perfect combination for development.

Install Bower in Ubuntu 14.04

Bower depends on Node and npm. for instlling Bower into ubuntu we need node and npm installed into the system.

bower

Install NodeJs and npm in Ubuntu 14.04

sudo apt-get install nodejs

— these command install node.js

Now is NodeJs installed and executable as /usr/bin/nodejs

If you try run /usr/bin/env node this create and error:

$ /usr/bin/env node
/usr/bin/env: node: No such file or directory

Fix the error you can create a symlink. (ln -s /usr/bin/nodejs /usr/bin/node) or just install nodejs-legacy. This package create a symlink for you.

$ sudo apt-get install npm-legacy

Now NodejS work fine.

$ /usr/bin/env node                 
>

—

Next install npm, the node package manager. issue the command to install it.

sudo apt-get install npm

Bower also requires git to be installed as some bower packages require it to be fetched and installed. Install git on Ubuntu 14.04 issue the following commands

sudo apt-get install git-core

—

Now install bower in ubuntu 14.04

sudo npm install -g bower

Check Bower version

$ bower -v
1.3.10

Using Bower in your Project

Let’s see how we can use Bower in your project to manage package dependency for the  project.

Go to your web server’s root directory:

cd /var/www

Create a new folder and go inside the folder

mkdir project
cd project

This will be the project’s root directory. Let’s assume that the project will use Twitter Bootstrap for front end creation. We can use it by downloading the zip file and unpacking the files on the web server. However with Bower, we can turn our project into a package, declare Bootstrap as a dependency, and have Bower fetch it for us. For this we need a file called bower.json that will list the dependencies. In here, we will include Bootstrap.

So create a new file called bower.json in the root of your project:

gedit /var/www/project/bower.json

and paste in the following:

{
  "name": "my-project",
  "dependencies": {
    "bootstrap": ">= 3.0.0"
  }
}

Save the file and exit. The project now has Bootstrap 3.0 set as a dependency. To fetch the library and install by using Bower run the following command (remember to add –allow-root if you are operating as the root user):

bower install

You’ll now notice that a new folder was created in your project called bower_components where you’ll see two new folders: bootstrap and jquery. Jquery is automatically installed into the project because  Bootstrap requires jQuery. All the dependencies of bootstrap automatically managed by bower.

If you want to see which packages you have already installed on your webser in the project, run the following command:

bower list

If you want this list to contain the paths to the files you need to include in the application you are building add the –paths option:

bower list --paths

Another way to install a package is by using the install command and specifying the actual package name you want to be installed on the server. So let’s create another project folder and install Bootstrap into that project.

cd /var/www
mkdir project1
cd project1

Now that we are in the new project folder, run the following command:

bower install bootstrap

You’ll see the same effect happen and in a much faster way. Note that you can use Bower in this way to install virtually anything at the end of a git endpoint or URL not necessarily found on the Bower components website. So for instance, running the same command but replacing bootstrap with a git address would fetch that git project:

bower install git://github.com/aproject/a-package.git

Or even a zip file that would get extracted into the folder:

bower install http://www.mylibrary.com/mypackage.zip

To uninstall a package you had installed locally for your project, you can run the following command:

bower uninstall bootstrap

You should, of course, replace bootstrap with the name of the project you’d like uninstalled.

That is it. Managing HTML, CSS, javascript libraries, images, fonts everything is in just a line. That is bower.

A very easy life for a programmer.

Leave a Reply