Webpack app.js Not Being Loaded Into HTML Script Tag After Packaging with Electron-Builder

Question

I am trying to build a React app using Electron-Builder. Right now, I have a simple template with a file structure like this:

Project
+
|
+--node_modules/
|
+--build/
|  |
|  +--js/
|     |
|     +--app.js
|
+--src/
|  |
|  +--js/
|     |
|     +index.js
|     |
|     +app.js
|
+index.html
|
+main.js
|
+package.json
|
+webpack.common.js

Webpack.common.js is a boilerplate config file that gives src/js/index.js as the entrypoint for webpack. src/js/index.js is the entry point for the react app. src/js/app.js defines a simple hello world react app that gets rendered by src/js/index.js. Webpack takes src/js/index.js and creates build/js/app.js, which is then included in index.html as the src for a <script> tag. main.js just defines a basic electron app that loads index.html via:

win.loadFile('index.html')

Here are the relevant parts of the package.json file:

...

"scripts": {
    "watch": "webpack --config webpack.common.js --watch",
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
},
"build": {
    "linux": {
        "target": [
            "AppImage"
        ]
    }
},

...

This setup works great when running npm start to run the electron app in dev mode. This boots up the electron app and my hello world app shows on the screen. However, when I package the app using npm run dist then run the AppImage file that gets produced, I get a blank window with nothing on it. After some tinkering, I realized the issue is related to index.html loading build/js/app.js as a script. In fact, if I copy build/js/app.js to the root as app.js and modify index.html to read

<script src="app.js"></script>

instead of

<script src="./build/js/app.js"></script>

then the AppImage runs fine.

What do I need to do to get the build version to run properly using the build/js/app.js script produced by webpack?

Note that this is my first time trying to package an app using electron-builder and I don't really know what I'm doing.

Answer 1

I was able to solve the problem by adding:

“files”: [
“**/*”,
“build/js/app.js”
]

To the “build” object in package.json