Hey there! I'm currently in the process of transitioning my project from a web browser to a GUI-based app using electron. I came across this video which was really helpful in getting started. The tutorial uses yarn, but I prefer npm 9.2.0.
Initially, I encountered an issue where nothing happened when I clicked the button. Luckily, I found a solution in the comments suggesting a change in code:
webPreferences:{
nodeIntegration: true,
}
I updated it to:
webPreferences:{
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
This change resulted in progress, but also led to ... an error. Frustrating, right?
Here's a snippet of my current code:
gui.js
const { app, BrowserWindow, ipcMain } = require("electron");
let leftWindow = null;
let rightWindow = null;
const createWindows = (win, page) => {
win = new BrowserWindow({
width: 1024,
height: 600,
resizable: false,
fullscreen: true,
webPreferences:{
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
});
win.loadFile(page)
};
app.whenReady().then(() => {
//createWindows(leftWindow, "dash.html");
createWindows(rightWindow, "controls.html");
});
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit()
}
})
ipcMain.on('send', (event, data) => {
const randomStr = data + Math.random().toString(36).substring(2, 5)
rightWindow.webContents.send('receive', randomStr)
})
render.js
const ipcRenderer = require("electron").ipcRenderer;
const test = () => {
ipcRenderer.send("send", document.querySelector(".keyWord").value);
};
ipcRenderer.on("receive", (event, data) => {
alert(data);
const tempTag = document.querySelector("#temp");
tempTag.innerText = data;
});
controls.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controls</title>
<script defer src="render.js"></script>
<link rel="stylesheet" href="./public/styles.css" />
</head>
<body>
<div id="content">
<input type="text" class="keyWord" placeholder="Enter Data">
<button onclick="test()">Test</button>
<h1 id="temp">Random String</h1>
</div>
<script type="text/jsx" src="./public/controlApp.jsx"></script>
</body>
</html>