12/23/2014

Managing web projects dependencies using Bower: Package manager for web

Bower - A package manager for web



# What is Bower?
    #  Bower helps us to make front-end web development easier.
    # So, Bower is a package manager for web,
        If you familiar with npm (Node package manager), We use npm to
        download and Install node packages from its repository.
        Basically these packages are required by server side, and server is Node.js
        server, based on Google chrome JavaScript engine (v8) .


# Why use Bower?
    #  As we know that websites are not a simple page, we use a lot of stuff
         like , JavaScript libraries, Frameworks and many other things.
         These are required for proper rendering or functioning of our
          website, so there is a problem to manage all of that stuff if you are
          really working with a big web project. I am assuming that there must
          be a lot of dependencies that you have download.

# How this tool can help us?
    #  OK, Lets us assume that you are not using Bower for your web project.
         So, now your web project is complete, and this is the time when you
         want to distribute your web project to others or you want to deploy that
         Git-hub so that others can download and use/test your project.

    # first way is you have to manually manager your project dependencies.
        means, either you are going to package all dependencies with your
        web project, or you can manually list them in documentation so that
        your project user can download and install them your defined directory.
        so that your project can work well.

    # Now, take a look at Bower, how this can help us?
        for your web project, first you have to init Bower, so that this will create
        a config file ( bower.json ), where it can put project configuration settings.
        Now you can tell Bower, hey this is a Project dependency, and why
        not download and install that for me.

# How to install Bower?
    # Bower comes as a package of Node.js
    # This is why, first you have to install Node as well as npm
    # You can Download  Node installer from http://nodejs.org/

    # Once you installed, Node you can now install bower using npm.
   
     npm install bower -g

    # now you can use Bower directly from command line.


# Getting started with Bower.
    # Creating a Bower configuration file for your web project.

     bower init


    # This will create a  bower.json  file, which contains the project
        name, version, keywords, main file name, dependencies and more.

    # simple bower.json file.




    # Installing Packages
        bower install jquery

             or

        bower install jquery --save

 
    # If you are passing a  --save flag for bower than bower will update the
        bower.json file and make that package as dependency for our project.
        without --save flag Bower will just download and install that package
        into  bower_components/  directory.

    # Installing packages from Git-hub using Bower.

        bower install desandro/masonry

        bower install git://github.com/user/package.git

    # Download and Install from given URL
  
        bower install http://example.com/script.js

    # Search for a Package or Library using Bower.
        ( This will only look for packages registered in Bower registry. )

        bower search polymer






    # Playing with  bower.json file.
        # this is sample bower.json file.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "name": "nodeFilePlayer",
  "version": "0.0.0",
  "description": "Simple polymer project with node",
  "keywords": [
    "node",
    "express",
    "polymer"
  ],
  "authors": [
    "ssp"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "core-component-page": "Polymer/core-component-page#^0.5.0",
    "platform": "~1.3.0",
    "polymer-elements": "~0.3.0",
    "polymer-platform": "~0.4.2",
    "polymerangular": "*"
  }
}

    # There you can explicitly define version number for any dependencies,
        then Bower will look for that dependencies in bower.json file
        and download + install that for you.
        if you don't define a version number for any dependencies, than Bower
        will install the latest package from its repository.

    # last thing is about when you have a bower.json configuration file, and
        you want to download and install all dependencies listed inside of it.

        bower install

    # this will parse bower.json file and install listed dependencies for you
        inside  bower_components/  directory. So you don't have to look for
        each and every dependencies that are required for your web project
        over Internet and download and install one by one.


Post a Comment