How to have npm run <script> delegate to child package.json?

Question

I've got 2 levels of package.json files.

Example is here:

https://github.com/justin808/react-webpack-rails-tutorial

The reason is that the top level is a Rails App, and I'm putting all node tools under a directory called client, with it's own package.json file. The top level package.json file is a convenience as well as a hook for the node buildpack to run the npm install script.

I've got an example of forwarding the gulp command. Any way to generically forward anything not found from the top level package.json to the child one?

Top Level package.json.

{
  "name": "react-webpack-rails-tutorial",
  "version": "1.1.1",
  "description": "Code from the React Webpack tutorial.",
  "main": "server.js",
  "engines": {
    "node": "0.10.32"
  },
  "scripts": {
    "postinstall": "cd ./client && npm install",
    "gulp": "cd ./client && npm run gulp"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/justin808/react-webpack-rails-tutorial.git"
  },
  "keywords": [
    "react",
    "tutorial",
    "comment",
    "example"
  ],
  "author": "justin808",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/justin808/react-webpack-rails-tutorial/issues"
  },
  "homepage": "https://github.com/justin808/react-webpack-rails-tutorial"
}

Subdirectory package.json

{
  "name": "react-webpack-rails-tutorial",
  "version": "1.1.0",
  "description": "Code from the React Webpack tutorial.",
  "main": "server.js",
  "engines": {
    "node": "0.10.32"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/justin808/react-webpack-rails-tutorial.git"
  },
  "keywords": [
    "react",
    "tutorial",
    "comment",
    "example"
  ],
  "author": "justin808",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/justin808/react-webpack-rails-tutorial/issues"
  },
  "homepage": "https://github.com/justin808/react-webpack-rails-tutorial",
  "dependencies": {
    "babel-core": "^5.0.8",
    "babel-loader": "^5.0.0",
    "body-parser": "^1.12.2",
    "es5-shim": "^4.1.0",
    "imports-loader": "^0.6.3",
    "jquery": "^2.1.3",
    "loader-utils": "^0.2.6",
    "marked": "^0.3.3",
    "react": "^0.13.1",
    "react-bootstrap": "^0.20.1",
    "sleep": "^2.0.0",
    "webpack": "^1.7.3"
  },
  "devDependencies": {
    "babel-eslint": "^2.0.2",
    "bootstrap-sass": "^3.3.4",
    "bootstrap-sass-loader": "^1.0.3",
    "css-loader": "^0.9.1",
    "eslint": "^0.18.0",
    "eslint-plugin-react": "^2.0.2",
    "expose-loader": "^0.6.0",
    "express": "^4.12.3",
    "file-loader": "^0.8.1",
    "gulp": "^3.8.11",
    "gulp-eslint": "^0.8.0",
    "node-sass": "^2.1.1",
    "react-hot-loader": "^1.2.4",
    "sass-loader": "^0.6.0",
    "style-loader": "^0.9.0",
    "url-loader": "^0.5.5",
    "webpack-dev-server": "^1.8.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "gulp": "gulp"
  }
}

Answer 1

You can use npm run scripts to simplify the transaction (see npm-scripts). In the parent package.json:

  "scripts": {
      ...
     "client-build": "cd client && npm run build"
   }

Where the client has a package.json with the npm run build command for building the client-side code.

Then invoke npm run client-build as part of the shell command of other tasks. For instance:

  "scripts": {
    "start": "npm run client-build && gulp some-task", 
     ...
   }

It may help to break the child project out into a separate module with its own git repo and building it through a postinstall script. In that case, when running npm install on the parent project, the child will have a chance to build itself.