Election JS Close one window and open new window - node.js

Question

I am new to electron js. I have a scenario to show a loading/splash screen and then show the login screen.
here is my main.js
// necessary modules for electron application
// importing electron
const { create } = require("domain");
const electron = require("electron");
// initilizing app
const app = electron.app;
// adding window to view
const BrowserWindow = electron.BrowserWindow;
// path module to build file path
const path = require("path")
// to make sure we are using a proper url
const url = require("url")
let {ipcMain} = electron
let toQuit = true; // important to quit
let category = 'main_window' // default window
let win;
app.on("ready", ()=>{
"use strict";
createWindow();
});
app.on("closed", () => {
"use strict";
win = null;
})
app.on('window-all-closed',()=>{
"use strict";
if(process.platform !== 'darwin'){
app.quit();
}
})
app.on("activate", () => {
if (win === null) {
createWindow();
}
});
function createWindow() {
"use strict";
var height;
var width;
var address;
var frame;
var removeMenu;
var title, backgroundColor;
switch (category) {
case "main_window":
height = 200; //Initialize size of BrowserWindow
width = 500; //Initialize size of BrowserWindow
frame = false;
removeMenu = true;
backgroundColor = "#ccc";
address = "Views/SplashScreen/index.html"; //Initialize the address or the file location of your HTML
break;
case "login":
height = 600; //Initialize size of BrowserWindow
width = 400; //Initialize size of BrowserWindow
frame = true;
removeMenu = true;
title = "Login"
address = "Views/Login/index.html"; //Initialize the address or the file location of your HTML
break;
default:
break;
}
win = new BrowserWindow({
height: height, //height and width of BrowserWindow
width: width, //height and width of BrowserWindow
minHeight: height, //minimum height and width of BrowserWindow, you can remove this if you want
minWidth: width, //minimum height and width of BrowserWindow, you can remove this if you want
frame: frame,
backgroundColor: backgroundColor,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
});
win.loadURL(
url.format({
pathname: path.join(__dirname, address),
protocol: "file",
slashes: true,
})
);
// enabling web dev tools
win.webContents.openDevTools({
mode: "detach",
});
// remove default top menu
win.removeMenu(removeMenu);
win.on("ready-to-show", () => {
win.show();
win.focus();
});
win.on("closed", (e) => {
e.preventDefault(); //We have to prevent the closed event from doing it.
if (toQuit) {
console.log("I am called")
//if the value of toQuit is true, then we want to quit the entire application
win = null;
app.exit(); //quit or exit the entire application
} else {
console.log("hide called");
win.hide(); //just hide the BrowserWindow and don't quit the entire application
toQuit = true; //reset the value of toQuit to true
}
});
}
//call this function from your any Javascript
ipcMain.on('createBrowserWindow', function (e, cat) {
"use strict";
category = cat; //get the category of window on which we want to show
toQuit = false; //set the value to false, meaning we don't want to close the entire application but just hide the current BrowserWindow
createWindow(); //call this function over and over again
});
and the splashscreen.js
const ipcRender = require('electron').ipcRenderer;
let count = 1;
let porgressBar = document.getElementById("progressbar");
let i = 70;
let interval = setInterval(()=>{
if(i >= 400){
clearInterval(interval);
ipcRender.send("createBrowserWindow", "login");
}
porgressBar.style.width = i + "px";
ran = Math.floor(Math.random() * (75 - 0 + 1)) + 0;
console.log(ran);
i = i+ran
},500);
Till now what I achieved is that, I am able to open the new window but the previous window is unable to close. I have tried several methods from stack overflow solutions but none of them worked.
package.json
{
"name": "electron-sms",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^17.1.2"
},
"dependencies": {
"#electron/remote": "^2.0.8"
}
}
Any workaround, please.
Thanks

Answer 1

I have found a solution to my problem.
In Electron Version >= 16
Install the #electron-remote using npm npm i #electron/remote. as remote has been removed in electron Version 14 and later.
secondly, Add the initialize electron-remote using this require("#electron/remote/main").initialize();
Example
const electron = require("electron");
// initilizing app
const app = electron.app;
// adding window to view
const BrowserWindow = electron.BrowserWindow;
// path module to build file path
const path = require("path")
// to make sure we are using a proper url
const url = require("url")
**require("#electron/remote/main").initialize();**
let {ipcMain} = electron
let toQuit = true; // important to quit
let category = 'main_window' // default window
enable webcontents in main.js
require("#electron/remote/main").enable(win.webContents);
in your renderer,js call it as
require("#electron/remote").getCurrentWindow().close();
You are done!
Happy Coding :)