I have a bit of a problem that I hope someone could help me with.

I have an Electron + React desktop application, and I need to handle properly its closing. When I close the aplication (click on the X on the window) the program stops, however, the terminal windows that I used to run the program doesnt stop.

I use this script to run the program:

npm run electron-dev

That does:

"scripts": {
   "start": "react-scripts start",
   "electron-dev": "concurrently \"npm run start\" \"wait-on http://localhost:3000 && electron .\""
 }

I run my app normally, when I close the window, my terminal goes:

wait-on http://localhost:3000 && electron . exited with code 0

But I cant type on my terminal unless I kill the program with a Control + C.

Here is how I'm handling the app closing:

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
     app.quit();
   }
});

app.on('before-quit', () => {
    mainWindow.removeAllListeners('close');
    mainWindow.close();
});

Can someone help me with this?

I have a bit of a problem that I hope someone could help me with.

I have an Electron + React desktop application, and I need to handle properly its closing. When I close the aplication (click on the X on the window) the program stops, however, the terminal windows that I used to run the program doesnt stop.

I use this script to run the program:

npm run electron-dev

That does:

"scripts": {
   "start": "react-scripts start",
   "electron-dev": "concurrently \"npm run start\" \"wait-on http://localhost:3000 && electron .\""
 }

I run my app normally, when I close the window, my terminal goes:

wait-on http://localhost:3000 && electron . exited with code 0

But I cant type on my terminal unless I kill the program with a Control + C.

Here is how I'm handling the app closing:

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
     app.quit();
   }
});

app.on('before-quit', () => {
    mainWindow.removeAllListeners('close');
    mainWindow.close();
});

Can someone help me with this?

• javascript
• node.js
• reactjs
• npm
• electron

• What platform are you on? – Dave Newton Commented May 20, 2020 at 19:04
• I have experienced this problem in multiple platforms, specially Windows and Linux – João Batista Commented May 20, 2020 at 19:06

3 Answers 3

The most elegant way to resolve this is to use the --kill-others/-k option in your concurrently script.

In my package file, under scripts:

"dev": "concurrently \"npm run client\" \"wait-on tcp:3000 && electron .\" -k",

On any type of exit of the related processes, the others will stop too. This can be further controlled by the --kill-others-on-fail, as described in their documentation:

https://www.npmjs./package/concurrently

Killing other processes
  -k, --kill-others          kill other processes if one exits or dies [boolean]
      --kill-others-on-fail  kill other processes if one exits with non zero
                             status code                               [boolean]

This is because you are using concurrently, this is expected behaviour.

When you close the window (and quit the program on macOS), the electron process does stop, however the the mand you gave in the terminal is still running because you are still running react-scripts.

Look at your electron-dev script, you say you want to run the mands npm start and wait-on http://localhost:3000 && electron .\. When you close the electron app, it tells you that the process ended (wait-on http://localhost:3000 && electron . exited with code 0). However you have only ended 1 of the 2 processes you created. The process created npm start is still running and therefore terminal control isn't returned back to you.

npm start executes the mand react-scripts start, which sets up the development environment and starts a server. You have a few options for killing the process, CTRL+C is the easiest of them.

When you package your app, you wont have this issue, the app will close cleanly when the user closes the window (or quits the program on macOS)

Maybe it's too late for who made the question, but for others still out there searching for a solution:

You can use npm-run-all.

Here is the documentation for this package.