Modern Web Development

Modern web development involves using a variety of technologies leveraging a wide-

list of libraries like CSS, Jquery, Angular, Mustach, Backbone, Bootstrap, SASS and
the list keeps growing.

How can one ensure the right set of versions / dependencies are installed by
everyone in the team and every where in the application?

Managing the project dependencies itself could be a full time activity.

Package Manager Introduction

A Package Manager is the solution to simplify installing and updating these

dependencies.

 Browsing all the library websites

 Downloading and unpacking the archives
 Copying files into the projects

All of this is replaced with a few commands in the terminal.

Bower Introduction
For server side JavaScript, npm is the standard package manager. However, in
order to use npm in client side a module loader is required.

Here comes Bower into picture!

Bower is the package manager for web that exposes libraries as global resources.

It helps you manage the packages and assets that are used to implement your front
end web development projects.

Bower works by fetching and installing packages from all over, taking care
of hunting, finding, downloading and saving the packages one is looking for.

Bower keeps track of these packages in a manifest file called bower.json.

To install Bower, one must have node.js, npm and Git installed.

npm has the required foundation we need to work with Bower.

Git is used to find and get the packages we need to install.

Introducing Hands-on Playground

For this course, you can get your hands dirty using katacoda playground

As you follow along, it is recommended that you play with bower in Katacoda
playground.

Try-it-out - npm version

Once you are into Katacoda Node.js playground, check if npm is installed. If yes,
what version of npm is running?

In the terminal, try the following:

npm --version

It is time to install bower now.

npm install -g bower.

 The option g allows bower to be installed globally.

 In case of any permission issues, you can use sudo option as well.

sudo npm install -g bower

What do you see?

Try-it-out - Install jQuery Package

 Now create your first tutorial directory myFirstTutorial. You should see a
new directory created.

mkdir myFirstTutorial

 Let us now navigate to the newly created project directory and install all the
needed libraries.

cd myFirstTutorial

 Assuming your application might need jQuery, you can try installing the same
using Bower command.
bower install jquery

Install jQuery Package - Behind-the-Scenes

What has happened when bower install jquery is executed?

Since there is no version of the jQuery mentioned, Bower fetches the latest version
of the jQuery from its repository, creates a new folder
called bower_components and places the jQuery files.

You could see jquery.js and jquery.min.js listed under jquery folder.

Checking jQuery version

If you would like to know which version of the jQuery is installed by bower, you could
check it by simply typing bower list in the terminal.

Install jQuery - Specific Version

What if you need a specific version of jQuery for your Project?

 You could just specify the version while doing the installation.

bower install jquery#1.11.2

 Now, since you had already installed jQuery for your

project myFirstTutorial in one of the earlier steps, Bower will prompt you to
choose between the earlier installed jquery version and version
1.11.2. Make a choice appropriately.

 Check if the version is getting reflected:

bower list

 The files under bower_components folder also refresh appropriately.

Install Multiple Packages

 Using Bower, you could also install multiple project dependencies. To
install AngularJSand Backbone, use:

bower install angularjs backbone

  You would see bower installing the latest version of
both angularjs and backbone as project dependencies.

 Additionally, you should also see underscore included as dependency.

Backbone has a dependency on underscore and hence gets downloaded automatically, t

hough there is no explicit install.

bower.json Manifest File

 Now that you have all the project dependencies added as bower components,
you could share this setup within the team to maintain consistency of the
dependencies' versions.

This would eliminate the same setup being done individually by everyone in the tea
m.

So how do you share this setup with others?

 Well, Bower provides an easy way to save all the bower components added to
a single file called bower.json file. This file can be version-controlled and
shared with everyone in the team

Setup Bower Package

 You could share the bower components by initializing the bower project as
your own package. Run the following and see what happens.

bower init

 You will be prompted to provide details about this bower project.

Go ahead with defaults.

 Now you would see a single file called bower.json getting created.
 You might notice bower.json file has captured all the 3 dependencies viz.,
jquery, angular, and backbone added.

Dependencies Installation
bower.json file is all that is needed for anyone to add the needed project
dependencies.

Your team can download this file from the version control and install dependencies
by executing bower install.

Try this out yourself by removing bower_components folder.

 rm -rf bower_components
 bower install.

