Skip to content
Home » Getting started with Bower – A package manager for web.

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
      npm install -g bower

      (-g is if you want to use it as a command line tool)
  3. Finding Packages:
    • bower search <query>
      bower search <query>
      Example:
      bower search jquery
      bower search jquery
      Example:
      bower search modernizr
      bower search modernizr

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

    • bower install <package>
      bower install <package>
    • Example:
      bower install jquery
      bower install jquery

      Example:
      bower install modernizr
      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.
      Plain text
      Copy to clipboard
      Open code in new window
      EnlighterJS 3 Syntax Highlighter
      {
      "name": "app-name",
      "version": "0.0.1",
      "dependencies": {
      "sass-bootstrap": "~3.0.0",
      "modernizr": "~2.6.2",
      "jquery": "~1.10.2"
      },
      "private": true
      }
      { "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true }
      {
          "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
      bower install

  6. Listing Installed Packages:
    • bower list
      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
      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 <package>
      bower update jquery
      bower update jquery
      (To update specific package)
  8. Uninstalling Packages:
    • bower uninstall <package> <package> <package> ... <package>
      bower uninstall <package> <package> <package> ... <package>

      Example:
      bower uninstall jquery modernizr
      bower uninstall jquery modernizr

      (It can uninstall multiple packages at once)

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

3 thoughts on “Getting started with Bower – A package manager for web.”

Leave a Reply

Your email address will not be published. Required fields are marked *