Include extra files inside app.asar using electron

Question

It's a Vue app with electron-builder

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.3.2",
    "vuetify": "^2.2.33"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "electron": "^6.1.12",
    "typescript": "^3.9.5",
    "vue-cli-plugin-electron-builder": "~1.4.6",
    "vue-cli-plugin-vuetify": "~2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  }
}

When I use npm run electron:build, this structure is generated:

And this is the content of app.asar:

background.js include all the dependencies. There are some external modules (from node_modules) that read files using something like fs.readFile(__dirpath + '/file'). As expected, these files are not included in the generated bundle, so I need to add them.

I've tried to use this in vue.config.js:

module.exports = {
  lintOnSave: true,
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: {
    devtool: 'source-map'
  },
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraFiles: [
          'node_modules/module/file'
        ]
      }
    }
  }
}

But the file is included outside the app.asar, even with extraResources, and thus fs.readFile(__dirpath + '/file') did not find the file.

How can I include files inside app.asar?

Answer 1

The only way I found was using the public directory. Any file inside public/ will be copied to app.asar.

However, the file I need to copy belongs to an external lib, so to not make this file part of my project, I gitignored it and copy just before the build, using npm scripts.

"scripts": {
    "build": "cp node_modules/lib/file public && vue-cli-service electron:build -wl",
    "serve": "mkdir -p dist_electron && cp node_modules/lib/file dist_electron && vue-cli-service electron:serve"
  }

Answer 2

I found out the path for files have to be relative path from dist_electron/bundled(or maybe other directory). So if we have directory named keys in root, the config should to be something like bellow.

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        files: [
          "**/*",
          {
            from: "../../keys",
            to: "./keys",
            filter: ["**/*"],
          },
        ],
      },
    },
  },
};