Sequential NPM script after "react-scripts start"

user_11193211 0
Viewed 2551

Working on an Electron app with React. Right now, to get things started, I run the typical npm start command which runs the react-scripts start script.

This starts the dev server. Once the dev server is started, I open a second terminal window and run a script to start electron npm run start-electron which opens my React app in the Electron window.

This works as expected, but I was curious if there was a way to create a script that would:

  • Start the dev server
  • Wait for dev server to be started
  • Then start electron

I tried setting up a sequential script in package.json but it only starts up the dev server. For example npm run start && npm run start-electron.

This isn't make or break. The two terminal option works fine, just didn't know if this was possible.

npm-scripts electron package.json reactjs
5 Answers

Yes it is possible, I use concurrently to do it within my projects

npm i concurrently

and add a new script, let's call it dev for example, then in your scripts:

"dev": "concurrently \"npm run start\" \"npm run start-electron\""

All that remains to do now is npm run dev

user_131532810

I have the exact same situation, and below script work for me (remember to install wait-on)

  "scripts": {
    "start-reactjs": "PORT=25610 react-scripts start",
    "start-electron": "wait-on http://localhost:25610 && electron .",
    "start": "npm run start-electron & npm run start-reactjs"
  }
user_19263460

you can create a script in the root directory with extension .sh it could contain all operations for you

  npm start
  npm run start-electron

The second approach you could create a custom script in package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "customStart":"npm run start && npm run start-electron"
  },

to run this script

npm run customStart
user_32405830

You could try start-server-and-test npm module. It has different purpose, but it could work for your scenario.

From documentation:

This command is meant to be used with NPM script commands. If you have a "start server", and "test" script names for example, you can start the server, wait for a url to respond, then run tests. When the test process exits, the server is shut down.

    "scripts": {
        "start-server": "npm start",
        "test": "mocha e2e-spec.js",
        "ci": "start-server-and-test start-server http://localhost:8080 test"
        } 
    }

To execute all tests simply run npm run ci.

Another alternative could be concurrently combined with wait-on as @Slim said

From documentation:

wait-on will wait for period of time for a file to stop growing before triggering availability which is good for monitoring files that are being built. Likewise wait-on will wait for period of time for other resources to remain available before triggering success.

user_70272240

I solved it by using concurrently

npm i concurrently

In my package.json

"build": "concurrently \"npm run build-react\" && npm run build-jsx",

I'm using it to build an Adobe extension using react, and I need to bundle my extendscript after the react-scripts build, which would otherwise delete my .jsxbin

user_152525430
Related