User Bower As Package Maintenance and publishing tool

 20-Dec-2015   nityaprakash     packaging  publishing  bower  opensource    Comments  0

Bower is a package maintenance and publishing tool for client side packages. It helps installing, uninstalling & updating the client side packages like bootstarp, jquery, angularJs, Jasmin etc. Managing client side library/packages are little cumbersome to manage. Some libraries we need at the time of development which is not required in production. Handling those case manually is some time irritating. This article provide brief introduction and some useful commands to user bower.

Installing Bower

Bower is available for Windows, Mac OS X and Linux. Pre-requisite for Bower is node.js. We have to install node first, in-order to install bower. Node can be installed from node download page. If we are installing node for windows than, we have to install msysgit. When installing 'msysgit' for windows, on third step select the option Use Git from the Windows Command Prompt as per the screenshot below:

GitHub Logo

Because bower is npm package, so we had to install node.js and its dependencies first. If we are installing on Mac OS X or Linux, we don't need to install msysgit.

Open Node.js Command Prompt and run command


npm install Bower

We are ready to use bower as our client side package manager.

Installing & Managing Package

Installing and manage client side package is easiest part here. Just run below command with desired bower package.


bower install jquery

In above example command will download and install bootstrap package in current folder where command is run. First thing it will create bower_components by default. But my requirement is to have all third party client side libraries in Lib folder and want to refer these script/css from that location. We can do it manually by renaming bower_components to Lib, but then update/uninstall command wont work as it doesn't know the location where installation happened.

In order to achieve this flexibility we have to create .bowerrc file at root leve the application. which will have location where to install libraries:


{
	"directory": "Libs"
}

This will create Libs folder in your root directory of the application.

Bower.JSON

Every project can have bower.json and it is called bower configuration. It has typically following purpose:

  • This file keep track of third party packages which can be updated and reinstall easily.
  • When publishing one's own bower package than it will be used to install this package correctly. There might be case that the current package is dependent on other package and required other package to use current package. Bower.JSON keeps the information about dependencies.

Creating Bower.JSON

Bower.JSON file can be created by just typing in the file named Bower.json, but there is a lot of typing. To avoid typing to much information, just use bower init command in command prompt and it will ask some question and will create file for you.

It will preview the file and ask for confirmation. Bower.JSON file created with this method will look like below:


{
  "name": "TestApp",
  "description": "Demo application to learn bower commands",
  "main": "index.htm",
  "moduleType": [],
  "keywords": [
    "TestApp"
  ],
  "authors": [
    "Nitya"
  ],
  "license": "MIT",
  "homepage": "http://www.dotnetpedia.com",
  "ignore": [
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "~3.3.6"
  }
}

dependencies section in bower.json is the place which tells that this current package/project is required list package. But bower.json is created in begging of the project. If we have added more packages to the project either we have to manually make entries to the bower.json file or we should use the --save parameters to add this package as dependency in the bower.json file.


bower install jquery --save

If we are adding some testing library which only require for development not the time actual publishing will happen than it should be as follows:


bower install jasmine --save-dev

The bower.json file will look like below:


 "dependencies": {
    "bootstrap": "~3.3.6",
    "jquery": "~2.1.4"
  },
  "devDependencies": {
    "jasmine-core": "jasmine#~2.4.1"
  }

Conclusion

Bower lets you download "stuff". So instead searching online, finding the download link, finding the zip file, unzipping and placing it your project to can go to the terminal, type bower install jquery and it downloads it into a bower_components folder. Install location can be modified by creating .bowerrc file.


Nitya Prakash Sharma has over 10 years of experience in .NET technology. He is currently working as Senior Consultant in industry. He is always keen to learn new things in Technology and eager to apply wherever is possible. He is also has interest in Photography, sketching and painting.

My Blog
Post Comment

COMMENTS