You should see the bower_components back in your project directory, installing all the
needed dependencies as per the bower.json file. This is the beauty of bower.

New Dependencies into bower.json

Let us say, you plan to add a new dependency to your project. What do you
do?

Simply run bower install bootstrap and add appropriate version if needed.

Now, how do you get this new addition propagated to rest of your team?

 For this, use an option --save during installation.

 Now try adding bootstrap to your project myFirstTutorial.

bower install bootstrap --save

 Refresh your bower.json file and see that bootstrap is getting added
automatically.
 You could go ahead and commit this json file to your version repository so that
others can find it.

Dependencies Path
Find the path of your dependencies, using:

bower list -path.

These paths can be referred while writing a HTML or CSS page.

To refer angularjs in your HTML

<html>
<script src="bower_components/angular/angular.js">
</script>
<body>
</body>
</html

More on Dependency Versions

Let us examine the dependencies in bower.json file in detail.

You would notice ~, ^, >= etc.

If you consider any version, say, angular 1.6.2, 1 is the major version, 6 is the minor
version and 2 could be a bug fix.

 ^ in front of the version indicates, the major version should be 1 and minor
version can be anything i.e.., bower can bring any 1.x.x version as
dependency

 ~ indicates right most digit in the version can be anything. i.e.., bower can
bring any 1.6.x version as dependency

 >= indicates bower can bring any version greater than or equal to angular
1.6.2 as dependency

Update Package
 Updating a package is pretty simple. You could say bower update. This
updates all the outdated or old packages wherever there is a new version
available.

 However, the restrictions on the versions to be fetched specified in

the bower.jsonfile will still be considered while performing the updates.

 You could also choose to update a single dependency i.e., bower update
angular.

Uninstall Package
 Uninstalling a package is similar to installation. You could just run bower
uninstall <package>.

 From our earlier example, try bower uninstall angular. See what happens
to thebower.json file and bower_components.
  Just like how installing multiple packages are possible, uninstall will also work
the same way. i.e.., bower uninstall angular backbone bootstrap.

Using Local Cache

Bower supports installing packages using local cache (without internet), if the
package was installed before.

 bower cache list - Lists all the packages installed earlier and are cached

 bower cache clean - Flushes out the cache

Useful Bower Commands

Apart from whatever commands we have come across so far, there are few more
useful commands, some of them are listed here.

 bower help - Displays help information

 bower info <package> - Displays overall info of the package
 bower login - Authenticates with GitHub and stores credentials
 bower search <name> - Finds all the specified packages
 bower home <package> - Opens a package homepage in the browser
 bower link - Creates a global link which can be consumed in other packages
for linking. This is useful during testing.

Where are the added dependencies stored by bower? - bower_components

You have added a new dependency some time in the middle of the project.
How do you get this new dependency shared across with everyone in the
team - Use --save option. The dependency gets added to the .json file which can be distributed
to others

Your project uses angular 1.2.26. However you would like to override this
version for specific needs with angular 1.3. Which option in the bower.json
file allows you to use to do so? - "angular": "angularjs#^1.2.26"

What happens if the following is executed?

'bower install jquery --save-dev' - Will install jquery and add to bower.json
devDependencies

Can multiple dependencies be installed or uninstalled? – Yes

Your bower.json file shows the dependency as "angular":
"angularjs#~1.2.26"
Assuming you have ONLY following 5 valid versions available for angular,
what would be the latest version that gets installed when you execute
"bower update"? Angular 1.0.8, Angular 1.2.9, Angular 1.6.2, Angular
1.5.11, Angular 1.3.3 - Angular 1.2.9

Bower can be used as a package manager for both server side and client
side applications – False
You are trying to install a particular jQuery version 1.9.15 using bower
install angular. What happens to the installation? ( Hint - jQuery 1.9.15 is
not a valid version ) Errors out saying 'No tag found that was able to satisfy 1.9.15'
How do you get the latest version of the dependencies as per the json file
installed? - Execute "bower update"
When the dependencies are added through bower, how do you refer them
in your HTML / CSS etc. code? Execute 'bower list -path' and pick the path of the
dependencies for inclusion

Is Git essential for installing Bower? - Yes. Since Git is required to access the
packages for inclusion

When does bower.json get created? - bower.json gets created when 'bower init' is run