Electron with React: how to setup production webserver

Question

I have electron app which loads React app runing on webpack-dev-server on port 8080. React app is communicating with node server app on port 9001. How can I setup webserver in production? What I'm trying now is instal node separately via postinstall script. So electron use own packaged version of node and webpack-dev-server use another version of node, installed via script. I feel this is not the right way. How can I use electron's version of node for webpack-dev-server? Is it possible to make it to use only the packaged version of node both for electron and webpack-dev-server? Thanks

Answer 1

The idea of installing node via deb dependency is not good due to postinstallation issues on windows - it is not so easy to write dependency to install on windows. Instead I downloaded node binaries and I packaged node binaries to asar package. I used files option to package only binaries for platform building is running on:

package.json:

"build": {
    "asarUnpack": [
      "**/*"
    ],
    "files": [
      "!binaries",
      "binaries/${os}/${arch}/node",
      "src",
      "*.html",
      "*.js",
      "*.tpl",
      "*.sh",
      "*.json",
      "*.md",
      "*.lock"
    ],

Thanks to asarUnpack option I unpack the asar package and I'm able to access node binary on filesystem. Then in main process index.js I'm constructing node path this way:

const nodePath = path.join(
    process.resourcesPath,
    "app.asar.unpacked",
    'binaries',
    platform == "win32" ? "win" : platform,
    arch,
    "node"
)

const productionWebpackServerStartPathArgs = [`${process.resourcesPath}/app.asar.unpacked/node_modules/webpack-dev-server/bin/webpack-dev-server.js`, '--config', `${process.resourcesPath}/app.asar.unpacked/webpack.config.js`];
let webpack_dev_server_cmd = crossSpawn(nodePath, productionWebpackServerStartPathArgs );