Electron - How to Add External Files

Electron - How to add external files?

Managed to solve it by using extraResources. Should be declared under build in your package.json file.

For example:

1. Create a new folder named extraResources adjacent to pacakge.json

2. Add the following code to your package.json file:

   "build": {
       "extraResources": ["./extraResources/**"]
   }
   

3. Then, you can access the files inside this folder by using __dirname + '/../extraResources/' from your main app.

Electron-Builder include external folder

In your configuration,

"extraResources": [
    {
        "from": "../common",
        "to": "common"
    }
],
"files": [
  "**/*"
],

So if I were you I'll configure it like this

const path = require("path");
const appPath = __dirname;
const appResourcePath = path.join(appPath, "..", "common")

module.exports = {
  appPath,
  appResourcePath
};

Then you can use this appResourcePath anywhere at your renderer
Such as

<img src=path.join(appResourcePath, 'img', 'background.png')>

Then this will be working in any environment.

Adding external javascript file in javascript

Since electron is node based, you can use require both in your main process JS file and in any JS file your project uses.

// main.js or something
let myModule = require("./myModule");

// myModule.js
....
module.exports = function() {}; // or whatever you want to share with main.js

Packaging Electron Apps with external files

look into process.resourcesPath

---

Related Topics