Sequential NPM script after "react-scripts start"

Question

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.

score 2 · Accepted Answer · answered Jul 31 '20 at 13:38

2

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

answered Jul 31 '20 at 13:38

Slim

663
3
11

Getting closer! It looks like this runs at the same time, because I get an electron window right away, but the dev server hasn't started yet, so it's a blank screen. I can refresh once the dev server starts up, which isn't a big deal. That said, is it possible to force the second script to wait for the first one to complete? – Andrew Jul 31 '20 at 13:47
I would go for just a refresh/doing whatever you need to do, but if you really want you can implement it by combining concurrently with wait-on, have a look here: https://stackoverflow.com/a/48192578 – Slim Jul 31 '20 at 13:52
1

Yes. Just tried combining concurrently and wait-on and now I don't need to refresh. The electron script doesn't run until my local dev server is started – Andrew Jul 31 '20 at 14:42

score 2 · Answer 2 · answered Jun 23 '21 at 07:57

2

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"
  }

answered Jun 23 '21 at 07:57

Chinh Nguyen

583
1
7
14

I needed a combination of `concurrently` and `wait-on` in order to successfully run a script exactly after the server has been started. – Mutu A. Sep 03 '22 at 16:02

score 0 · Answer 3 · answered Jul 31 '20 at 13:43

0

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

answered Jul 31 '20 at 13:43

Mina Fawzy

20,852
17
133
156

Unfortunately, I've tried the sequential run techniques and they are only executing the first half. Might be something to do with "react-scripts start" I suppose. – Andrew Jul 31 '20 at 13:47

score 0 · Answer 4 · edited Oct 29 '20 at 10:26

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.

score 0 · Answer 5 · answered Aug 11 '21 at 06:47

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

Sequential NPM script after "react-scripts start"

5 Answers5