Electron shows white screen when built

Question

I'm learning electron and I've made an electron app that read and create files. When I start the application with npm start or electron . it works as intended:

But when I use npm run build or build -w commands, the application built just shows a white screen

Is there something wrong with my code or something wrong with the commands I'm using?

This is my package.json

 {
  "name": "prova",
  "version": "1.1.3",
  "description": "Prova electron",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "dist" : "build"
  },
  "author": "Randy",
  "license": "ISC",
  "devDependencies": {
    "electron": "^2.0.2",
    "electron-packager": "^12.1.0"
  },
  "build": {
    "appId": "prova",
    "win":{
      "target" : "nsis",
      "icon" : "icon.ico"
    }
  }
}

This is my main js page:

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

function boot(){
    win = new BrowserWindow()
    win.loadURL(url.format({
        pathname: 'index.html',
        slashes: true
    }))
}

app.on('ready', boot);

and there is my functions js page:

var app = require("electron").remote;
var dialog = app.dialog;
var fs = require("fs");
var i = 0;
var stringaLetta = "";

document.getElementById("bottone").onclick = function(){
    dialog.showSaveDialog((fileName) => {
        if(fileName === undefined){
            alert("errore")
            return
        }

        var content = document.getElementById("testo").value;

        fs.writeFile(fileName, content, (err) => {
            if (err == undefined) {
                dialog.showMessageBox({
                    message: "the file has been saved",
                    buttons: ["OK"]
                });
            }
            else dialog.showMessageBox({
                message: err
            })
        })
    })
}
document.getElementById("bottone2").onclick = function(){
    dialog.showOpenDialog((fileNames) => {
        if(fileNames === undefined){
            dialog.showMessageBox({
                message: "errore durante l'apertura",
                buttons: ["OK"]
            })
            return
        } else{
            readFile(fileNames[0]);
        }
    }) 
}

function readFile(fP){
    fs.readFile(fP, 'utf-8', (err, data) => {
        if(err){
            alert(err)
            return
        }
        var textArea = document.getElementById("rtesto")
        textArea.innerHTML = "";
        i = 0;
        do{
            if(data.charAt(i) == "\n"){
                stringaLetta += "<br\>";
            }else{
                stringaLetta += data.charAt(i);
            }
            i++;
        }while(data.charAt(i) != "")
        textArea.innerHTML = stringaLetta;
        stringaLetta = " ";
    })
}

Answer 1

i recently face white screen issue in my case little bit difference

i used vue framework with router(router must be hash)

1.for vue.js with vue router in electron

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

2.for react.js with react router in electron

hashrouter

instead of

BrowserRouter

without any framework

check entry point url placed correctly

 win.loadURL('app://./index.html')
 

Answer 2

I had a similar problem when I tried to build for windows.

While the win.loadURL(...) seems to work like that in development, maybe try to change it to this when building:

win.loadURL(url.format({
  pathname: path.join(__dirname, 'index.html'),
  protocol: 'file:',
  slashes: true
}));

This makes sure it definitly gets the right path to your index.html file.

For the path.join(...) and url.format(...) to work you need to require them first:

const path = require('path');
const url = require('url');

Answer 3

Maybe you used a template of code that uses 2 cases, one for development mode and one for production. At least that was my problem, so for dev mode I used to use a URL to localhost, and in production, it points to the build dir: like so:

const prodPath = format({
  pathname: resolve('renderer/out/start/index.html'),
  protocol: 'file:',
  slashes: true
})

Answer 4

I don't know about the build process especially, I had also the same problem on development, that electron shows nothing but a blank screen (probably because I clicked a link that was not available earlier).

After rebuilding and what else nothing was shown on the screen.

The final hack that worked for me was clearning my Appdata from system.

In my case I had linux I cleared the app data by going to ~/.config/myApp

Windows: C:\Users\<user>\AppData\Roaming\<yourAppName>\Cache

OSX: /Users/<user>/Library/Application Support/<yourAppName>/Cache

Hope it will help someone in need.