How to modify the folder structure of app.asar when using electron-builder?

Question

I am using create-react-app (CRA) to create and build my frontend code. My (simplified) folder structure looks like this:

package.json
node_modules/
public/
  └── electron.js
  └── index.html
src/

My npm scripts:

"build": {
  "appId": "com.somedomain.app",
},
"scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test --env=jsdom",
    "react-eject": "react-scripts eject",
    "electron-build": "electron-builder",
    "release": "yarn react-build && electron-builder --publish=always",
    "build": "yarn react-build && yarn electron-build"
}

When I run "build", the project is built and there's a build folder with everything in it, which is then used by electron to create the app.asar file. When I extract the contents, I see following structure:

package.json
node_modules/
build/
  └── electron.js
  └── index.html

How did electron-builder know to take the build folder from my project folder? I tried figuring it out by playing with the "build" field of my package.json like so:

"build": {
  "appId": "com.somedomain.app",
  "files": "app"
},

and renamed my build folder to app but then I get the following error:

 ⨯ Application entry file "build\electron.js" in the "[redacted][\app.asar" does not exist. Seems like a wrong configuration. 

It seems as though electron still tries to run electron.js from the build folder, which now doesn't exist in app.asar .

How can I modify the file structure in the app.asar file? Does it have to contain a build folder? Ideally, I'd like have the following structure:

package.json
node_modules
electron/
  └── electron.js
frontend
  └── index.html

I tried modifying the "files" field some more, I tried "extraFiles" and "buildResources" but even if I can get the folder structure inside of app.asar the way I want it, I continue to get the error:

 ⨯ Application entry file "build\electron.js" in the "[redacted][\app.asar" does not exist. Seems like a wrong configuration. 

Answer 1

I found out what was the problem was. Apparently, when electron-builder sees that react-scripts are in the dependencies it automatically uses a built-in configuration called react-cra. The build-in configuration for react-cra looks like this:

directories: {
  buildResources: "assets"
},
files: ["build/**/*"],
extraMetadata: {
  main: "build/electron.js"
}

the extraMetadata field is what caused the

⨯ Application entry file "build\electron.js" in the "[redacted][\app.asar" does not exist. Seems like a wrong configuration.

error.

To prevent using the the react-cra built-in configuration, one can add "extends": null in their package.json's "build" field. With the following configuration I got the desired result:

"build": {
    "appId": "io.gueney.app",
    "extends": null,
    "files": [
      "electron/**/*",
      "frontend/**/*"
    ]
  },