Getting started with Bower – A package manager for web.

bower main image
  1. What is Bower:
    • A package manager for a web (front-end) that manages all your application’s front-end dependencies.
    • It is used to install the right versions of the packages which are needed and their dependencies.
    • It keeps track of all the packages and making sure they are up to date.
    • It can manage components which contains HTML, CSS, JavaScript, fonts or image files.
  2. Installing Bower:
    • It is a command line utility and installed using npm. So Bower requires node, npm and git and command to install:
      npm install -g bower
      (-g is if you want to use it as a command line tool)
  3. Finding Packages:
    • bower search <query>
      Example: bower search jquery
      Example: bower search modernizr

    • You can also find package using the online component directory at https://bower.io/search/
  4. Installing Packages:

    • bower install <package>
    • Example: bower install jquery
      Example: bower install modernizr
    • Installed packages will be present in a bower_components directory. This is created in the folder which the bower program was executed. The package path can be changed using the configuration options in a .bowerrc file.
  5. Installing Packages Using a bower.json File:
    • It would be tiresome to manage to install multiple libraries/packages in an application individually using above commands so bower.json file help to manage multiple packages using the single command.
    • bower.json looks like below and it needs to present in the root folder where the application is present.
      {
          "name": "app-name",
          "version": "0.0.1",
          "dependencies": {
              "sass-bootstrap": "~3.0.0",
              "modernizr": "~2.6.2",
              "jquery": "~1.10.2"
          },
          "private": true
      }
    • In above:
      name: Name of your application/package.
      version: Version number for your application/package.
      dependencies: The packages that are required by your application. You should specify a version number for each of these packages as shown in the example above. Specifying latest will cause Bower to install the most recent release of a package.
      private: Setting this property to true means that you want the package to remain private and do not wish to add it to the registry in the future.
    • Now, using below command will install all packages with a specific version or latest as defined in bower.json under ‘dependencies’ key value.
      bower install

  6. Listing Installed Packages:
    • bower list
      (It also checks to see if a newer version of each of the packages is available and show with the listing)

  7. Updating Packages:
    • bower update
      (Update all packages with the specific version specified or to latest if the version is specified as latest in bower.json)
    • bower update <package>
      bower update jquery
      (To update specific package)
  8. Uninstalling Packages:
    • bower uninstall <package> <package> <package> ... <package>
      Example: bower uninstall jquery modernizr
      (It can uninstall multiple packages at once)

Reference:
https://bower.io/
http://blog.teamtreehouse.com/getting-started-bower

About the Author

Sandeep Agrawal
working @ Kalpavruksh Technologies as Software Engineer. I am a simple and straightforward person adaptable to any environment and work culture. Like to work in a creative and challenging environment using cutting edge technologies where I could constantly learn and successfully deliver solutions to problems.

3 Comments on "Getting started with Bower – A package manager for web."

  1. Great article Sandeep. Hope to see more such articles. 🙂

Leave a comment

Your email address will not be published.


*


8 Shares
Tweet
Pin
Share5
Share3
Share
%d bloggers like this: