-2

I've just started learning React.js+Redux and I see that a lot of frontend projects use npm as package manager.

Lets take this project for example - counter.

It contains package.json file. If we take a look at contents of this file we will see that there are devDependencies and dependencies entries in it.

  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.2.1",
    "redux": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.3.15",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-register": "^6.3.13",
    "cross-env": "^1.0.7",
    "enzyme": "^2.0.0",
    "expect": "^1.6.0",
    "express": "^4.13.3",
    "mocha": "^2.2.5",
    "node-libs-browser": "^0.5.2",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.9.11",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^2.9.1"
  }

While I know what is the difference between devDependencies and dependencies I do not understand why the project lists react, react-dom, redux under dependencies section. From my understanding it is a frontend project which doesn't need anything installed on server to work in production.

S.S.J
  • 353
  • 1
  • 7
  • All those projects (redux, react, react-dom) are frontend projects... not sure what you're asking? Npm is a package manager, front/back end doesn't matter – aarosil May 18 '16 at 02:28
  • 1
    @S.S.J Please use google search before posting a question on StackOverflow. – Bhargav Ponnapalli May 18 '16 at 02:29
  • 1
    Package.json does not distinguish between frontend/backend. – Himmel May 18 '16 at 02:30
  • @aarosil if it is a frontend project then why does it list dependencies under `dependencies`? – S.S.J May 18 '16 at 02:36
  • @bhargavponnapalli Could you please show me exact google search which answers my question? I did search google, but failed to find answer – S.S.J May 18 '16 at 02:38
  • @Himmel I do understand that. I do not understand _why the frontend project splits dependencies into two parts_ instead of keeping all of them in `devDependencies` – S.S.J May 18 '16 at 02:40
  • sounds like you dont understand the differences... http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies – omarjmh May 18 '16 at 02:41
  • @JordanHendrix I read the answer you've linked. My question still stands. Why does the project splits dependencies into `devDependencies` and `dependencies`? What is the point of having `react` installed on a production server in this case? – S.S.J May 18 '16 at 02:49
  • @S.S.J http://stackoverflow.com/questions/30451556/what-is-the-correct-way-of-adding-a-dependency-to-react-in-your-package-json-for – Bhargav Ponnapalli May 18 '16 at 03:41
  • 1
    "Counter" is a web application that uses React. Typically, libraries that are used in the app are added as `dependencies`. – Felix Kling May 18 '16 at 04:17

1 Answers1

0

As @aarosil points out, npm doesn't care about front end or back end. It's just a package manager.

So it all comes down to the project structure. Looking at the example you gave (the React counter example), this is a very small demo that runs in the browser. It uses webpack to build the project, which in this case consists of a JS bundle which is requested by the browser & runs in the browser. This bundle includes those dependencies you see in the package.json file, which also run in the browser.

You could just as easily use npm to build a "back end" package for use on the server side. In that case, the dependencies would probably not include react, etc. (unless, of course, you want to render pages on the server)

Kryten
  • 15,230
  • 6
  • 45
  • 68