Thanks for visiting my blog!
Depending on your environment, you’re probably already using some package manager for your server-side code. Gems for Ruby, Nuget for .NET, NPM for Node…whatever. In any of these cases you’re used to being able to get the piece of code you need and the other requirements. For the web this is more difficult…or used to be.
For web projects, we’ve needed a way to get these client-side scripts. Sure Nuget or other package manager *can* do this but it’s been a round peg in a square hole. That’s where Bower comes in.
Bower is a simple package manager for the web. Bower depends on node and npm so you need them installed first. And if you do, then installing Bower is as simple as using NPM:
npm install –g bower
```csharp
Once you have that, you can use bower to install your packages in the same way:
```csharp
bower install underscore
```csharp
By default, bower installs everything in a **bower\_components** directory which makes me crazy:
If you’re going to use bower, take the time to create a new file called .bowerrc file:
```js
{
"directory" : "resources/libs"
}This tells bower what directory to use as the root of the file. In this example, a new directory called “resources” with a subdir called “libs” is created and all installed components are under that new directory. This allows us to specify the directory that makes the most sense depending on what technology we’re using for the front-end.
The structure under this directory is completely dependent on the component. Some are really simple like underscore (just underscore.js):
Other libraries have a structure that you need to dive down into. For example, jQuery keeps it’s library in the dist folder (dist/jquery.min.js):
Remember that part of the magic of a package manager is that it knows the dependency chain. For example, if you install bootstrap, it knows you also need jQuery which the output of the install makes clear:
So go out right now and get Bower and start playing:
