Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted February 9th, 2016
Introduction to Bower

Bower is a package manager. the name says it all, managing packages-anything that you depend on like CSS- or JavaScript frameworks, libraries or plugins. Instead of downloading your frameworks, libraries or plugins one for one, you can use bower to install the packages in couple of command lines.

The official Bower website : Bower.io

Requirements

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.

Installation

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.

Install Packages

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.

File Location

There’s a 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 /hhs-course-registration-system/src/main/webapp directory.

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.

Save Packages

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 bower.json file.
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 .json file.

Now when other people pull your repository and just need to enter bower install and the packages will be downloaded and installed.

Maintaining dependencies

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

or

$ 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 jquery :

<script src="bower_components/jquery/dist/jquery.min.js"></script>

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

Leave a Reply

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