Electron - How to add external files?

Question

I have an Electron app. I try to make the app open an .exe file. I created a directory in the root folder named lib and placed the .exe file there. In development, I have no problem opening the file by using __dirname + '/lib/file.exe, but when I package the app (using yarn dist), it does not open the exe file and there is no lib folder anymore on the dist folder.

I tried writing to console the default location using console.log(__dirname) and it outputs \dist\win-unpacked\resources\app.asa (which is a file).

How can I add an external file that can be accessed when the app is packaged?

score 47 · Accepted Answer · edited Jul 22 '22 at 03:49

47

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

For example:

Create a new folder named extraResources adjacent to pacakge.json

Add the following code to your package.json file:

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

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

edited Jul 22 '22 at 03:49

Remi Guan

21,506
17
64
87

answered Sep 04 '17 at 08:51

user2298995

2,045
3
19
27

14

use `process.resourcesPath` instead of `__dirname` for a more reliable cross-platform solution. – Bruno Lemos Sep 13 '19 at 22:25
6

This worked for me: ```const path = require('path'); path.join(process.resourcePath, 'extraResources', 'filename'); ``` – americo Mar 19 '20 at 19:23
1

Inside this ``extraResources`` directory I have a file timer.sh when I trying your method, then I am getting this error ```Uncaught Error: ENOENT, extraResources/timer.sh not found in /opt/ProjectName/resources/app.asar``` – Not A Bot May 11 '20 at 04:47
Thank you this really helped me a ton! – Scott Sword Aug 12 '20 at 21:58
6

@americo there is a typo in your code, it should be `process.resourcesPath`. – Handsome Greg Mar 11 '21 at 23:47
How does this work during development though? These files don't seem to be copied when `electron .` is run in the cwd during development – TheGoodDalek Jun 06 '23 at 16:44

score 38 · Answer 2 · edited May 01 '19 at 11:32

Add the following code to package.json:

 "build": {
    "extraResources": [
      {
        "from": "./src/extraResources/",
        "to": "extraResources",
        "filter": [
          "**/*"
        ]
      }
    ]
  }

Then, you can access the files using

const configFile = path.join(path.dirname(__dirname), 'extraResources','config.json');

I use the following folders structure which allows me to run the app any way.

from project folder: node_modules\.bin\electron.cmd src\main\index.js

from unpacked source dist\win-unpacked\app.exe check-for-update

from installed folder C:\Users\user\AppData\Local\Programs\app\app.exe

+-- dist
|   +-- win-unpacked
|      +-- resources
|         +-- extraResources
|            config.json
+-- node_modules
+-- src 
|   +-- extraResources
|      config.json
|      someFile.js
|   +-- main
|      index.js
|   +-- render
|      index.js

Hi @swaroop-bekal, I tried it under windows but doesn't works. The folder extraResources are correcty created but if I launch the application I have this messages: Uncaught Error: Cannot find module '\extraResources\config.json' — Francesco, Mar 31 '23 at 17:09

score 9 · Answer 3 · answered Sep 02 '19 at 15:25

there I found a new solution, using electron-packager on Windows do not add the files into the resources folder at the end of the process.

So I added this command into the package.json

"build-win": "electron-packager . --platform=win32 --asar --prune --arch=ia32 --extra-resource=./extraResources/documents/QuickStartGuideWN-H1.pdf --extra-resource=./extraResources/MAC_drivers/MacOS10.14/ --icon=assets/alfa_a.ico --out ./dist --overwrite",

And now the files are insied the resource fodlder just add

--extra-resource=./extraResources/file

Electron - How to add external files?

3 Answers3

Linked