Difference between Grunt, NPM, and Bower (package.json vs bower.json)

Question

When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json?

From what I gather,
running bower install will fetch the package and put it in /vendor directory,
running npm install it will fetch it and put it into /node_modules directory.

This SO answer says bower is for front-end and npm is for backend stuff.
Ember-app-kit seems to adhere to this distinction from the first glance... But instructions in gruntfile for enabling some functionality give two explicit commands, so I'm totally confused here.

Intuitively I would guess that

1. npm install --save-dev package-name would be equivalent to adding the package-name to my package.json

2. bower install --save package-name might be the same as adding the package to my bower.json and running bower install?

If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?

Shophar

possible duplicate of Difference between Bower and NPM? – Whisenant

@SindreSorhus This is not exact duplicate. There is additional question associated in this post as well. BTW Do you mind explaining downvote ? – Mckeehan

Did you change the accepted answer? It seems that the highly upvoted one from 2014 tells something quite different than the accepted one from 2016. It also explains why it suggest another approach, so I'm cool with it. Just a bit surprised that it's accepted (or re-accepted). – Southwestward

Yes, I changed the accepted answer because I feel the later one is much more relevant. I suppose in this front-end jungle many people are as confused as I was, so this question gained popularity way beyond my expectations... And still gets views 2 years later. Thanks to Pawel there's now a more current answer for people to refer to (fwiw I'm using webpack at my current job). – Shophar

Answer 1

Update for mid 2016:

The things are changing so fast that if it's late 2017 this answer might not be up to date anymore!

Beginners can quickly get lost in choice of build tools and workflows, but what's most up to date in 2016 is not using Bower, Grunt or Gulp at all! With help of Webpack you can do everything directly in NPM!

• Google "npm as build tool" result: https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa

• Webpack: https://webpack.github.io/docs/installation.html

Don't get me wrong people use other workflows and I still use GULP in my legacy project(but slowly moving out of it), but this is how it's done in the best companies and developers working in this workflow make a LOT of money!

Look at this template it's a very up-to-date setup consisting of a mixture of the best and the latest technologies: https://github.com/coryhouse/react-slingshot

• Webpack
• NPM as a build tool (no Gulp, Grunt or Bower)
• React with Redux
• ESLint
• the list is long. Go and explore!

Your questions:

When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json

• Everything belongs in package.json now

• Dependencies required for build are in "devDependencies" i.e. npm install require-dir --save-dev (--save-dev updates your package.json by adding an entry to devDependencies)

• Dependencies required for your application during runtime are in "dependencies" i.e. npm install lodash --save (--save updates your package.json by adding an entry to dependencies)

If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?

Always. Just because of comfort. When you add a flag (--save-dev or --save) the file that manages deps (package.json) gets updated automatically. Don't waste time by editing dependencies in it manually. Shortcut for npm install --save-dev package-name is npm i -D package-name and shortcut for npm install --save package-name is npm i -S package-name

Nightcap

Oh, so confused... If I'm attempting to start with Angular 2, do I need the sling-shot package? It's listing React which, as I understand, is an alternative to Angular, right? Can I still skip bower etc. even if I go with Angular 2 and instead only use your suggestion on using NPM for everything (both back-end and front-end)? – Southwestward

@Southwestward React and Angular are two different things. Angular is all-in-one front end engine and React is a rendering engine which allows you to compile your own set of tools. That's why it saves a lot of time to start with a good boilerplate code which contains a good set of tools and libraries. Angular 2 followed React's performance advantages over Angular 1 and is an alternative to React. You can start with Angular 2 project here github.com/AngularClass/angular2-webpack-starter – Nightcap

Your answer is very opinionated: > With help of Webpack you can do everything directly in NPM! That's not true, one doesn't even need webpack in his workflow – Clause

@AugustinRiedinger That's true. In one project I'm using Rollup instead of Webpack. But it's a WebGL game with minimal HTML markup. Webpack 2 is coming and I'm planning switch back to it from Rollup. – Nightcap

This answer seems to be making a lot of assumptions. The question is asking the difference between npm and bower, and this answer is mentioning webpack for some reason. Yes, webpack is one way to do it, but this answer is making it seem like it is the only and right way to do it. For an example, if someone is working with Polymer 1.x, the standard workflow will be using bower, and there is not much support for webpack. – Disassemble

The answer is actually relevant, but the argument given not really: "but this is how it's done" - well, nothing should be done just because it's supposed to be seemingly done (i.e. is done by others). Money has nothing to do with the reasoning for the workflow. – Caleb

