add preload.js

package.json

@@ -6,8 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "electron:dev": "NODE_ENV=development electron index.js",
+    "electron:dev": "cross-env NODE_ENV=development electron index.js",
-    "electron:build": "vite build && tsc -p tsconfig.electron.json --outDir dist/main && electron-builder"
+    "electron:build": "rm -rf dist && vite build && tsc -p tsconfig.electron.json && electron-builder"
   },
   "dependencies": {
     "vue": "^3.0.5"
@@ -28,7 +28,8 @@
       "category": "your.app.category.type"
     },
     "files": [
-      "dist/**/*"
+      "dist/main/**/*",
+      "dist/render/**/*"
     ],
     "directories": {
       "output": "dist/release"

src/main/app.ts

@@ -1,16 +1,19 @@
 import { app, BrowserWindow } from 'electron'
+import {join} from "path";
 
 function createWindow() {
     const win = new BrowserWindow({
         width: 800,
         height: 600,
         webPreferences: {
-            nodeIntegration: true
+            nodeIntegration: true,
+            preload: join(__dirname, 'preload.js')
         }
     })
 
     if (process.env.NODE_ENV === 'development') {
         win.loadURL('http://localhost:3000/')
+        win.webContents.openDevTools()
     } else {
         win.loadFile('dist/render/index.html')
     }

src/main/preload.js

@@ -0,0 +1,20 @@
+const {ipcRenderer, contextBridge} = require('electron')
+
+contextBridge.exposeInMainWorld('ipcRenderer', {
+    send: (channel, data) => {
+        // whitelist channels
+        let validChannels = ['toMain']
+        if (validChannels.includes(channel)) {
+          ipcRenderer.send(channel, data)
+        }
+        ipcRenderer.send(channel, data)
+    },
+    receive: (channel, func) => {
+        let validChannels = ['fromMain']
+        if (validChannels.includes(channel)) {
+          // Deliberately strip event as it includes `sender`
+          ipcRenderer.on(channel, (event, ...args) => func(...args))
+        }
+        ipcRenderer.on(channel, (event, ...args) => func(...args))
+    }
+})

tsconfig.electron.json

@@ -5,9 +5,12 @@
     "moduleResolution": "node",
     "strict": true,
     "resolveJsonModule": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "allowJs": true,
+    "outDir": "dist/main"
   },
   "include": [
-    "src/main/app.ts"
+    "src/main/app.ts",
+    "src/main/preload.js",
   ]
 }