How to get Bootstrap with Bower

This is a quick post to explain how you can use Bower with your cool new MEAN stack. For this example, we'll install Bootstrap.

Install the Package(s)

bower install bootstrap

OK, all done. No, not really. All we did was download the files. They're not automatically added to our html somehow.

Where does Bower put files?

Out of the box, the MEAN stack puts Bower's files in /public/lib. This is a configuration setting in .bowerrc.

"directory": "public/lib",

How to Use the New Files

The lib directory is public, so we can access them directly. For simplicity, you can add it to /app/views/includes/head.html.

<script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>

What about dependencies?

Dependencies will be installed automatically by Bower. That's one of the main reasons to use a package manager. Boostrap has a dependency on jQuery, so it has been installed as well.

How do you know what dependencies to use?

When you install a package, the dependencies are listed.

bower install bootstrap#3.0.3 bower install jquery#2.1.0

bootstrap#3.0.3 public/lib/bootstrap
└── jquery#2.1.0

You can view all your current packages and their dependencies with

bower list

You can view the dependencies in the package's bower.json file. /public/lib/bootstrap/bower.json shows that bootstrap needs jQuery.

"dependencies": {
    "jquery": ">= 1.9.0"
}

Include the dependencies the same way as the main package. <script src="/lib/jquery/dist/js/jquery.min.js"></script>