Why does electron fail to start?

Question

I have just started working with electron recently, using a tutorial posted here. The github for the project template I created for myself to use based off of what I learned is here. The README of that repo shows all of the things I did when creating that template.

So far everything has been hunky dory, at least for the first couple times I run npm run dev after running npm install and npm run build. After maybe two or three successful attempts, when I return to the project later to try and run it, the concurrency plugin will load wait-on properly, but wait-on never seems to trigger when the react-scripts finishes successfully initiating the local server for the react page. Here is my output:

PS D:\Home\Projects\finally> npm run dev
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> [email protected] dev
> concurrently -k -s command-electron "cross-env BROWSER=none npm start" "npm:electron"

[electron] npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
[0] npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
[electron]
[electron] > [email protected] electron
[electron] > wait-on tcp:3000 && electron .
[electron]
[0]
[0] > [email protected] start
[0] > react-scripts start
[0]
[0] (node:4504) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] (node:4504) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] Starting the development server...
[0]
[0] Compiled successfully!
[0]
[0] You can now view finally in the browser.
[0]
[0]   Local:            http://localhost:3000
[0]   On Your Network:  http://172.28.224.1:3000
[0]
[0] Note that the development build is not optimized.
[0] To create a production build, use npm run build.
[0]
[0] webpack compiled successfully
[0] No issues found.

At this point it never continues, it just hangs, and the electron window never populates. I have tried recreating the repo a couple times, deleting build and node_modules and reinstalling, but nothing seems to be a common factor.

Also it should be noted, this is without having added any code beyond what that template provides. I clone the template, try to run it, it works a couple times, and then no more.

Any insights?

Answer 1

I had sam problem and answer is here: https://dev.to/brittanynavin/comment/1ledd

So, in package.json just change http://localhost:3000 to IP address for start script. I have it like this:

"scripts": {
    "start": "concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://127.0.0.1:3000 && electronmon .\"",
    "build": "react-scripts build",
    "test": "mocha",
    "eject": "react-scripts eject",
    "dist:win": "npm run build && electron-builder -w -c.extraMetadata.main=build/electron.js",
    "dist:mac": "npm run build && electron-builder -m -c.extraMetadata.main=build/electron.js",
    "dist:linux": "npm run build && electron-builder -l -c.extraMetadata.main=build/electron.js",
    "react-start": "react-scripts start"
  },