bower

Bower, an Introduction

Click Here for TL;DR

Understanding Bower

Modularity in code is great for a number of reasons:

  1. less work (someone else did it for you)
  2. tested for more use cases than you can think of on your own (might not seem important until your user base goes up)
  3. update easily
  4. reasons

Humans and computers are good at different tasks. So while you as a human will still need to hunt down _which_ module will work best, there are machine tools to do the well-defined, rote work of getting modules into your project. Enter bower.

“Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for.”[1] What is a package? An example would be jQuery. Need jQuery UI or Bootstrap? Bower knows that both of these depend on jQuery and can fetch a right version that will work for both.

Note that Bower is a command line tool. But wait! The command line is your friend! A coarse, unable to understand not-so-subtle social norms sort of friend, but also a loyal, always there for you friend who has a heart of gold. Once you figure out how to speak the way they understand, this friend will do anything for you. And with Bower, the commands aren’t arcane like, say `grep -E -o “\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}\b” file.txt`(link). Instead, they’re pretty human-based.

If you’re on Windows, Hit WIN+R, type `cmd` and press Enter. On Ubuntu, just CTRL+ALT+T. On Mac, +Spacebar, then type ‘Terminal’.

To install bower, you will need to install Node and npm. After that, its a simple

1
npm install -g bower

Though I find that any global packages (the `-g` part) require more permissions, so for non-Windows users:

1
sudo npm install -g bower

To use bower, you will most likely use published packages(link). So, for our Bootstrap example,

1
2
cd /home/pixnbits/super-fun-project
bower install bootstrap

Bower will create a directory to add components in, `bower_components` by default. (We can change this via configuration, we’ll have a post on that later.) You’ll note that inside `bower_components` bower also installed Bootstrap, but also jQuery alongside.

To use these in a web project, we could create `/home/pixnbits/super-fun-project/index.html` like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
 <head>
 <title>Sample Webpage using Bower components</title>
 <!-- Bootstrap core CSS -->
 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 <div class="container">
 <div class="starter-template">
 <h1>Sample Webpage using Bower components</h1>
 <p class="lead">This example is an adapted, stripped-down <a href="http://getbootstrap.com/examples/starter-template/">Bootstrap's Starter Template</a>.</p>
 </div>
 </div><!-- /.container -->
 <!-- Bootstrap core JavaScript
================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="bower_components/jquery/dist/jquery.min.js"></script>
 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 </body>
</html>

That’s it!

In The End

Bower allows for code modularity. You can download external resources and house them internally within your site or application.

Install (must have node installed first):

1
npm install -g bower

Install packages:

1
bower install [package_name]

 

Pro Tip: Create A New Public Bower Package:

Create a bower.json file in your project (more about bower.json here):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "my-project",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

To create your package:

1
bower register <my-package-name> <git-endpoint>

That’s it, now you can check your package by running the following command:

1
bower info <my-package-name>

Leave a Reply

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