If anyone is curious, here is what I did.
Let's say you have a login form and after logging in, you want to display the main window where everything will take place.
Set up your index.js
const electron = require('electron');
const url = require('url');
const path = require('path');
const { app, BrowserWindow } = electron;
let loginWindow;
var mainIndex = '../../index.html'; //the login window
var directoryHtml = '../html/'; //directory where my HTML file is located; the main window is here except for the login window
var iconPath = '../../images/logo.png'; //replace with your own logo
let { ipcMain } = electron;
var newWindow = null;
app.on('ready', function () {
loginWindow = new BrowserWindow({//1. create new Window
height: 600, width: 450,
minHeight: 600, minWidth: 450, //set the minimum height and width
icon: __dirname + iconPath,
frame: false, //I have my own style of title bar, so I don't want to show the default
backgroundColor: '#68b7ad', //in case the white screen shows up, set the background color
show: false //to prevent the white screen when loading the window, let's not show it initially
});
loginWindow.loadURL(url.format({ //2. Load HTML into Window
pathname: path.join(__dirname, mainIndex),
protocol: 'file',
slashes: true
}));
loginWindow.once('ready-to-show', () => {
loginWindow.show() //to prevent the white screen when loading the window, show it when it's ready
})
});
//dynamically resize window when this function is called
ipcMain.on('resize', function (e, x, y) {
loginWindow.setSize(x, y);
});
/** start of showing new window and close the login window **/
ipcMain.on('newWindow', function (e, fileName) {
if(newWindow){
newWindow.focus(); //focus on new window
return;
}
newWindow = new BrowserWindow({//1. create new Window
height: 600, width: 800,
minHeight: 600, minWidth: 800,
icon: __dirname + iconPath,
frame: false,
backgroundColor: '#68b7ad',
show: false
});
newWindow.loadURL(url.format({ //2. Load HTML into new Window
pathname: path.join(__dirname, directoryHtml + fileName),
protocol: 'file',
slashes: true
}));
newWindow.once('ready-to-show', () => { //when the new window is ready, show it
newWindow.show()
})
newWindow.on('closed', function() { //set new window to null when done
newWindow = null
})
loginWindow.close(); //close the login window(the first window)
});
/** end of showing new window and closing the old one **/
app.on('closed', function () {
loginWindow = null;
});
// Quit when all windows are closed.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (loginWindow === null) {
createWindow()
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login Window</title>
</head>
<body>
<h1>Login</h1>
<button id="btn-login" onclick="loginNow()"></button>
<script>
function loginNow(){
const { ipcRenderer } = require('electron');
ipcRenderer.send('newWindow','main.html'); //call the function in index.js to show the new window, change 'main.html' to match your file
}
</script>
</body>
</html>
This might not be the best approach, and there could be drawbacks, but I hope it can be helpful to someone.