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 = " ";
    })
}

Rudy

Answer 1

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

Carroty

Works! You have to include const url = require('url'); as well – Finnigan

Answer 2

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')
 

Beetlebrowed

Answer 3

In my case the build showed a white site as well. For those who are using React Router in their project this solution might be helpful.

My startUrl variable looks like this:

const startUrl = process.env.ELECTRON_START_URL || url.format(
 {
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
    slashes: true
 });

For me the solution was to move from BrowserRouter to HashRouter in your App.js as mentioned in this thread

render() 
{
  return (
     <Provider store = { store }>
        <HashRouter>
           <Switch>
              <Route exact path='/' component={Home} />
              <Route exact path='/Login' component={Login} />
           </Switch>
        </HashRouter>
     </Provider>
  );
}

Rabiah

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.

Pericline

Answer 5

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
})

Asha

Answer 6

check how you set the title for the main window.

I tried to use 'process.env.npm_package_productName'

mainWindow.setTitle(process.env.npm_package_productName);

works fine locally, but fails when packed!

Bisque

Answer 7

I had the same problem. I think it is a miss understanding, that the electron app will be bundled into a single .exe file.

I used the electron-react-boilerplate template from GitHub. If you are going to package your application, all it does is generating a directory with your bundled code (the electron-react-boilerplate template does that for you) and a bunch of other files with the generated .exe file in release/build/win-unpacked in the release/build folder.

What you have to do to get it to work:

Get the absolute path code wise of your index.html file in release/app/dist/renderer/index.html (CODEWISE) (Get this path in your main.ts/js)

Then use this file url in your mainWindow.loadUrl() function.

Then you will realize, that the whole release folder is actually your app to distribute to your clients.

Burr

Answer 8

Note: For launch the app with electron, follow these steps:(forgive my English I am native french speaker)

1. First of all forget about the electron folder, do not touch it.

2. In your react/ion directory which is your root directory for the app,add the following in your package.json file: "homepage": "./"

3. Now from your react/ionic directory which is your root directory for the app, navigate to the "public" directory and update your index.html file replacing <base href="/" /> with: <base href="./" />

4. Now run the following command and that is it...

   • ionic build && npx cap copy
   • npx cap open electron

Review

sorry this is just for ionic – Review