Design and development techniques for everything web

Bower logo

Getting started with Bower

0

What is Bower?

Bower is a package manager operated by a command line through a systems terminal, it will download packages from sources such as Github and place them in the right place without having to do it all manually. For example, adding jquery to your website can be done by simply typing bower install jquery in the terminal of your system.

If you’re a web designer/developer, this package manager will make your life much easier by allowing you to download components, CSS files and bootstrap with a single simple command, it will also automatically update packages meaning that you’re always working with the latest version.

How does it work?

Bower uses Github registered package names to deliver a result to the user. So, if you type in bower install bootstrap, it will search Github for package name bootstrap and import that package for you, placing it in the set destination. You may choose to download a specific version of a package; you can do so by simply adding the version number like so, bower install jquery#2.1.3. Bower requires node.js to be installed on your system.

What is node.js?

Node.js allows java script to run on your computer, where as before java script was only usable by a web browser. Creating a desktop environment for java script means that you are now able to access java script files, listen to network traffic on your computer, listen to https requests and send back a file, access databases directly etc.

There are two categories that people are using in node,

  1. They’re building development utilities on the machine, such as gulp, Grunt, Yulp etc. things that you can build java script files with. It will listen to file system changes and do live reload or whenever you save a sass file it will automatically convert a CSS file.
  2. Web applications with node. Instead of using ruby on rails, php and python, use express framework for node.js to build a web application.

{Node basics

Download node.js and install it on your machine by visiting nodejs.org and clicking install.

Once installed use the terminal to issue commands, type node in the terminal to start a process.}

Installing & using Bower

To install Bower you’ll first need to download Node package manager from nodejs.org. Hit install to download the node.js package and install it onto your system, this package will also include npm (node package manager).

node.js download

{Note: Use iterm (terminal emulator) instead of your systems terminal for the following steps}

In the terminal make sure to set your directory up and allocate a file for packages, for this tutorial I’ll be using cd desktop/site1.

Next you’ll need to install Bower, so in the terminal type $ npm install -g bower and hit enter.

how to install bower

Once Bower is installed you can find the commands and options by typing bower in the terminal.

 

$ bower help Usage:       bower <command>[<args>][<options>]

 

Commands:    

cache                   Manage bower cache
help                  Display help information about Bower
home                   Opens a package homepage into your browser
info                   Info of a particular package
init                   Interactively create a bower.json file
install                Install a package locally
link                   Symlink a package folder
list                   List local packages
lookup                 Look up a package URL by name
prune                   Removes local extraneous packages
register               Register a package
search                 Search for a package by name
update                 Update a local package
uninstall               Remove a local package

 

Options:

-f, –force             Makes various commands more forceful

-j, –json             Output consumable JSON

-l, –log-level         What level of logs to report

-o, –offline           Do not hit the network

-q, –quiet             Only output important information

-s, –silent           Do not output anything, besides errors

-V, –verbose           Makes output more verbose

–allow-root           Allows running commands as root

 

Finding packages

Bower allows you to search for packages with in the terminal, to do simply type in bower search packagename. For example to see what font packages are available type in bower search fonts. Another way to perform a package search is by going to use the search feature on the bower website.

Installing packages

{Note: Before you get started make sure you got Github installed, Bower uses Github to retrieve packages and you can save and share your projects directly to Github.}

There are a few different methods of installing packages, the first method is to type in the terminal the command bower install followed by the package name, for example bower install bootstrap.

The second method would involve you getting the URL for package you wish to install and adding the URL after the command bower install, for example bower install https://github.com/jashkenas/backbone.

bower install packages using url

As mentioned previously you can specify what package version to install within Bower, this might be useful when it comes to meeting compatibility issues. To find out what versions are available for a package use the command bower info package name, for example bower info bootstrap. Add the version number at the end of an install command like so, bower install bootstrap#ver2.1, to install the version.

After installing the packages required use the command bower init to create a bower.json file. This will enable you to share and update your files easily.

Listing Installed Packages

To see all packages installed use the command bower list. Make sure that you’re in the right directory before using the command.

bower list files

Updating Packages

To update a specific package use the command bower update package name, for example bower update bootstrap. However you can also update all packages at the same time, to do so make sure you performed bower init first, and then use the command bower update.

updating bower packages

Removing Packages

Removing package is as easy as installing them, use the command bower uninstall package name to remove a single package or bower uninstall multiple names to remove a number of packages. For example bower uninstall bootstrap, or bower uninstall bootstrap jquery fontawesome, etc.

remove packages bower

Using Packages

To use a package within your project simply reference the package in the src. For example,

testing bower

Conclusion

Bower is easy to learn and easy to use, it could save you a substantial amount of time once you learn to operate it properly. It is nothing more then a package manager, but it’s great at what it does. Although it’s operated using command lines, it’s simple enough to get to grips with and there is plenty of help provided. However, the fact that Bower is operated through a systems terminal will make many uncomfortable as it could lead to a security breach or the destruction of the system with improper usage.

 

London web designers/London web developer & a lover of all things net.
Jade Masri

Leave a Reply

Translate »