How to build an exe for Electron + React - reactjs

Question

I have been reading documentation and trying so many different things for days now. My electron app works just fine in dev mode, but both electron-forge and electron-builder do not work. My project is currently using electron-forge.
They both are able to create an installer. Electron forge doesn't install after running. electron-builder installs, but the app doesn't do anything when you click on it.
I really do not know what I'm doing wrong and I feel like I'm losing my mind.
I tried following the Squirrel.windows documentation for debugging, but when in the correct directory the commands don't even work.
Here is my package.json:
{
"name": "ptax-automation-desktop-app",
"author": "Redacted",
"version": "0.2.2",
"description": "In the property tax industry there is alot of monotonous work that involves visiting County's websites to retrieve Tax Bills, Assessment Notices, and other documents and subsequently upload this information to their system. However, with such monotony data entry errors are bound to be made. Also, a person's labor could be much better used towards something that requires more complex decision making while the automation runs in the background. Simply install the app, select an automation you want to run, upload a spreadsheet with the list of data points needed and relax.",
"main": "public/electron.js",
"homepage": "./",
"dependencies": {
"#formkit/auto-animate": "^1.0.0-beta.3",
"#fortawesome/fontawesome-svg-core": "^1.3.0",
"#fortawesome/free-solid-svg-icons": "^6.0.0",
"#fortawesome/react-fontawesome": "^0.1.17",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"browserify": "^17.0.0",
"capture-website": "^2.4.0",
"colors": "^1.4.0",
"concurrently": "^7.0.0",
"cross-env": "^7.0.3",
"dotenv": "^16.0.3",
"electron-common-ipc": "^15.1.0",
"electron-is-dev": "^2.0.0",
"electron-squirrel-startup": "^1.0.0",
"electron-store": "^8.0.1",
"electron-updater": "^5.3.0",
"find-object-paths": "^1.0.2",
"html-pdf-chrome": "^0.8.1",
"nanoid": "^4.0.0",
"path": "^0.12.7",
"prompt-sync": "^4.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"reactstrap": "^9.0.1",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"request": "^2.88.2",
"selenium-webdriver": "^4.2.0",
"socket-port-helpers": "^2.1.0",
"url": "^0.11.0",
"wait-on": "^6.0.1",
"web-vitals": "^2.1.4",
"xlsx": "^0.18.5"
},
"devDependencies": {
"#electron-forge/cli": "^6.0.0",
"#electron-forge/maker-deb": "^6.0.0",
"#electron-forge/maker-rpm": "^6.0.0",
"#electron-forge/maker-squirrel": "^6.0.0",
"#electron-forge/maker-zip": "^6.0.0",
"electron": "^21.2.2",
"electron-devtools-installer": "^3.2.0",
"node-sass": "^7.0.1",
"nodemon": "^2.0.15"
},
"scripts": {
"app": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron-forge start\"",
"prestart": "browserify -o ./public/preload.bundle.js -x electron ./preload.js",
"start": "cross-env GENERATE_SOURCEMAP=false",
"poststart": "react-scripts start",
"build": "react-scripts build && electron-builder -p always",
"electron:package:win": "npm run build && electron-builder -w -c.extraMetadata.main=build/electron.js",
"test": "react-scripts test",
"build-css": "node-sass ./src/css/sass_css/ -o ./src/css/vanilla_css/",
"watch-css": "nodemon -e scss -x \"npm run build-css\"",
"eject": "react-scripts eject",
"package": "react-scripts build && electron-forge package",
"make": "react-scripts build && electron-forge make"
},
"config": {
"forge": {
"packagerConfig": {
"icon": "src/images/icon.ico",
"name": "Ptax Automation App",
"asar": true
},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "cra_electron_forge_demo"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
"last 1 electron version",
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 electron version",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Here is my folder structure:
Here is my preload file:
const electronCommonIPC = require("electron-common-ipc/lib/electron-common-ipc-preload");
electronCommonIPC.PreloadElectronCommonIpc();
window.electronCommonIPC = electronCommonIPC;
window.require = require;
Here is my electron main file:
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require("electron");
// Library Imports
const { isDev } = require("electron-is-dev");
const Store = require("electron-store");
//Functions
const {
createIpcBusBridge,
} = require("./electron/functions/ipc/createIpcBusBridge");
const { createWindow } = require("./electron/functions/window/createWindow");
const { createTray } = require("./electron/functions/tray/createTray");
// Listeners
require("./electron/ipc-main-listeners/allListeners");
/*
---------------------------START OF BASE TEMPLATE---------------------------
*/
let store = new Store();
let tray;
/*
The whenReady method will be called when Electron has finished
initialization and is ready to create browser windows.
Some APIs can only be used after this event occurs.
*/
const reactDevToolsId = "fmkadmapgofadopljbjfkapdkoienihi";
app.whenReady().then(() => {
console.log("isDev: ", isDev);
if (isDev === undefined) {
const {
default: installExtension,
REDUX_DEVTOOLS,
} = require("electron-devtools-installer");
installExtension([REDUX_DEVTOOLS, reactDevToolsId])
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log("An error occurred: ", err));
}
const window = createWindow(__dirname, process, store);
if (tray !== undefined) {
tray.destroy();
}
tray = createTray(window, __dirname, process);
createIpcBusBridge();
app.on("activate", function () {
/*
On macOS it's common to re-create a window in the app when the
dock icon is clicked and there are no other windows open.
*/
if (BrowserWindow.getAllWindows().length === 0)
createWindow(window, tray, __dirname, process, store);
});
});
/*
Prevent Tray Icon Duplication
*/
app.on("before-quit", function () {
tray.destroy();
});
/*
Quit when all windows are closed, except on macOS. There, it's common
for applications and their menu bar to stay active until the user quits
explicitly with Cmd + Q.
*/
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
/*
---------------------------END OF BASE TEMPLATE---------------------------
*/
console.log("Settings path: ", app.getPath("userData"));
Here is the function I imported for creating the window from public/electron directory:
// Library Imports
const { BrowserWindow, ipcMain } = require("electron");
const { autoUpdater } = require("electron-updater");
const isDev = require("electron-is-dev");
const path = require("path");
const url = require("url");
// Functions
const { handleResolutionPref } = require("./handleResolutionPref");
const { handlePositionPref } = require("./handlePositionPref");
const { maximizeWindow } = require("./maximizeWindow");
const { minimizeWindow } = require("./minimizeWindow");
const { closeWindow } = require("./closeWindow");
// Listeners
require("../updater/listeners/updateAvailable");
require("../updater/listeners/updateDownloaded");
const createWindow = (directoryName, process, store) => {
const [screenWidth, screenHeight] = handleResolutionPref(store);
const [screenXCoordinate, screenYCoordinate, isScreenPositionCustom] =
handlePositionPref(store);
console.log(
"preload directory",
path.join(directoryName, "preload.bundle.js")
);
let window = null;
// Create the browser window.
if (isScreenPositionCustom === true) {
window = new BrowserWindow({
width: screenWidth,
height: screenHeight,
frame: false,
fullscreenable: true,
resizable: true,
transparent: false,
x: screenXCoordinate,
y: screenYCoordinate,
webPreferences: {
preload: path.join(directoryName, "preload.bundle.js"),
contextIsolation: false,
nodeIntegration: true,
sandbox: false,
webSecurity: false,
},
icon: path.join(directoryName, "icon.ico"),
});
} else {
window = new BrowserWindow({
width: screenWidth,
height: screenHeight,
frame: false,
fullscreenable: true,
resizable: true,
transparent: false,
webPreferences: {
preload: path.join(directoryName, "preload.bundle.js"),
contextIsolation: false,
nodeIntegration: true,
sandbox: false,
webSecurity: false,
},
icon: path.join(directoryName, "icon.ico"),
});
}
window.on("closed", () => (window = null));
if (isDev === true) {
window.loadURL("http://localhost:3000");
} else {
window.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file:",
slashes: true,
})
);
}
// Handle window toggling for custom titlebar
ipcMain.on("windowMinimize", () => minimizeWindow(window));
ipcMain.on("windowMaximize", () => maximizeWindow(window));
ipcMain.on("windowClose", () => closeWindow(window));
// Open the DevTools.
// window.webContents.openDevTools()
if (isDev === false) {
autoUpdater.checkForUpdates();
}
return window;
};
module.exports = { createWindow };
What am I doing wrong here guys?

Answer 1

So after losing my sanity for about 4 days I found out the cause of this.
For one reason or another, electron-is-dev is not working properly, and is just returning undefined. My window was never created because it was trying to install Redux dev tools when it shouldn't.
My solution was to replace the electron-is-dev with just checking the value of app.isPackaged instead.
I feel infuriated that I spent so long on such a stupid bug, but it's my fault for depending on the library I guess.