How do i configure React with Electron.js (with Typescript)?

Question

So ive watched a couple tutorials on this particular subject. This includes youtube videos as well as browsing StackOverflow. Despite this im having an issue. So i have this package.json:

{
  "name": "electron-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@electron/remote": "^1.0.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^5.0.0-beta1",
    "electron-is-dev": "^1.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "main": "public/main.js",
  "homepage": "./",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron:serve": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm electron:start\"",
    "electron:build": "npm build && electron-builder -c.extraMetadata.main=build/main.js",
    "electron:start": "wait-on tcp:3000 && electron ."
  },
  "build": {
    "extends": null,
    "appId": "com.example.electron-cra",
    "files": [
      "dist/**/*",
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^5.3.0",
    "cross-env": "^7.0.3",
    "electron": "^11.2.1",
    "electron-builder": "^22.9.1",
    "prettier": "^2.2.1",
    "wait-on": "^5.2.1"
  }
}

Yes i even went to full Js to try to see if that was somehow an issue. Turns out the error is the same with Ts or Js. When i run npm run electron:serve it gives me an error saying:

> electron-react@0.1.0 electron:serve /home/pc/workspace/react-electron-main
> concurrently -k "cross-env BROWSER=none npm start" "npm run electron:start"

[1] 
[1] > electron-react@0.1.0 electron:start /home/pc/workspace/react-electron-main
[1] > wait-on tcp:3000 && electron .
[1] 
[0] 
[0] > electron-react@0.1.0 start /home/pc/workspace/react-electron-main
[0] > react-scripts start
[0] 
[0] ℹ ｢wds｣: Project is running at http://172.21.62.72/
[0] ℹ ｢wds｣: webpack output is served from 
[0] ℹ ｢wds｣: Content not from webpack is served from /home/pc/workspace/react-electron-main/public
[0] ℹ ｢wds｣: 404s will fallback to /
[0] Starting the development server...
[0] 
[1] /home/pc/workspace/react-electron-main/node_modules/electron/dist/electron: error while loading shared libraries: libgdk_pixbuf-2.0.so.0: cannot open shared object file: No such file or directory
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! syscall spawn
[1] npm ERR! file sh
[1] npm ERR! errno ENOENT
[1] npm ERR! electron-react@0.1.0 electron:start: `wait-on tcp:3000 && electron .`
npm ERR! spawn ENOENT
[1] npm ERR! 
[1] npm ERR! Failed at the electron-react@0.1.0 electron:start script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1] 
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     /home/pc/.npm/_logs/2021-08-16T01_34_36_787Z-debug.log
[1] npm run electron:start exited with code 1
--> Sending SIGTERM to other processes..
[0] cross-env BROWSER=none npm start exited with code SIGTERM
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron-react@0.1.0 electron:serve: `concurrently -k "cross-env BROWSER=none npm start" "npm run electron:start"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the electron-react@0.1.0 electron:serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/pc/.npm/_logs/2021-08-16T01_34_36_854Z-debug.log

Anyone knows how to actually launch this? Everything i saw used either directly this or some iteration of this and i cant seem to make it work. Im working on WSL2 if that matters to this case. Thanks in advance

EDIT: Ive made more changes but actually changed very little. I edited the scripts in package.json to

"scripts": {
    "r_start": "react-scripts start",
    "r_build": "react-scripts build",
    "r_test": "react-scripts test",
    "r_eject": "react-scripts eject",
    "start": "concurrently \"cross-env BROWSER=none npm run r_start\" \"wait-on http://localhost:3000 && electron .\""
  }

While this seems to run, it just kinda doesn't. Here what it says:

Compiled successfully!
[0] 
[0] You can now view electron-react in the browser.
[0] 
[0]   Local:            http://localhost:3000
[0]   On Your Network:  http://172.21.62.72:3000
[0] 
[0] Note that the development build is not optimized.
[0] To create a production build, use yarn build.
[0] 
[1] /home/pc/workspace/react-electron-main/node_modules/electron/dist/electron: error while loading shared libraries: libgdk_pixbuf-2.0.so.0: cannot open shared object file: No such file or directory
[1] wait-on http://localhost:3000 && electron . exited with code 127

Now im aware WSL2 needs a tool to open desktop apps, i have VcXsrv and im able to open ubuntu calculator ui in windows. So this Windows X Server is working.

Answer 1

Electron on WSL is a bit tricky. This is due to the fact you need to run an xserver utility in windows (not for too much longer: https://learn.microsoft.com/en-us/windows/wsl/tutorials/gui-apps). And you have to install a few extra packages on your WSL instance.

Here's a nice step be step guide (credits to @caseywatts): https://gist.github.com/caseywatts/9700b402b6b51d1d6af9f0b206739770