Electron app not loading index.html after building with electron builder, even giving no error

Viewed 2774

I am a beginner to electron and created a simple app with it. it is running correctly using cmd. However after building it with electron-builder and opening the created app it is showing nothing just white screen with electron frame. I think that maybe this is an error in package.json, but not sure where? I have 3 html files, some images in my folder which i want to package. I have seen some examples but don't know what to include inside "files":[ ] in package.json . however i have tried to include all my files which i want to package but still the problem persists this is my package.json-

{
  "name": "duplichecker",
  "productName": "Multimedia Manager 1.2",
  "version": "1.2.0",
  "description": "delete duplicate and sort images and videos images at a go!",
  "main": "electron-main.js",
  "keywords": [
    "duplichecker",
    "duplicate",
    "images",
    "multimedia manager 1.2.0",
    "multimedia manager 1.2",
    "multimedia manager",
    "sort"
  ],
  "author": "hemant kumar",
  "license": "ISC", 
  "scripts": {
    "start": "electron .",
    "buildi": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "devDependencies": {
    "electron": "^9.2.1",
    "electron-builder": "^22.8.0",
    "webpack": "^4.44.1"
  },
  "dependencies": {},
  "build": {

    "directories":{
        "buildResources":"build"
    },
    "files":[
      "build",
      "node_modules",
      "nulshock",
      "package.json",
      "index.html",
      "package-lock.json",
      "electron-main.js"
    ],
  
    "appId": "duplichecker",
      "win": {
      "target": [
        "nsis"
      ],
      "icon": "build/icon.ico"
    },
    
    "nsis": {
      "installerIcon": "build/icon.ico",
      "uninstallerIcon": "build/icon.ico",
      "uninstallDisplayName": "Multimedia Manager",
      "license": "license.txt",
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  }
}

maybe i have to change the win.loadFile() in main.js but to what?

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 600,
    height: 400,
    icon:'build/icon.ico',
    webPreferences: {
      enableRemoteModule: true,
      nodeIntegration: true,
      webSecurity: false
    }
  });
   
  //maximizes the window;
  win.maximize();

  // and load the index.html of the app.

  win.loadFile("index.html");

2 Answers

I sorted out the problem. When I copied the build folder(with only icon.ico in it) to "win-unpacked"- the folder electron-builder created inside dist, the unpacked app(not packed in installer) worked. Somehow, I dont know why, electron-builder is not packing the build/icon.ico and causing error in my main.js for loading browser window icon.

But how i made the installer to work

I just changed its path to uninstallerIcon.ico (if not working try uninstallIcon.ico ) in main.js(browser window parameter) which will be automatically created by my package.json and embedded into the installer and included in the same folder as app after installing. It makes the app work after installing the setup.

I had similar issue with electron app on windows 10 as shown here https://github.com/ColumbusCollaboratory/electron-quick-start. The above solution did not help. I had to go to portable R library and install the packages needed in order to get the blank screen go away. read my comment below for more details

Related