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 react with nedb i use electron ipc.

Here is my project structure:

And here is my package.json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-pack": "build --em.main=build/electron.js",
    "electron-release": "build --em.main=build/electron.js --publish=always",
    "preelectron-pack": "yarn build",
    "preelectron-release": "yarn build"
  },
  "build": {
    "appId": "com.example.cra-electron-boilerplate",
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "directories": {
      "buildResources": "assets"
    },
    "publish": {
      "provider": "github"
    }
  },

I use command yarn electron-pack to package my app. And then running the unpacked executable from dist folder then got this error:

Here is my repo

Answer 1

To add a file or folder on your electron build folder, you can add the extraFiles options on package.json. Here is an example to copy a "credential" directory:

"build": {
  "appId": "com.example.electron-boilerplate",
  "files": [
    "app/**/*",
    "node_modules/**/*",
    "package.json"
  ],
  "directories": {
    "buildResources": "resources"
  },
  "extraFiles": [
    "credentials"
  ],
  "publish": null
},

And then

$ npm run release // as usual

Hope it will help

Answer 2

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

Answer 3

Was running into issues with this as well, and found the files property to be the solution. This particular example copies a directory from my node_modules into the final build directory.

i.e. on Windows, it copies the files to: yourapp.exe/$PLUGINSDIR/app-64.7z/resources/app/

builder.config.js

module.exports = {
  productName: "myapp",
  appId: "com.reflex.app",
  directories: {
    output: "build",
  },
  files: [
    "package.json",
    {
      // SOLUTION
      from: "yourdirectoryorfilenamehere",
      to: "yourdirectoryorfilenamehere",
      filter: ["**/*"], // This will recursively include all sub-directories & files
    },
  ],
  // ... other configuration here ...
};

And then you can access the final files via a script in src/renderer/ or src/main

import { app } from "electron"; // For main process

/* 
Or use this instead for the renderer process: 
import { remote } from 'electron' // For renderer process
const { app } = remote
*/

const path = require("path");
const yourdirectoryorfilenamehere = path.join(app.getAppPath(), "/yourdirectoryorfilenamehere");
console.log(yourdirectoryorfilenamehere) // When built, this will show the path to where all your resources from (`files: []`) were saved