How to redirect to a different Window in ElectronJS without a new Window

Question

I have a question on how to redirect to a different page with ElectronJs.

The documentation only covered how to open a new window. But in my case, I do not wish to open a new window. This is what I've been trying so far but it's not responding:

login.js

const {BrowserWindow} = require('electron')
const loginBtn = document.getElementById('loginBtn')

loginBtn.addEventListener('click', () => {
    let win = BrowserWindow
    win.on('close', () => { win = null })
    win.loadURL('file:///Users/cadellteng/Desktop/Timetrack/main_page.html')
    win.show()
})

The above codes are modified from existing open a new page in a new browser window codes. I tried the following without much success too

loginBtn.addEventListener('click', () => {
        window.location.href = 'main_page.html'
    })

Hoping for someone to assist. I wasn't able to find helpful assistance on StackOverflow so I'm opening this thread, but if someone did indeed has asked this before, I'll be happy to delete this thread too. Just let me know. Thanks.

If you need to see my HTML, here it is: login.html





    
    
    Timetrack
    
    
    
    
    
    
    



    
        Timetrack _{by Pyxel Inc}
    
    
        
            Login Form
            
            
            
            
Forgot your email or password?

user_11793550 · Answer

You can use an electron.js file to setup the electron window and import in this file an app.js server with express. In this way you can use express for redirect to other page as a web application.
This is the electron.js file

const server = require('./app');
var path= require('path')
const { app, BrowserWindow } = require('electron')

var mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    icon: path.join(__dirname, 'public/img/icona-app.png'),
    autoHideMenuBar: true,
    useContentSize: true,
    resizable: true,
    webPreferences: {
      devTools: false
    }
  });
  mainWindow.loadURL('http://localhost:8080/');

}

app.on('ready', createWindow)

And this is the app.js file

var express = require('express')
var app = express()

app.listen(8080, function () {
    console.log('Your application is listening on port 8080!')
})

app.get('/', function(req, res){
    res.sendFile(__dirname + "/public/login.html");
})
module.exports=app

And then you must edit your package.json file
You must edit this two attributes:

"main": "electron.js",
"scripts": {
   "start": "npm install && electron electron.js --no-sandbox"
},

To start the application write npm start

How to redirect to a different Window in ElectronJS without a new Window

1 Answers