Organizing package.json dependencies in universal/isomorphic apps

Question

With React and other frameworks it is now common to use npm and package.json to install the libraries you'll use on the frontend. If you are developing a universal/isomorphic app, this introduces the problem that the dependencies for the frontend and backend are stored in the same file, creating a massive dependency list.

If you use npm --save/--save-dev both types of dependencies (frontend, backend) become mixed and it's difficult to know, without going one by one, which one is used where.

Other than sorting and managing the dependency list by hand, is there any way to keep the list tidy? What are your strategies to manage dependency lists?

Answer 1

In a universal/isomorphic app, you'll probably have few dependencies that are purely frontend or purely backend; most of the dependencies are shared.

An option that comes to my mind is to use more than one package.json:

• one for isomorphic dependencies (react, redux, etc.) and utility dependencies like the build system (babel, webpack, etc.), task runners (gulp, cross-env), testing (karma) and so on;
• one for pure frontend dependencies;
• one for pure backend dependencies.

I haven't used that structure myself, and I'm not sure that it will be more maintainable that a single package.json, because you'll have to manage more things (and if you add npm-shrinkwrap to that, it's twice as more files).