My Electron App is Not Loading After Packaging

Question

Checked app.asar contents I verified that build/index.html and other necessary files exist inside app.asar, meaning they are correctly included in the package.

✅ 2. Modified electron.js to correctly load index.html Initially, I was using:

I'm building an Electron + React application, and after packaging it with electron-builder, the app opens but remains blank.

mainWindow.loadFile("build/index.html");

I changed it to:

const startURL = \file://${path.join(__dirname, 'build', 'index.html')}`;`

mainWindow.loadURL(startURL);

. Opened DevTools (Ctrl + Shift + I) to Check Errors I added the following lines to electron.js to see potential errors:

mainWindow.webContents.openDevTools();
    mainWindow.webContents.on("devtools-opened", () => {
    mainWindow.webContents.closeDevTools();
});

My code is :

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    icon: path.join(__dirname, 'build', 'favicon.ico'),
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 🚀 Cargar correctamente `index.html` de React
  const startURL = `file://${path.join(__dirname, 'build', 'index.html')}`;
  mainWindow.loadURL(startURL);

  // 🔹 Abre DevTools y lo cierra inmediatamente (Para verificar que carga sin errores)
  mainWindow.webContents.openDevTools();
  mainWindow.webContents.on("devtools-opened", () => {
      mainWindow.webContents.closeDevTools();
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
main

const { app, BrowserWindow } = require('electron');
const path = require('path');
const { spawn } = require('child_process');

let serverProcess;

function startServer() {
  // Asegúrate de que la ruta a server.js sea la correcta
  serverProcess = spawn('node', [path.join(__dirname, 'server.js')]);

  serverProcess.stdout.on('data', (data) => {
    console.log(`Servidor: ${data}`);
  });

  serverProcess.stderr.on('data', (data) => {
    console.error(`Error del servidor: ${data}`);
  });
}

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  
  // Cargar el index.html del build de React
  win.loadFile(path.join(__dirname, 'build', 'index.html'));
}

app.whenReady().then(() => {
  startServer();
  createWindow();
});

app.on('window-all-closed', () => {
  if (serverProcess) serverProcess.kill();
  if (process.platform !== 'darwin') app.quit();
});

package

{
  "name": "cotizador",
  "version": "0.1.0",
  "main": "electron.js",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.7.9",
    "cors": "^2.8.5",
    "express": "^4.21.2",
    "node-fetch": "^2.7.0",
    "pdf-lib": "^1.17.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "url": "^0.11.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "electron-dev": "npm run build && electron .",
    "dist": "npm run build && electron-builder",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  },
  "build": {
    "appId": "com.tuempresa.miapp",
    "directories": {
      "buildResources": "build"
    },
    "files": [
      "build/**/*",
      "electron.js",
      "package.json",
      "server.js"
    ],
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "AppImage"
    },
    "extraResources": [
      {
        "from": "build",
        "to": "build"
      }
    ],
    "afterPack": "cp -r build/ dist/win-unpacked/build/"
  },
  "devDependencies": {
    "electron": "^34.2.0",
    "electron-builder": "^25.1.8"
  }
}

blank screen packing loss react js