You install android or ios application from Google play store or Apple store. Google play store or Apple store are central repository where you can manage your apps like install, uninstall also check dependency that app will work on Android 2.3 or Android 4.1 etc.
Similarly we have bower.io to manage front-end dependency. A central repository where almost all popular packages has been stored. We’ll browse for needed package and install/update/uninstall via bower.
Install Bower
Before installing bower make sure that you have node and npm installed on your machine. Let’s install node and npm will download automatically with node.
If you are in windows, download .exe file from nodejs.org and install.
In Mac system download .pkg file and run through the install process
In Linux environment, such as Ubuntu you can install through below command in terminal:
sudo apt-get install nodejs nodejs-dev npm
Check is node or npm installed or not in your terminal. In windows open Node.js command prompt
node -v
npm -v
Now it’s time to install bower in your system with simple npm install command. We’ll install bower globally so we don’t have to install bower for every project.
npm install -g bower
Lets get started with a practical example
In this example we’ll download/install jQuery into our project directory
Create a project directory, and then cd into the directory
mkdir bower_test
cd bower_test
Now install/download jQuery. You can search library name in bower.io
bower install jquery
You can also mention version number
bower install jquery#1.8.3
you can install/download your library form any link or github (username/repository_name)
bower install jquery/jquery
bower install https://coderexample.com/jquery.js
jquery will be downloaded “bower_test/bower_components” directory. Now you can include in your project file by script tag.
1 | < script src = "bower_components/jquery/dist/jquery.min.js" ></ script > |
bower.json
Its better to list all packages name when you are working with more than one package. bower.json file contains information about all of our package’s list, dependencies, project name, version etc. we’ll create bower.json file for our project.
1 2 3 4 5 6 7 8 | { "name" : "bower_test" , "version" : "1.0.0" , "dependencies" : { "jqueryui" : "~1.11.3" , "jquery" : "~1.10.2" } } |
bower install
Now if we run “bower install” command, It will automatically download all packages into our project directory same as composer.json for php or packages.json for npm. Very simple. isn’t it?
Updating Packages
Just edit bower.json file according to your needs and run “bower update” command.
bower update
1 2 3 4 5 6 7 8 | { "name" : "bower_test" , "version" : "1.0.0" , "dependencies" : { "jqueryui" : "~2.1.4" , "jquery" : "~1.10.2" } } |
Add more package
you can add more package editing bower.json
1 2 3 4 5 6 7 8 9 | { "name" : "bower_test" , "version" : "1.0.0" , "dependencies" : { "jqueryui" : "~2.1.4" , "jquery" : "~1.10.2" , "bootstrap" : "~3.0.0" } } |
Alternatively you can run below command.
bower install bootstrap -save
Here we are downloading bootstrap library package into our project directory, where “-save” updating bower.json file.
Uninstalling Packages
To remove any package from project directory simply run
bower uninstall jqueryui
Conclusion
The biggest benefit of bower is for managing dependencies that are not javascript at all. Bower is developed solely for any front-end Development. Its is created by twitter. Smart developers are always keen to increase their productive time. Bower helps them to manage complicated package and dependency easily.
0 Comments