Electron package 应用程序在白屏上打开，没有错误

Question

I recently just packaged my electron app but when I try to run it, I just see a blank white screen with no errors or anything.

Something I noticed is that when I toggle developer tools and go into sources > page, this is what shows:

source > page for packaged electron app

but when I run the app as a developer, I see:

source > page for npm run dev

I don't know if this has anything to do with why my app isn't running properly.

Also, I'm writing my app with ReactJS embedded from this tutorial: https://blog.codemagic.io/building-electron-desktop-apps-with-react/#:~:text=What%20is%20Electron%3F,build%20desktop%20applications%20with%20Electron .

Here's my electron.js:

const path = require('path');

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
    
function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
    icon: path.join(__dirname, '/icon.png')
  });

  // and load the index.html of the app.
  // win.loadFile("index.html");
  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '/index.html')}`
  );
  // Open the DevTools.
  if (isDev) {
    win.webContents.openDevTools({ mode: 'detach' });
  }
}

// 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);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bars to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

package.json:

{
  "name": "NAME",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-brands-svg-icons": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@material-ui/core": "^4.12.4",
    "@mui/material": "^5.9.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.0",
    "cross-env": "^7.0.3",
    "electron": "^19.0.10",
    "electron-forge": "^5.2.4",
    "electron-is-dev": "^2.0.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.4.0",
    "react-dom": "^18.2.0",
    "react-dropdown": "^1.10.0",
    "react-modal": "^3.15.1",
    "react-scripts": "5.0.1",
    "reactjs-popup": "^2.0.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"",
    "electron": "wait-on tcp:3000 && electron .",
    "package": "react-scripts build && electron-forge package",
    "make-mac": "react-scripts build && electron-forge make --platform darwin",
    "make-linux": "react-scripts build && electron-forge make --platform linux",
    "make": "react-scripts build && electron-forge make",
    "pack": "build --dir",
    "dist": "build"
  },
  "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"
    ]
  },
  "devDependencies": {
    "concurrently": "^7.3.0",
    "electron": "^19.0.10",
    "electron-builder": "^23.3.3",
    "electron-packager": "^15.5.1",
    "wait-on": "^6.0.1"
  },
  "main": "public/electron.js",
  "homepage": "./",
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "stock_trading_app"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin",
            "linux",
            "win32"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

File structure:

enter image description here

Let me know if anything else is needed.

Thanks,

Answer 1

Try:

isDev ? win.loadURL('http://localhost:3000') : win.loadFile(path.join(__dirname, '/index.html'));