Introduction to Bower

Misc - Introduction to BowerBower Video Tutorial by John Lindquist

Bower is a package manager for Javascript libraries that allows you to define, version, and retrieve your dependencies. In this tutorial, John gives a quick introduction to Bower and will show you how to get started.


The ability to reply to discussions is limited to PRO subscribers. Want to join in the discussion? Click here to subscribe now.
egghead.io
Avatar

Bower is a package manager for Javascript libraries that allows you to define, version, and retrieve your dependencies. In this tutorial, John gives a quick introduction to Bower and will show you how to get started.


John Lindquist: Bower is a package manager for the web, so if I want to install Angular, I just say bower install angular, hit "Enter." You can see it's going to grab Angular from GitHub and then I'll have a Bower components directory with Angular inside of it.

This is Angular 1.0.8, and I want to grab the latest, so I'm going to say bower install angular and then give it 1.2.0-rc.1 and that's going to grab the tag that has the latest and greatest Angular in there. You see I have Angular now. Let's grab a few more libraries, we'll install jquery, bower install bootstrap. We can do bower install and just keep on grabbing libraries.

You can see that once we have all of these set up, you can actually do Bower in it, which is going to prompt you to create a bower.json file. I'm just going to hit "Enter" and accept all of these things which are easy enough to understand. Hit "Enter" to say it looks good and then you'll see we have this bower.json file.

Take a quick peek at this. You can see it has all that info entered, or didn't enter. Then the list of dependencies which we've installed, so those dependencies mean that we can actually delete everything we've installed already from here, since we have a bower.json file to say bower install and that'll go and grab all the dependencies that we have listed in our json file.

Everything should be back in order as if I didn't delete it. You can shift this file around and install dependencies as you want. Now, as strategy for deploying these and registering them with GitHub, if we check out the way that Angular did it, you can see they created a Bower Angular project in their GitHub repo, which only has Angular and Angular men and then the bower.json file.

Instead of distributing the entire library with all the source files, they just distributed these finalized files. You can see the different versions that are available are the different tags, so we originally got 1.0.8, and you can also download 1.2.0 because it's tagged that way.

If you want to register your own project, just simply commit this to GitHub with a bower.json file then you say bower register, give it a name, SomeName, and then the link to the GitHub repo and then it's all set up for you. Then anyone can say bower install SomeName and download your project.

Last but not least, if you want to search for other projects, you can say Bower search, we'll do a search for Angular and you can see a list of everything that has the word Angular in it of all the projects you can download and install. That works for any other word you want to find.

Tech logo bar

Don't miss out on the latest PRO lessons.

Get Your PRO Subscription Now

Because you like code... not PowerPoint slides.