CODEWITHSUNDEEP
javascriptelectronelectron-builderelectron-packager
Filippo Randon
Filippo Randon

Reputation: 145

Electron shows white screen when built

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

Upvotes: 13

Views: 33339

Answers (8)

Niklas Rotter
Niklas Rotter

Reputation: 47

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.

Upvotes: 0

Tom Oeser
Tom Oeser

Reputation: 680

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!

Upvotes: 0

LironShirazi
LironShirazi

Reputation: 441

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

Upvotes: 1

Gnopor
Gnopor

Reputation: 829

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

Upvotes: -3

Julian Z.
Julian Z.

Reputation: 487

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

Upvotes: 15

Abhishek Kumar
Abhishek Kumar

Reputation: 900

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.

Upvotes: 1

Balaji
Balaji

Reputation: 10887

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

Upvotes: 7

schacker22
schacker22

Reputation: 448

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

Upvotes: 4

Related Questions