The official Bower website : Bower.io
There are some things you’ll need before you can start working with Bower:
NodeJs and NPM.
Node.js is an open-source, cross-platform runtime environment for developing server-side Web applications. Official Node.js website: Node.Js
NPM is a NodeJS Package Manager. As its name would imply, you can use it to install node programs. Also, if you use it in development, it makes it easier to specify and link dependencies. This is pre-installed with Node.js.
Git. Bower packages are Git repos. Bower uses Git to understand where the package is, what version it’s on—that sort of thing. Offical Git website: Git.
The Command Line.
Global Installation. You could install it in every project but you’ll probably want to have it everywhere.
After installing Node.js and Git you want to install Bower.
To install bower globally you need to open the command line and type the following :
$ npm install -g bower
Note: Depending on your setup you may have to use
sudo npm install -g bower to install it globally.
To install any package you just need to type :
$ bower install <package name>
Let’s just say you want to include jQuery in this project. Usually you would go to jquery.com, find and click on the correct download link, then unzip and put the files in the right directory.
With Bower, just run the following command in where your project is located:
$ bower install jquery
Note: if you install Bootstrap for example you won’t need to
bower install jquery, since Bootstrap need jquery it will automatically install that for you.
src directory in the HHS project where the all development work is done. Grunt will eventually prep everything and compile our optimized code into a production-ready folder.
For the front-enders, we are currently working in the
If you look through the
/hhs-course-registration-system/src/main/webapp directory you will find that there a directory called
/bower_components, in that directory every packages that you install with
$ bower install </package><package name>
will be located in that specific directory.
Let’s say you are working on a new project and you installed couple of plugins, if other people pull your repository and want to work on the project obviously they need to install all the necessary plugins too.
To make that easier you can save your packages in a
By entering the following command:
$ bower init
What this command does is make a new
bower.json file and save all your installed packages, you probably going to get a form in command line to fill but you can enter till the end. You can edit it later in the
Now when other people pull your repository and just need to enter
bower install and the packages will be downloaded and installed.
Now, let’s say you are working the on HHS project and you want to add your packages to the
bower.json file because you want to use a new package.
so instead of using
bower install </package><package name> to install a package you want to use the following:
$ bower install </package><package name> --save
$ bower install </package><package name> -S
basically what it does is update your
bower.json file so the next person also be able to work on the project.
And the last part is that you need to include the packages in your html, in this case
But I recommend you use Bower together with Grunt, RequireJS, Yeoman, and lots of other tools or build your own workflow with the API.
Posted by Steven Wu