Electron-builder: Building to a blank screen

Created on 23 Feb 2017  路  9Comments  路  Source: electron-userland/electron-builder

  • Version: 13.11.1

  • Target: Linux (AppImage)


I am trying to add electron builder to the vuepack project I have the following scripts:

"scripts": {
    "src:build": "webpack --config build/webpack.prod.js",
    "src:dev": "node build/server.js",
    "app:pack": "cd app && USE_SYSTEM_XORRISO=true build --dir",
    "app:build": "cd app && USE_SYSTEM_XORRISO=true build",
    "app:dev": "cross-env NODE_ENV=development electron app/"
  },

Now if I run npm run src:dev and npm run app:dev everything runs fine, however if I run npm run src:build and npm run app:build and run the AppImage it starts but just renders with a white screen.

I have had to create a second package.json in the app/ directory based of this issue which seems to at least let the app build.

I also read through this issue on electron-packager but I couldn't make a lot of sense of it.

Is there anything I can do to better debug this issue? Thanks in advance!

reply-needed

Most helpful comment

try this :

function createWindow () {
  mainWindow = new BrowserWindow({
    //...
  })
// use this to open dev tools manualy to debug
 mainWindow.webContents.openDevTools()
//...
}

All 9 comments

  1. Please use electron-builder 14.1.1
  2. Please run AppImage in the terminal (execute file) to see errors.

I have had to create a second package.json in the app/ directory based of this issue which seems to at least let the app build.

I don't it is related. If you use 1 package.json structure (recommended), you can try to set https://github.com/electron-userland/electron-builder/wiki/Options#MetadataDirectories-app to . to be sure that app dir equals to project dir.

Hey @develar,

Okay updated to 14.1.1 still getting a white screen when executing from the terminal only getting this as output:

file:///tmp/.mount_dk1RD2/usr/bin/resources/app.asar/dist/index.html

And that is only because I added this line to my electron config:

console.log(`file://${__dirname}/dist/index.html`);

Let me know if there is anything else I can do to improve debugging.

Cheers.

@CrashyBang Well... You can send me your project to investigate.

Hey @develar okay I tried on last thing and added the following to me package.json from the onshape-desktop-shell:

"files": [
      "app",
      "node_modules"
],

But to no avail now it will not compile at all, I have set up a demo repo here:
https://github.com/CrashyBang/electron-builder-demo

Let me know if you uncover anything, I am currently working on building my own process up and not using vuepack that more closely follows the electron-builder conventions, so please don't spend too much time debugging it.

Cheers.

You will need to run npm run src:build and then npm run app:build :)

Hey @develar I have written my own build process now and electron-builder seems to be working so no need to address this one.

try this :

function createWindow () {
  mainWindow = new BrowserWindow({
    //...
  })
// use this to open dev tools manualy to debug
 mainWindow.webContents.openDevTools()
//...
}

same issue here, but only works when mainWindow.webContents.openDevTools() is called, at the moment that I comment mainWindow.webContents.openDevTools() the app start showing in blank again, and DevTools is not showing any errors :/

Was this page helpful?
0 / 5 - 0 ratings