How to add folders and files to electron build using electron-builder

Question

I am creating an electron which running react generated from create-react-app. Then i add nedbjs(a persistence database) and camojs(ODM for nedb) as dependency. To connect r

Answer 1

I'm using a vue + electron library (https://github.com/nklayman/vue-cli-plugin-electron-builder). I'm using the following:

• electron 5.0.13
• vue 2.6.10
• vue-cli-plugin-electron-builder 1.4.0

With that particular configuration, The following vue.config.js file was able to let me copy & paste a couple of directories from my project into the electron build:

vue.config.js (works on my setup)

module.exports = {
    pluginOptions: {
      electronBuilder: {
        builderOptions: {
          // options placed here will be merged with default configuration and passed to electron-builder
          files: [
            "**/*"
          ],
          extraFiles: [
            {
              "from": "eepromStaging",
              "to": "eepromStaging",
              "filter": ["**/*"]
            },
            {
                "from": "src/assets/bin",
                "to": "src/assets/bin",
                "filter": ["**/*"]
            }
          ]
        }
      }
    }
  }

So I think this is what's going on:

**/* is a glob pattern, which means "match all files". The files: [**/*] in vue.config.js will make your entire project directory available to the builder. However, this doesn't mean that the files will be in your build directory: it just means that the files are available to the builder when building. If you didn't want the builder to have access to all files, then you'd replace the **/* with something else.

Regarding the installer that ultimately gets made and will be run by a user, the installer will create a directory on the user computer that mirrors the "build/win-unpacked" directory that gets made by electron-builder. At least this is the behavior in my setup. I'll refer to that as the "unpacked" directory.

The section called extraFiles will let you define extra files/folders that you can copy into your unpacked directory, from the files that are available to the builder. So I wanted to just copy this one folder called eepromStaging from my project root directory, into the unpacked root directory. And I also wanted to copy & paste this folder of binary files from my project into the unpacked directory. And these files are "extra": they're files that get added to your unpacked directory on top of everything else. The "filter": ["**/*"] means that all of the files and folders are going to be copied over.

I tested out the above configuration and it works for me: I'm able to make an exe installer that installs all my extra binary files in the correct location. However... in my configuration, I have to use vue.config.js, and if I try to add these properties to my package.json, it doesn't work. Ultimately though, these properties that I'm defining in vue.config.js simply get passed into the electron builder properties. So I think where you end up specifying these properties depends on your particular setup, but I think that these properties themselves should be the same. So maybe a solution for you would be to put this in your package.json, if you're just trying to copy over database directory, but I'm not sure.

package.json (this may not work)

...
  "build": {
    "files": [
      "**/*"
    ],
    "extraFiles": [
      {
        "from": "database",
        "to": "database",
        "filter": ["**/*"]
      }
    ]
  },
...