Looking at this answer in 2017. Going to documentation: "webpack v1 is deprecated. We encourage all developers to upgrade to webpack 2. Follow our migration guide or refer to webpack 2 documentation for more info." Haha classic web development. – Pelvic

@Pelvic When you look at the migration guide you'll notice that most of the config stays the same and the rest are just cosmetic changes in config structure. I did the migration in one afternoon including a PR – Nightcap

"The things are changing so fast that if it's late 2017 this answer might not be up to date anymore". It is now late 2018 ... any change to your answer? – Void

@Void still using the same stack just updated versions of everything, only now TypeScript but that's another thing. Last few versions of "npm install" are doing --save automatically. Other than that no massive changes. That's good because there's no need to rewrite everything every year – Nightcap

Answer 2

Npm and Bower are both dependency management tools. But the main difference between both is npm is used for installing Node js modules but bower js is used for managing front end components like html, css, js etc.

A fact that makes this more confusing is that npm provides some packages which can be used in front-end development as well, like grunt and jshint.

These lines add more meaning

Bower, unlike npm, can have multiple files (e.g. .js, .css, .html, .png, .ttf) which are considered the main file(s). Bower semantically considers these main files, when packaged together, a component.

Edit: Grunt is quite different from Npm and Bower. Grunt is a javascript task runner tool. You can do a lot of things using grunt which you had to do manually otherwise. Highlighting some of the uses of Grunt:

1. Zipping some files (e.g. zipup plugin)
2. Linting on js files (jshint)
3. Compiling less files (grunt-contrib-less)

There are grunt plugins for sass compilation, uglifying your javascript, copy files/folders, minifying javascript etc.

Please Note that grunt plugin is also an npm package.

Question-1

When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json

It really depends where does this package belong to. If it is a node module(like grunt,request) then it will go in package.json otherwise into bower json.

Question-2

When should I ever install packages explicitly like that without adding them to the file that manages dependencies

It does not matter whether you are installing packages explicitly or mentioning the dependency in .json file. Suppose you are in the middle of working on a node project and you need another project, say request, then you have two options:

• Edit the package.json file and add a dependency on 'request'
• npm install

OR

• Use commandline: npm install --save request

--save options adds the dependency to package.json file as well. If you don't specify --save option, it will only download the package but the json file will be unaffected.

You can do this either way, there will not be a substantial difference.

Mckeehan

Thanks for clarification, and for the article! Insightful, and clarifies the difference (which should help decide where to put dependencies). I'll wait if perhaps someone will chime in on the last question (re: when would I ever want to install packages individually), and accept your answer later :) – Shophar

Oops I missed your question2..Didn't realize it was there. I just guessed you were just asking the difference between both..Editing my answer – Mckeehan

Thank you! That's exactly what --save flag is for, huh :) – Shophar

If you don't specify the save option for installing a module, your code will just run fine (unless you delete node_modules directory) but if you give your project to somebody else then he will face option in running the project. (Missing package error) Hope that helps!! – Mckeehan

Or npm install --save-dev ... depending upon what sort of package you're installing. – Dagostino

@knutole Title does not reflect the OP's questions in the post. It is the only title which talks about Grunt but OP's questions are only regarding npm and bower. Thanks for raising this. I have updated the title now. It makes sense now. – Mckeehan

Regarding npm, it may be a package manager for NodeJS modules but we are losing sight that it's not exclusive to just NodeJS. npm is just as effective managing client-side dependencies. Ex: dontkry.com/posts/code/using-npm-on-the-client-side.html – Protostele

What can bower do that npm can't? – House

Note that the jQuery plugin repository (plugins.jquery.com) has been replaced with npm. – Jehias

I'm sad to click your article link to Tech.pro and find that the site is down/disabled. – Endgame

@Endgame That was a wonderful article but now I have removed the link because the site is not available anymore – Mckeehan

the latest quickstart angular 2 (RC) tutorial and git seed uses npm only, as opposed to the v1 tutorial that was using both npm and bower. I really, really love the facts that (a) package.json is the only thing to maintain, (b) that it computes dependencies recursively in a one liner npm install, and (c) when there's a problem you just need to delete the node_modules folder and run npm install again. – Merla

@Merla Completely agreed!! Things are moving very fast in front end development in terms of project structure, bootstrapping, frameworks, quickstarts etc. So nothing will be relevant after some time. Thanks for your comment – Mckeehan