merging client and server package.json files into one

Question

I have a project that consists of server side code (in nodejs) and client side code (with react). I have separate package.json files for those but I was asked to merge them into one. Server file is in the project root dir, client side is in /client folder with the rest of client code. Could you help me to do that? May I just copy client file to server client with some modification? I cannot find anything useful on it.

package.json:

{
  "name": "curr-calc",
  "version": "1.0.0",
  "description": "currency calc using node.js and react.js",
  "main": "index.js",
  "repository": "",
  "author": "",
  "license": "MIT",
  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
    "lint": "eslint .",
    "babel": "babel --presets es2015 js/server.js -o build/main.bundle.js",
    "test": "yarn --cwd client run test",
    "heroku-postbuild": "cd client && yarn --production=false && yarn run build"
  },
  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "express-session": "^1.15.6",
    "node-fetch": "^2.1.2",
    "open": "0.0.5",
    "path": "^0.12.7",
    "prop-types": "^15.6.1",
    "react-widgets": "^4.2.6",
    "redis": "^2.8.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "concurrently": "^3.5.0",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^10.2.1",
    "eslint-config-standard-react": "^5.0.0",
    "eslint-plugin-import": "^2.6.0",
    "eslint-plugin-jest": "^21.3.2",
    "eslint-plugin-node": "^5.1.0",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.5.1",
    "eslint-plugin-standard": "^3.0.1",
    "fetch-mock": "^6.3.0",
    "node-fetch": "^2.1.2",
    "nodemon": "^1.17.2",
    "react-test-renderer": "^16.3.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1"
  }
}

client/package.json:

{
  "name": "curr-calc",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1"
  },
  "devDependencies": {
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "fetch-mock": "^6.3.0",
    "react-test-renderer": "^16.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000/"
}

EDIT:

I tried to merge this manually: 1) I copied all dependencies 2) I copied srcipts and renamed those duplicated and add "cd client && " to the beginning of every client script 3) I removed package.json, node_modules and all yarn files from clien folder

Now when I try to run the app by yarn dev I receive:

Listening on port 5000 [1] module.js:549 [1] throw err; [1] ^ [1] [1] Error: Cannot find module '/home/zaba/code/currCalc_react/curr-calc/client/package.json' [1]
at Function.Module._resolveFilename (module.js:547:15) [1] at Function.Module._load (module.js:474:25) [1] at Module.require (module.js:596:17) [1] at require (internal/module.js:11:18) [1]
at getPublicUrl (/home/zaba/code/currCalc_react/curr-calc/node_modules/react-scripts/config/paths.js:34:19) [1] at Object. (/home/zaba/code/currCalc_react/curr-calc/node_modules/react-scripts/config/paths.js:61:14) [1] at Module._compile (module.js:652:30) [1] at Object.Module._extensions..js (module.js:663:10) [1] at Module.load (module.js:565:32) [1] at tryModuleLoad (module.js:505:12) error An unexpected error occurred: "Command failed. [1] Exit code: 1 [1] Command: sh [1] Arguments: -c cd client && react-scripts start [1] Directory: /home/zaba/code/currCalc_react/curr-calc [1] Output: [1] ". info If you think this is a bug, please open a bug report with the information provided in "/home/zaba/code/currCalc_react/curr-calc/yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error An unexpected error occurred: "Command failed. [1] Exit code: 1 [1] Command: sh [1] Arguments: -c yarn start [1] Directory: /home/zaba/code/currCalc_react/curr-calc [1] Output: [1] ". info If you think this is a bug, please open a bug report with the information provided in "/home/zaba/code/currCalc_react/curr-calc/yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. [1] yarn client exited with code 1 --> Sending SIGTERM to other processes.. [0] yarn server exited with code null error An unexpected error occurred: "Command failed. Exit code: 1 Command: sh Arguments: -c concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" Directory: /home/zaba/code/currCalc_react/curr-calc Output: ". info If you think this is a bug, please open a bug report with the information provided in "/home/zaba/code/currCalc_react/curr-calc/yarn-error.log".

Why is it still looking for client/package.json file? Can that be create-react-app setting hidden somewhere?

Answer 1

You have several approaches here, depending on your goals:

1. Merge it manually, along with the two projects - then you'll have a single project with a single package.json file.

2. Since json is just a plain JS object, you can use something like lodash's merge to achieve that:

   const server = require("../path/to/server/package.json");
   
   const client = require("../path/to/client/package.json");
   
   const merge = require("lodash/fp/merge");
   
   let merged = merge(server, client);
   

more information about lodash-fp and node can be found here

Answer 2

I would not merge those into one. They are two different applications and have different dependencies. I'd namespace the names though like this: @curr-calc/client and @curr-calc/server.

If you really wanted to merge them, I'd do that manually by just copying over the dependencies, devDependencies and scripts. Remove any duplicates (in case of scripts you'll need to rename those who have duplicate keys).