Change Windows Size in Electron - electron

Question

i'm very new to electron, but loving it. However, i am stuck on one thing, so after some guidance if possible.
i have a small test app, that i will be using for users to login in to a page.
in my main.js file i set the mainWindow properties as below:
function createWindow() {
mainWindow = new BrowserWindow({frame:false,
width: 1024,
height: 565,
minWidth: 1024,
minHeight: 565,
frame: false,
resizable: false,
show: false,
center: true,
backgroundColor: '#312450',
icon: path.join(__dirname, 'assets/icons/png/64x64.png')
})
mainWindow.loadURL(`file://${__dirname}/login.html`)
mainWindow.once('ready-to-show', () => {
mainWindow.show()
})
//mainWindow.webContents.openDevTools({detach: true})
mainWindow.on('closed', function() {
mainWindow = null
})
}
and then launch this in the app.on event.
This is all good so far.
I also add an eventlistener to a button in the login.html page as follows:
btnSignIn.addEventListener('click', function(){
const email = txtEmail.value;
const pass = txtPassword.value;
firebase.auth().signInWithEmailAndPassword(email, pass).then(function(){
document.location.href = 'loggedin.html';
}).catch(function(error){
if(error != null){
alert(error.message);
return;
}
})
},false);
This is all working perfectly well. The only issue i have is that i'd like the second page (loggedin.html) to be a different size.
I presume i have to change the mainWindow options specified previously, but i am unable to acheive it.
any pointers are greatly appreciated.
Regards
J

Answer 1

In your renderer process (js script loaded from login.html) you should be able to load Electron and Node modules.
const {ipcRenderer} = require('electron');
// Right after the line where you changed the document.location
ipcRenderer.send('resize-me-please')
In main.js
const {ipcMain} = require('electron')
ipcMain.on('resize-me-please', (event, arg) => {
mainWindow.setSize(width,height)
})

Answer 2

To add to Leonardo's answer, if your application may have multiple windows, you can resolve the sender window by pulling that from the IPC event, like so:
main.js
const {ipcMain} = require('electron')
ipcMain.on('resize-window', (event, width, height) => {
let browserWindow = BrowserWindow.fromWebContents(event.sender)
browserWindow.setSize(width,height)
})
Renderer
const {ipcRenderer} = require('electron');
// ...
ipcRenderer.send('resize-window', 1280, 720)