Closing Electron app does not stop the script

Question

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 experienced this problem in multiple platforms, specially Windows and Linux — João Batista, May 20 '20 at 19:06

score 1 · Answer 1 · answered May 20 '20 at 19:47

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 command 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 commands 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 command 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)

Thanks a lot, but is there any way that I can close the process from inside the app, without packaging it? — João Batista, May 21 '20 at 18:40
Maybe, but it would be really hacky. Why would you want to tho? You can just use CTRL+C to kill both processes in the terminal. — AJ_, May 22 '20 at 01:27

score 1 · Answer 2 · answered Jan 13 '22 at 19:00

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.com/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]

score 0 · Answer 3 · answered Nov 01 '21 at 20:49

0

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.

answered Nov 01 '21 at 20:49

Andre GolFe

300
5
12

Closing Electron app does not stop the script

3 Answers3