I have a online game build with nodejs and I want to create local OS executables with electron. It took a lot of struggle to make it work with the CLI electron . since there's no default static server, default CSP blocks everything and jquery also fails. I've managed to fix all that but the EXE still does not work.
So everything works 100% when using the cli, but fails silently to a white screen (no HTML loaded) when using the executable provided by electron-packager. All console.log calls are working and the output is as expected. Devtools shows no errors as well. I've tested with the DEBUG variable and no error message is displayed anywhere. I'm guessing the EXE is not pointing to the correct HTML file, but I have no idea why it can't find the path.
My file structure is like this:
โโโ client
โ โโโ index.js
โ โโโ debug.html
โ โโโ package.json
โโโ downloads
โ โโโ windows
โโโ node_modules
โโโ Gruntfile.js
This is my minimal index.js file, it produces the same error:
var url = require('url');
var path = require('path');
var electron = require('electron');
var mainWindow;
var createWindow = function () {
mainWindow = new electron.BrowserWindow({
width: 1000,
height: 670,
webPreferences: {
webSecurity: false
}
});
mainWindow.loadURL(url.format({
pathname: 'debug.html',
protocol: 'file',
slashes: true
}));
mainWindow.on('closed', function () {
mainWindow = null;
});
};
var serveStatic = function () {
electron.protocol.interceptFileProtocol('file', (request, callback) => {
const url = request.url.substr(8); /* 'file://' */
callback({ path: path.join(__dirname, url) });
}, (err) => {
if (err) console.error('Failed to register protocol');
})
};
electron.app.on('ready', function () {
createWindow();
serveStatic();
});
electron.app.on('window-all-closed', function () {
if (process.platform !== 'darwin') { electron.app.quit(); }
})
electron.app.on('activate', function () {
if (mainWindow === null) { createWindow(); }
});
This is my package.json:
{
"name": "FODA",
"author": "rafaelcastrocouto",
"description": "Fight Over Dat Ancient - Card Game",
"homepage": "https://foda-app.herokuapp.com/",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "3.0.10"
},
"license": "MIT"
}
And I'm building the electron packages with grunt-electron:
module.exports = function(grunt) {
grunt.initConfig({
'pkg': grunt.file.readJSON('package.json'),
'electron': {
winBuild: {
options: {
asar: true,
overwrite: true,
dir: 'client',
out: 'downloads/windows',
electronVersion: '3.0.10',
platform: 'win32',
arch: 'ia32'
}
}
});
grunt.loadNpmTasks('grunt-electron');
grunt.registerTask('default', ['electron']);
};
I've searched stackoverflow and the github issues but I'm clueless about how to solve this.
Please help! Thanks.
๐ Thanks for opening your first issue here! If you have a question about using Electron Packager, read the support docs. If you're reporting a ๐ bug, please make sure you include steps to reproduce it. Development and issue triage is community-driven, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
The best advice I have is to use BrowserWindow.loadFile instead of loadURL, but make sure the path is an absolute path, for example path.join(__dirname, 'debug.html'). This is somewhat covered in the Electron Packager FAQ.
If you need more support, please ask in one of the community forums, as this is a general Electron packaging question and not specific to Electron Packager.
Thanks for the advice. It all worked after changing to loadFile and a few changes in some paths.
Cheers!