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

admin管理员组

文章数量:1279124

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": ".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": ".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. 

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": ".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": ".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. 

• javascript
• node.js
• electron
• electron-builder
• asar

Share Improve this question Follow asked Apr 8, 2020 at 10:30 Kerim GüneyKerim Güney 1,26822 gold badges1414 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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/**/*"
    ]
  },

本文标签： javascriptHow to modify the folder structure of appasar when using electronbuilderStack Overflow