How do I use package.json scripts to simultaneously watch for changes on my .ts files using webpack and run Electron?

Question

I have two separate scripts in my package.json, one runs electron (npm run electron) and one runs the webpack build and watch commands. I've tried running both from the same script command like this:

scripts: { 
     "start": "npm run electron && npm run watch",
     "watch": "webpack --watch --config config/webpack.prod.js --progress --profile --bail",
     "electron": "electron ./src/app"
}

This causes electron to execute, but the second command doesn't fire until electron closes which is not desirable. I've also tried switching the commands, which causes webpack to run in watch mode, and never launches electron. I realize I could just open two command windows and run them separately, but I was wondering if there was a convenient way to run from a single command in the package.json file.

Answer 1

Try modifying your "start" script to look like this:

scripts: { 
 "start": "start npm run electron && npm run watch",
 "watch": "webpack --watch --config config/webpack.prod.js --progress --profile --bail",
 "electron": "electron ./src/app"
}

In windows command console, you can use the start command to bring up a new console window automatically. Anything following the start command will be executed in the new window.