Electron-Builder include external folder

Question

I am building multiple electron apps and have one directory for common pictures and files. I would like to include them when building each app with electron-builder. The docs recommended -if I understood correctly- adding the path to the build > files key but it doesn't seem to work using this config file:

"build":{
    "files": [
        "**/*",
        "../common/img/*"
    ]
}

My directory structure is as follows:

|git_folder
|-- electronapp1
|---- package.json
|-- electronapp2
|---- package.json
|-- common
|---- img
|---- js
|---- css

I am trying to access the common directories with i.e. this HTML code <link rel="stylesheet" href="../common/css/master.css">. It works when starting it with electron . for debugging and developing, but when building with electron-builder, it doesn't seem to pack the common directories and throws "File not found" in the console.

Thanks for pointing that out, however in my code it's correct, was just the question where I missed it. — creyD
– creyD, Commented May 4, 2020 at 19:03
where is your builder configuration outside or inside pakcage.json? — tpikachu
– tpikachu, Commented May 4, 2020 at 19:05

tpikachu · Accepted Answer · 2022-03-14 00:57:50Z

4

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.

edited Mar 14, 2022 at 0:57

answered May 5, 2020 at 9:22

tpikachu

4,8522 gold badges22 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

creyD Over a year ago

Thank you for your answer, sadly it doesn't work. The generated src tag C:\Users\WDAGUtilityAccount\AppData\Local\Programs\seitenapp\resources\app.asar\common\background.png doesn't exist and app.asar is a file.

tpikachu Over a year ago

@creyD path.join(appResourcePath, 'img', 'background.png')

creyD Over a year ago

I tried that, but it didn't work either. I think this has to do with the fact that app.asar is a file.

tpikachu Over a year ago

@creyD this asar is a electron content file which is accessible inside.

tpikachu Over a year ago

Asar is a simple extensive archive format, it works like tar that concatenates all files together without compression, while having random access support.

|

Collectives™ on Stack Overflow

Electron-Builder include external folder

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related