CODEWITHSUNDEEP
electron
mcExchange
mcExchange

Reputation: 6497

Electron - Get app version as variable in footer

There is an app version number in package.json. I want that in my footer section which is part of my index.html.

There is a template for a single page electron application (SPA) which I'm trying to test this. But no luck so far.

Here my current code:

main.js:

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

ipcMain.handle('get-version', () => {
    console.log('get-version');
    const version = app.getVersion();
    console.log('Version:', version);
    return version;
})

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'src/preload.js')
        }
    });

    win.loadFile('src/index.html');
}

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

    ipcMain.on('button-click', (event, arg) => {
        console.log(arg); // Handle IPC messages
    });
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SPA with IPC</title>
    <script defer src="renderer.js"></script>
    <link rel="stylesheet" href="styles/master.css">
</head>
<body>
    <header id="header">
        <h1>My SPA</h1>
    </header>
    [...]
    <footer id="footer">
        <p>Footer content here</p>
    </footer>
</body>
</html>

renderer.js:

[...]    
// Set version string (not working)
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded')

    
    ipcRenderer.invoke('get-version').then(version => {
        document.querySelector('#footer p').textContent = `Version ${version}`
    })
})

I'm sorry, this is probably not hard, but electron is still pretty confusing me.

Upvotes: 0

Views: 31

Answers (1)

mcExchange
mcExchange

Reputation: 6497

Fixed it. The trick was to add the function reference to preload.js and chose other webPreferences:

nodeIntegration: false,
contextIsolation: true,

Here a more explicit solution:

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
    
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })
    
  win.loadFile('src/index.html')
}
    
app.whenReady().then(() => {
  createWindow()
    
  ipcMain.handle('get-version', () => {
    const version = app.getVersion()
      console.log('Version:', version)
      return version
    })
    
  ipcMain.on('button-click', (event, arg) => {
      console.log(arg)
  })
})

renderer.js:

//...
    
document.addEventListener('DOMContentLoaded', () => {
  window.electronAPI.getVersion()
    .then(version => {
      document.querySelector('#footer p').textContent = `Version ${version}`
    })
        
  loadPage('page1.html')
})

preload.js:

const { contextBridge, ipcRenderer } = require('electron')
    
contextBridge.exposeInMainWorld('electronAPI', {
  getVersion: () => ipcRenderer.invoke('get-version'),
  send: (channel, data) => ipcRenderer.send(channel, data)
})

The full solution can also be found on this open source repo.

Upvotes: 0

Related Questions