Bower – finally a “NuGet” for the web

· Tech · , ,

I’ve always been a huge fan of NuGet and the great features it offers. It is an elegant way to keep your libraries and dependencies in sync and up to date. But have you ever wondered if there’s a similar tool for the web? The answer is yes; it’s called Bower! Bower is a web package manager you can download from Node Package Manager (NPM). It is important to highlight that NPM is a package manager for Node whilst Bower is a package manager for the web. The beauty of Bower is that you have one central place for all your dependencies and libraries in contrary to the traditional way where you have to manually download and link your scripts into your HTML.

In this example I’ll take an existing project without Bower and show how the project will look like after we use Bower. Before we start, make sure you have Node installed.

The file structure for the existing project is:

 

1. Open Node Package Manager console and enter following command. The -g parameter tells NPM to install Bower on a global scope which means you can access Bower wherever you may be inside the command line. I personally install all my packages globally!

npm install -g bower

2. Once Bower is installed you’ll need to initialize Bower in your project. This means setting up JSON-file with settings such as where your packages will be installed and which dependencies you have installed. In this case we’ll install Angular and Bootstrap.

bower install bootstrap --save
bower install angular --save

Note that in order to include all your dependencies in your config file, you need to add the –save parameter. The great thing about the config file is that if you manage to mess up your dependencies file structure, you can easily erase all files and folders and start over again by typing:

bower install

3. The new file structure and reference for the project looks now something like this:

File structure:

 

Index.html

<!doctype html>
<html lang="en" ng-app="igApp">
<head>
<meta charset="utf-8">
<title>ToDo</title>

<!--OLD REFERENCE -->
//<link rel="stylesheet" href="css/bootstrap.min.css" />

<!--NEW REFERENCE -->
<link rel="stylesheet"href="app/bower_components/bootstrap/dist/css/bootstrap.min.css" />
</head>

<body ng-controller="IgCtrl">

<!--OLD REFERENCE-->
//<script src="lib/angular/angular.min.js"></script>

<!--NEW REFERENCE-->
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Written by almirmesic · · Tech · , ,
NextCreating your first REST API service using Parse