Bower – A Package Manager for Front-End Web development

In a WEB Application we often deal with lot of third party libraries and dependencies, maintaining them would a a pain process. So to solve this problem, there are many Package Manger tools introduced, among them the most important and the best option would be ‘Bower‘. In this post, i will discuss the following:

• What is Bower?
• Why do we need Bower?
• How to use Bower in front-end development?

What is Bower?

As web development is matured, the tools for developing front-end development is also getting matured. There are various frameworks and libraries are available for front-end development. It is not surprise to see today that the people are using various frameworks and libraries within a single project. So we need a tool to manage all frameworks and libraries in our project. Thanks to Bower which satisfies the above need. Bower is a package manager which manages all html/css and javascript dependancies (It can be used to search , install, uninstall web assets like JavaScript, HTML, and CSS).

Why do we need Bower?

1. It is Automatic: With Bower, you don’t need to download and install any packages manually. It will do it automatically for you. You can search what package you want with which version using bower in single place (with in command terminal) and you can install required package with given version. Thus it is fully automatic and saves you more time in development.
2. Offline Usage: Whenever you download and install packages using bower. It makes 2 copies in your system.Bower creates a .bower folder in the users home directory where it downloads all the assets and keeps them available for offline usage when you install a package. Bower is similar to the *.m2* repository for the popular Maven build system. Each time you download any repository it will install that library in two folders — one in your application folder and another in the .bower directory under the user’s home directory. Thus when you need the same package again for the different project, it will install your dependancy from your local repository which aids offline usage.
3. Don’t Care of Package Versions: Bower contains a file called Bower.json . Whenever you download and install any frameworks/libraries in your project, it creates a project dependancy in bower.json file . The information such as the name of the package installed with version are stored in the bower.json file. So you don’t need to care of what version of package file you are using it in your project.
4. Install Packages through Bower.json: With Bower.json you can able to install many packages with given version at once. All you need to do is mention what package you want with version inside the dependencies array as below. Just hit Bower install. It will install the given package with given version inside your project file.
   

   {
       "name":  "MyProject",
       "version": "1.0.0",
       "dependencies": {
           "backbone": "latest",
           "jquery":"2.1",
           "requirejs": "2.1.1"
       }
   }

5. Keep your Package files up-to-date: Suppose a new version of a library is released with an important security fix, in order to install the new version you just have to run ‘bower update <package_name> in the terminal which will update the library file to the latest version available.

How to use Bower in front-end development?

To use Bower in your project, you need to have installed Bower and node.js (as Bower runs on the top of node.js)in your system. I have posted details on installing bower over here. After installing bower, you can able to install any of the html/css/js dependencies. Before installing any package file, you can able to search package file using bower with the following command. It will show you the list of jquery libraries with versions available.

bower search <package_name>
Example say 'bower search jquery'

You can able to install any of the dependency by typing

bower install <package_name>
Example, say bower install jquery.

You can able to install any of the dependency with given version using

bower install <package_name>#<version>

You can also able to install any of the dependency using git-hub url,

bower install git://github.com/components/jquery.git

You can able to update any of the dependency using

bower update <package_name> or bower update <package_name>#<version>

You can able to uninstall any of the dependency using

bower uninstall <package_name>

After installing the dependency in your project, you can then add the corresponding file path as a dependency inside your index.html file. Hope this post helped you in understanding Bower better. If I miss anything share with me in comments.

Subscribe, Like and Share

The post Bower – A Package Manager for Front-End Web development appeared first on Techie Dreams.