Question: What is the fundamental difference between `bower` and `npm`? Just want something plain and simple. I've seen some of my colleagues use `bower` and `npm` interchangeably in their projects.

Answer: 
This answer is an addition to the answer of Sindre Sorhus. The major difference between npm and Bower is the way they treat recursive dependencies. Note that they can be used together in a single project.

**On the [npm FAQ](https://web.archive.org/web/20150906022540/https://docs.npmjs.com/misc/faq#why-can-t-npm-just-put-everything-in-one-place-like-other-package-managers):** (archive.org link from 6 Sep 2015) 

> 
> It is much harder to avoid dependency conflicts without nesting
>  dependencies. This is fundamental to the way that npm works, and has
>  proven to be an extremely successful approach.
> 
> 
> 

**On [Bower](http://bower.io/) homepage:**

> 
> Bower is optimized for the front-end. Bower uses a flat dependency
>  tree, requiring only one version for each package, reducing page load
>  to a minimum.
> 
> 
> 

In short, npm aims for stability. Bower aims for minimal resource load. If you draw out the dependency structure, you will see this:

npm:

```
project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

```

As you can see it installs some dependencies recursively. Dependency A has three installed instances!

Bower:

```
project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

```

Here you see that all unique dependencies are on the same level. 

**So, why bother using npm?**

Maybe dependency B requires a different version of dependency A than dependency C. npm installs both versions of this dependency so it will work anyway, but Bower will give you a *conflict* because it does not like duplication (because loading the same resource on a webpage is very inefficient and costly, also it can give some serious errors). You will have to manually pick which version you want to install. This can have the effect that one of the dependencies will break, but that is something that you will need to fix anyway.

So, the common usage is Bower for the packages that you want to publish on your webpages (e.g. *runtime*, where you avoid duplication), and use npm for other stuff, like testing, building, optimizing, checking, etc. (e.g. *development time*, where duplication is of less concern).

**Update for npm 3:**

npm 3 still does things differently compared to Bower. It will install the dependencies globally, but only for the first version it encounters. The other versions are installed in the tree (the parent module, then node\_modules).

* [node\_modules]
	+ dep A v1.0
	+ dep B v1.0
		- ~~dep A v1.0~~ (uses root version)
	+ dep C v1.0
		- dep A v2.0 (this version is different from the root version, so it will be an nested installation)

For more information, I suggest reading the [docs of npm 3](https://docs.npmjs.com/how-npm-works/npm3-dupe)
Found this useful explanation from <http://ng-learn.org/2013/11/Bower-vs-npm/>

> 
> On one hand npm was created to install modules used in a node.js environment, or development tools built using node.js such Karma, lint, minifiers and so on. npm can install modules locally in a project ( by default in node\_modules ) or globally to be used by multiple projects. In large projects the way to specify dependencies is by creating a file called package.json which contains a list of dependencies. That list is recognized by npm when you run npm install, which then downloads and installs them for you.
> 
> 
> On the other hand bower was created to manage your frontend dependencies. Libraries like jQuery, AngularJS, underscore, etc. Similar to npm it has a file in which you can specify a list of dependencies called bower.json. In this case your frontend dependencies are installed by running bower install which by default installs them in a folder called bower\_components.
> 
> 
> As you can see, although they perform a similar task they are targeted to a very different set of libraries.
> 
> 
>