Add restart button

Author: RyanZim

index.html

@@ -13,6 +13,10 @@ <h1>Hello World!</h1>
     Chromium <span id="chrome-version"></span>,
     and Electron <span id="electron-version"></span>.
 
+    <div>
+      <button id="btn" type="button">Restart</button>
+    </div>
+
     <!-- You can also require other files to run in this process -->
     <script src="./renderer.js"></script>
   </body>

main.js

@@ -1,7 +1,12 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron')
 const path = require('node:path')
 
+function handleRestart () {
+  app.relaunch()
+  app.quit()
+}
+
 function createWindow () {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
@@ -23,6 +28,7 @@ function createWindow () {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
+  ipcMain.on('restart', handleRestart)
   createWindow()
 
   app.on('activate', function () {

preload.js

@@ -1,3 +1,4 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 /**
  * The preload script runs before `index.html` is loaded
  * in the renderer. It has access to web APIs as well as
@@ -16,3 +17,7 @@ window.addEventListener('DOMContentLoaded', () => {
     replaceText(`${type}-version`, process.versions[type])
   }
 })
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  restart: () => ipcRenderer.send('restart')
+})

renderer.js

@@ -5,3 +5,8 @@
  * `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
  * to expose Node.js functionality from the main process.
  */
+
+const button = document.getElementById('btn')
+button.addEventListener('click', () => {
+  window.electronAPI.restart()
+})