document isn't define (Using electron.js)

Question

Hope you all are doing good. Could you please elaborate why its happening. I have a button of id 'signin'. I want when I press the button I want to get data from the db, but I got an error "document isn't define". I am new to js. Eager to hear from you.

var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'abc',
  password : abc,
  database : 'abc'
});

connection.connect();



document.getElementById('signin').addEventListener('click', async () => {
Console.log("Hello! ")

})


function newApp() {
  const win = new BrowserWindow({ width: 700, height: 400 })

  win.loadURL(
    url.format({
      pathname: "index.html",
      slashes: true
    })
  );
}

Answer 1

Electron contains two different JavaScript environments. The main process and the renderer process.

The Main process runs with Node.js and provides access to APIs like require which gives access to a mysql module.

The Renderer process runs in the Chromium browser provides access to typical Browser APIs like the document object.

You can't use MySQL libraries in the renderer, and you can't use the browser's DOM in the main process.

You are trying to use the browser's DOM in the main process.

See the quick start guide which says:

The communication between processes is possible via Inter-Process Communication (IPC) modules: ipcMain and ipcRenderer.

If you want to get data from MySQL into the DOM, you need to use the IPC processes to pass the data from a script running in the Main process (where you are now) and into the Renderer process (where you have access to the document object).