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.

Answer 2

you could write a batch file where you put the gulp -command. Then you have to check the errorstate. That could look like this:

@echo off

:RUN_GULP
echo Running Gulp...
gulp
goto END

:END
if %ERRORLEVEL% neq 0 goto PROCESS_ERROR
exit

:PROCESS_ERROR
cd ./client
gulp
exit;

Then you just have to call the script in your package.json like this:

"gulp": "call ./path/to/batfile.bat"

Did the same on my project....

EDIT: For all scripts.... you could create one batchfile that takes the script name as parameter. the script does the same like above, but it should work for every command.

NOTE: You have to use something like start path/to/batchfile.bat gulp instead of npm run gulp . Errorhandling do not work for npm errors!

This could look like this:

@echo off

:: Check if script is defined
set _script=%1
if "%_script%"=="" goto NO_SCRIPT_DEFINED

:START_APP
npm run %_script%
goto END

:NO_SCRIPT_DEFINED
echo ERROR: script was not defined
pause
exit

:END
if %ERRORLEVEL% neq 0 goto NO_PARENT_SCRIPT
exit

:NO_PARENT_SCRIPT
echo searching in ./client ...
cd ./client 
npm run %_script%
exit