Frontend package and dependency management with Bower

Bower

You install android or ios application from Google play store or Apple store. Google play store or Apple store are central repository where you can manage your apps like install, uninstall also check dependency that app will work on Android 2.3 or Android 4.1 etc.

Similarly we have bower.io to manage front-end dependency. A central repository where almost all popular packages has been stored. We’ll browse for needed package and install/update/uninstall via bower.

Install Bower

Before installing bower make sure that you have node and npm installed on your machine. Let’s install node and npm will download automatically with node.

If you are in windows, download .exe file from nodejs.org and install.

In Mac system download .pkg file and run through the install process

In Linux environment, such as Ubuntu you can install through below command in terminal:

sudo apt-get install nodejs nodejs-dev npm

Check is node or npm installed or not in your terminal. In windows open Node.js command prompt

node -v

npm -v

Now it’s time to install bower in your system with simple npm install command. We’ll install bower globally so we don’t have to install bower for every project.

npm install -g bower

Lets get started with a practical example

In this example we’ll download/install jQuery into our project directory

Create a project directory, and then cd into the directory

mkdir bower_test

cd bower_test

Now install/download jQuery. You can search library name in bower.io

bower install jquery

You can also mention version number

bower install jquery#1.8.3

you can install/download your library form any link or github (username/repository_name)

bower install jquery/jquery

bower install https://coderexample.com/jquery.js

jquery will be downloaded “bower_test/bower_components” directory. Now you can include in your project file by script tag.

<script src="bower_components/jquery/dist/jquery.min.js"></script>

bower.json

Its better to list all packages name when you are working with more than one package. bower.json file contains information about all of our package’s list, dependencies, project name, version etc. we’ll create bower.json file for our project.

{
  "name": "bower_test",
  "version": "1.0.0",
  "dependencies": {
    "jqueryui": "~1.11.3",
    "jquery": "~1.10.2"
  }
}

bower install

Now if we run “bower install” command, It will automatically download all packages into our project directory same as composer.json for php or packages.json for npm. Very simple. isn’t it?

Updating Packages

Just edit bower.json file according to your needs and run “bower update” command.

bower update

{
  "name": "bower_test",
  "version": "1.0.0",
  "dependencies": {
    "jqueryui": "~2.1.4",
    "jquery": "~1.10.2"
  }
}

Add more package

you can add more package editing bower.json

{
  "name": "bower_test",
  "version": "1.0.0",
  "dependencies": {
    "jqueryui": "~2.1.4",
    "jquery": "~1.10.2",
	"bootstrap": "~3.0.0"
  }
}

Alternatively you can run below command.

bower install bootstrap -save

Here we are downloading bootstrap library package into our project directory, where “-save” updating bower.json file.

Uninstalling Packages

To remove any package from project directory simply run

bower uninstall jqueryui

Conclusion

The biggest benefit of bower is for managing dependencies that are not javascript at all. Bower is developed solely for any front-end Development. Its is created by twitter. Smart developers are always keen to increase their productive time. Bower helps them to manage complicated package and dependency easily.

  • Shantanu Sarkar

    Nice article Arka. Keep up the good work.

  • Pankaj Pandit

    Great article. very much useful for us