Add app version to UI

src/main/index.ts

@@ -57,6 +57,8 @@ app.whenReady().then(() => {
   // IPC test
   ipcMain.on('ping', () => console.log('pong'))
 
+  ipcMain.handle('get-version', () => app.getVersion())
+
   createWindow()
 
   app.on('activate', function () {

src/preload/index.ts

@@ -1,4 +1,4 @@
-import { contextBridge } from 'electron'
+import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
 
 // Custom APIs for renderer
@@ -9,7 +9,10 @@ const api = {}
 // just add to the DOM global.
 if (process.contextIsolated) {
   try {
-    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('electron', {
+      ...electronAPI,
+      getVersion: () => ipcRenderer.invoke('get-version')
+    })
     contextBridge.exposeInMainWorld('api', api)
   } catch (error) {
     console.error(error)

src/renderer/src/components/Versions.tsx

@@ -2,9 +2,13 @@ import { useState } from 'react'
 
 function Versions(): React.JSX.Element {
   const [versions] = useState(window.electron.process.versions)
+  const [appVersion, setAppVersion] = useState()
+
+  window.electron.getVersion().then(version => setAppVersion(version))
 
   return (
     <ul className="versions">
+      <li className="app-version">App v{appVersion}</li>
       <li className="electron-version">Electron v{versions.electron}</li>
       <li className="chrome-version">Chromium v{versions.chrome}</li>
       <li className="node-version">Node v{versions.node}</li>