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

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?

user_2744934 · Answer

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 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:

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

1 Answers