How to build with Electron-Builder when index.html has relative path - electron

Question

I want to build a project written in electron.js with Electron-builder when index.html file in the parent directory, a simple app with structure like below:
project
├── css
│ ├── style.css
│ └── img.png
├── electron
│ ├── main.js
│ └── package.json
│── index.html
│── index.js
└── icon.png
use win.loadFile('./../index.html'); in the main.js file, everythings works fine when use electron . command in the electron folder, but after run electron-builder, when run the app with the executable file nothing works and the index.html file doesn't appear.
I was trying to use files config in the package.json file but no success:
"build": {
"appId": "x.y.z",
"productName": "projectName",
"files": ["**/*", "build/icon.*", "../**/*"]
},
I don't know what to do ?!
I've found this issue https://github.com/electron-userland/electron-builder/issues/2693 but can't undestand it and don't know what should I do?

Answer 1

I can't answer in the general case, but here's the solution when using vue-electron-builder and TypeScript. This will let you organize your files in any arbitrary hierarchy.
Create a file vue.config.js in your project root (this more or less corresponds to the overrides you'd need for an electron project with webpack):
module.exports = {
pluginOptions: {
electronBuilder: {
// my 'main' process is in src/main.ts:
mainProcessFile: 'src/main/main.ts',
// my 'main.ts' should get recompiled if any of these change:
mainProcessWatch: [
'src/main/extra_file_1.ts',
'src/main/extra_file_2.ts',
]
}
},
pages: {
// I only have one renderer process (otherwise I'd need another entry in 'pages')
"renderer": {
// 'main' for the renderer process
entry: "src/renderer/main.ts",
// this is the part you care about: you can put the template anywhere
template: "src/viewer/index.html",
// this makes sure your renderer page has all the ts-to-js chunks it needs
chunks: ["chunk-vendors", "chunk-common", "renderer"]
}
}
};
Note that if you want your index.html to <link> to a static css file, you should put the static file in the public folder of your project root. Then you can link to it like this:
<link rel="stylesheet" href="<%= BASE_URL %>my_css_file.css">