CODEWITHSUNDEEP
javascriptnode.jselectron
SBakki
SBakki

Reputation: 5

Electron renderer not invoked

I'm learning electron, took electron-quick-start and made certain modifications to index.html, main.js and renderer.js following the tutorial at https://blog.logrocket.com/handling-interprocess-communications-in-electron-applications-like-a-pro/

index.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <title>Electron-Process-Comm</title>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
</head>
<body>
<h2 id="mainWindowTitle">I am the main window</h2>
<button id="sendSyncMsgBtn">Ping Main Process</button>
<p id="syncReply">Chilling for response</p>

<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>

main.js

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
const ipcMain = require('electron').ipcMain

console.log('Hello')

ipcMain.on('sync-message', (event, arg) => {
  console.log('IPCMain')
  event.returnValue = 'Message Recieved!'
})

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

renderer.js

const electron = require('electron')
const ipc = electron.ipcRenderer

const syncMsgBtn = document.querySelector('#sendSyncMsgBtn')

console.log('Hello renderer')

syncMsgBtn.addEventListener('click', () => {
  console.log('Renderer')
  const reply = ipc.sendSync('sync-message', 'Sent from main Window')
  const message = `Synchronous message reply: ${reply}`
  document.querySelector('#syncReply').innerHTML = message
})

const asyncMsgBtn = document.querySelector('#sendAsyncMsgBtn')

asyncMsgBtn.addEventListener('click', () => {
  ipc.send('async-message', 'Async message baby')

})

Now, though renderer.js is included in the index.html it is never invoked. The console log doesn't appear and the button click doesn;t respond. Can somebody tell me what i'm doing wrong ?

Upvotes: 0

Views: 1565

Answers (1)

Sebastian Richner
Sebastian Richner

Reputation: 760

The code looks fine and should be executed when running. You might be looking at the wrong console? The log statements should appear in the console of the renderer window. To open the Developer Tools, you can press Cmd + Opt + I (macOS) and Ctrl + Shift + I (Windows).

You can find more information about debugging Electron applications in their documentation and the Developer Tools in Chrome's documentation.

Upvotes: 1

Related Questions