I converted my React app into an Electron app so that I can run the application as a executable. I can run the application no problem in development, but when I build the app using electron-builder and try to run the executable, all that shows is a blank screen. Is this a common error that people run into if so how do I fix it? Also I am not using react-router-dom in my react project nor am I doing any routing to other pages, it is a single page application.
This is my main.js file in the public dir for electron
`
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
title: 'T.I.N.C.A.N.',
frame: true,
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
worldSafeExecution: true,
contextIsolation: true,
}
})
// and load the index.html of the app.
// mainWindow.loadFile('index.html')
mainWindow.loadURL('https://localhost:3000')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This 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.
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 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()
})
})
// 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', () => {
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.`
And this is my package.json file
{ "name": "chess", "version": "0.1.0", "private": true, "author": "Reece Cristea and Tim O'Shea", "description": "Chess AI Application", "main": "public/main.js", "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "concurrently": "^8.2.2", "cross-env": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "wait-on": "^7.2.0", "web-vitals": "^2.1.4", "yarn": "^1.22.22" }, "devDependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "concurrently": "^8.2.2", "cross-env": "^7.0.3", "electron": "^30.0.1", "electron-builder": "^24.13.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "wait-on": "^7.2.0", "web-vitals": "^2.1.4", "yarn": "^1.22.22" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron-dev": "electron .", "electron:serve": "concurrently -k "cross-env BROWSER=none yarn start " "yarn electron:start" ", "electron:build": "yarn build && electron-builder -c.extraMetadata.main=build/main.js", "electron:start": "wait-on http://127.0.0.1:3000 && electron ." }, "build": { "extends": null, "appId": "com.tincan.app", "files": [ "dist/**/*", "build/**/*", "node_modules/**/*", "package.json", "public/**/*" ], "directories": { "buildResources": "assets" }, "win": { "target": "NSIS" }, "mac": { "target": "dmg" }, "linux": { "target": [ "snap", "AppImage", "deb" ] } }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
Reece Cristea is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1