I'm trying to develop an Electron application but I am dealing with this frustrating issue. It does not start but has no errors.
What I have tried so far:
Reinstalled Windows 10
Installed Windows Build Tools
Installed Python 2.7
Tried Electron example code
Additional Information
Node version v11.0.0
Electron version v3.0.6
Yarn version v1.12.1
What is the problem? I have tried installing via npm and yarn but that didn't work either.
Code
const {app, BrowserWindow} = require('electron')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadFile('index.html')
mainWindow.on('closed', function () {
process.stderr.write('Closed')
mainWindow = null
})
}
app.on('error', error => {
process.stderr.write(error)
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('ready', function () {
if (mainWindow === null) {
createWindow()
}
})
Output
No error output.
I do however see the process in Task Manager but no window.
mainWindow is not equal to null that's why it doesn't run createWindow() function. Change this:
app.on('ready', function () {
if (mainWindow === null) {
createWindow()
}
})
To:
app.on("ready", createWindow);
Just a wild guess. . . but I don't see where you are calling window.show()
mainWindow.on('ready-to-show', () => {
mainWindow.show()
})
That could go in the "app ready` function.
Related
On macOs, there's an app event open-file that's triggered when opening a file association with your app. Which allows you to open your file in an existing app window.
On windows when opening a new file it just creates a new app window instead of opening it in the existing one.
How do I get behaviour like in macOs on windows?
my code:
app.on('will-finish-launching', () => {
app.on('open-file', async (event, path) => {
event.preventDefault()
if (!win) {
win = await createWindow()
}
let openFilePath
if (process.platform === 'win32' && process.argv.length >= 2) {
openFilePath = process.argv[1]
}
if (process.platform === 'darwin') {
openFilePath = path
}
win.webContents.send('open-file', openFilePath)
})
})
app.on('ready', async () => {
if (!app.isPackaged && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
if (!win) {
win = await createWindow()
}
})
The docs mention that you need to call event.preventDefault() in order to handle it. It also fires before the ready event. Have you tried something like this?
app.on("open-file", (event, path) => {
event.preventDefault();
if (mainWindow === null) {
// create the main window here
// this is usually done on app.on("ready")
// but this event fires before "ready"
}
// if you already had a mainWindow or just finished
// creating it for the first time then handle the file
let file = null;
let openFilePath = null;
if (process.platform == "win32" && process.argv.length >= 2) {
openFilePath = process.argv[1];
}
if (process.platform == "darwin") {
openFilePath = path;
}
file = fs.readFileSync(openFilePath, "utf-8");
// now do stuff with the file such as sending it to the renderer
mainWindow.webContents.send("file-opened", file);
});
ok so I have been cracking my head over this problem for the last 2 days.
The default exit button of an electron.js app doesn't work.
Whenever I run my app and I click on the exit button, it doesn't show any error in the terminal and doesn't close the app either.
So far, these are the code snippets I have used:
// functions I used
app.on('window-all-closed') {
}
app.on('close') {
}
// the code inside the functions I used
_____________________________________
app.destroy()
_____________________________________
app.exit()
_____________________________________
app = null;
And I haven't used any HTML code since I am loading the URL of the page I want to make as an app like this:
function createWindow () {
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
width: 720,
height: 600,
icon:'assets/icons/win/icon.png',
})
win.loadURL('https://insert-link')
win.removeMenu()
win.on("closed", () => mainWindow.destroy());
}
const { app } = require('electron')
app.whenReady().then(createWindow)
app.once('window-all-closed', function() {
app.quit().then(app.destroy())
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
Please help me on this.
I have built an Electron app and I'm trying to build it out. It works perfectly when I run it in the dev environment with "npm start", but once I build it out, it fails. I've tried this with electron forge and electron packager. Essentially, my app lives in the task tray and scans a folder every second. If the folder is not empty, it shows the window. While the window is shown, the loop stops. Once the main.js file receives a command that the user actions were completed, it hides the window and goes back to the tray to resume scanning. Here is my main.js file:
const { app, BrowserWindow, Tray, Menu } = require('electron')
var ipcMain = require('electron').ipcMain;
const Store = require('electron-store');
const store = new Store();
const fs = require('fs');
shouldScan = true;
// global window declaration function
var win;
async function createWindow () {
win = new BrowserWindow({
width: 500,
height: 250,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
}
})
win.setMenuBarVisibility(false)
win.loadFile('index.html')
tray = new Tray('spongebob.ico')
const contextMenu = Menu.buildFromTemplate([
{
label: 'Show App', click: function () {
win.show()
}
},
{
label: 'Quit', click: function () {
app.isQuiting = true
app.quit()
}
}
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
win.on('minimize', function (event) {
event.preventDefault()
shouldScan = true
scanning()
win.hide()
})
win.on('show', function (event) {
event.preventDefault()
shouldScan = false
})
await sleep(1000)
win.minimize()
}
// start the application
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
//allow delays
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
//check the designated folder and stop the loop while showing the app window from the tray
async function scanning(){
while(shouldScan){
console.log('scanning')
if(store.get('default_path') != null){
files = fs.readdirSync(store.get('default_path'));
if(files.length > 0){
fs.rename(store.get('default_path') + "/" + files[0], store.get('default_path') + "/encounter", err => {
if (err) {
console.error(err)
return
}
})
console.log('should have shown')
win.show()
shouldScan = false
}
}
await sleep(1000)
}
}
//start the scanning funciton again when the signal is received
ipcMain.on('processInput', function(event, status) {
win.hide()
shouldScan = true
scanning()
});
The error I'm experiencing is that the window never goes to tray. Its even supposed to minimize 1 second after launching but it doesn't do that either. Actually, none of the scripts in the main file run other than creating the window. If the window is minimized and its target folder is not empty, it does not re-show the window. The dev tools within the window don't show any errors. I don't know how to have a command prompt running while the packaged .exe is running either, though. Does anyone have some advice?
for anyone in the future, it seems that electron does not like just local file paths. When I was creating the new Tray('spongebob.ico') that wasn't good. doing this seemed to fix the error:
new Tray(path.join(__dirname, 'asset','img', 'spongebob.png'));
obviously I had to create the correct path and file type.
I have test electron project with two windows.
Now windows are grouped in the taskbar (see the ACTUAL part on screenshot).
I want each window to be in a separate icon in the taskbar (see the EXPECTED part on screenshot).
Can I do this programmatically?
I tried this for Windows (Windows 10).
Not tried for MAC.
I want it to work on both Windows and Mac.
const {app, BrowserWindow} = require('electron')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({width: 800,height: 600})
mainWindow.loadFile('index.html')
var otherWindow = new BrowserWindow({width: 400,height: 300})
otherWindow.loadFile('otherWindow.html')
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})
This should help:
win.setAppDetails({
appId: "MySecondWindowID"
});
Windows groups window icons in the taskbar if they have same System.AppUserModel.ID, you can use win.setAppDetails(options) from Electron API to set different appId's for each window.
I'm attempting to implement windows auto update functionality in an electron app (which may lead to my early death) and I'm getting this error.
This is the URL I'm passing for testing purposes
EDIT: my electron app is using the two package.json structure and this code is in my app>main.js file
const feedURL = 'C:\\Users\\p00009970\\Desktop\\update_test';
autoUpdater.setFeedURL(feedURL);
autoUpdater.checkForUpdates();
EDIT2: Thanks to #JuanMa, I was able to get it working. Here is the code.
// auto update functionality
const {autoUpdater} = require('electron')
// local file system example: const feedURL = 'C:\\Users\\john\\Desktop\\updates_folder';
// network file system example: const feedURL = '\\\\serverName\\updates_folder';
const feedURL = '\\\\serverName\\updates_folder';
app.on('ready', () => {
autoUpdater.setFeedURL(feedURL);
// auto update event listeners, these are fired as a result of autoUpdater.checkForUpdates();
autoUpdater.addListener("update-available", function(event) {
});
autoUpdater.addListener("update-downloaded", function(event, releaseNotes, releaseName, releaseDate, updateURL) {
//TODO: finess this a tad, as is after a few seconds of launching the app it will close without warning
// and reopen with the update which could confuse the user and possibly cause loss of work
autoUpdater.quitAndInstall();
});
autoUpdater.addListener("error", function(error) {
});
autoUpdater.addListener("checking-for-update", function(event) {
});
autoUpdater.addListener("update-not-available", function(event) {
});
// tell squirrel to check for updates
autoUpdater.checkForUpdates();
})
Are you including the autoUpdater module correctly?
const {autoUpdater} = require('electron')
If so try to execute the code after the app 'ready' event.
app.on('ready', () => {
const feedURL = 'C:\\Users\\p00009970\\Desktop\\update_test';
autoUpdater.setFeedURL(feedURL);
autoUpdater.checkForUpdates();
})