App built using electron-builder in electron-forge + webpack application shows blank screen

Question

I wanted to use electron-builder in my electron-forge (webpack-template and React) app, because of the more packaging options

electron-forge app was created with

create electron-app test --template=webpack

This is my package.json

  "name": "vocascan",
  "productName": "vocascan",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": ".webpack/main",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\"",
    "build": "electron-forge start && electron-builder --linux"
  },
  "keywords": [],
  "build": {
    "productName": "Vocascan",
    "files": [
    ],
    "linux": {
      "target": [
        "AppImage"
      ],
      "category": "Development"
    }
  },
  "license": "MIT",
  "config": {
    "forge": {
      "packagerConfig": {},
      "plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.jsx",
                  "name": "main_window"
                }
              ]
            }
          }
        ]
      ]
    },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.54",
    "@electron-forge/maker-deb": "^6.0.0-beta.54",
    "@electron-forge/maker-rpm": "^6.0.0-beta.54",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.54",
    "@electron-forge/maker-zip": "^6.0.0-beta.54",
    "@electron-forge/plugin-webpack": "6.0.0-beta.54",
    "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
    "css-loader": "^4.2.1",
    "electron": "10.1.5",
    "node-loader": "^1.0.1",
    "style-loader": "^1.2.1",
    "electron-builder": "^22.9.1"
  },
  "dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "babel-loader": "^8.1.0",
    "electron-squirrel-startup": "^1.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

As you can see I added

"build": "electron-forge start && electron-builder --linux"

and

"build": {
    "productName": "Vocascan",
    "files": [
    ],
    "linux": {
      "target": [
        "AppImage"
      ],
      "category": "Development"
    }
  },

in order to make electron-builder available

the build runs just fine, but when I start the app none of my components gets shown

---

If someone needs the browser window code

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

and this is my folder structure

Answer 1

This template is NOT working with electron-builder.

Because this template was designed to work with the electron-forge make command. electron-builder can't work with it because it's using webpack dev server and not building a static build. The template I linked is working with electron-builder because it's making a static build of react, the react components and the node modules you using and electron-builder can work with it.

I recommend this template: https://github.com/Levminer/create-electron-react-app