Home > AI > Frontend > Electron >

Electron build cross-platform app

It can use JS to build cross-platform app and the process is pretty simple. ChatGPT suggests:

download NodeJS first

node -v 
npm -v 


mkdir my-electron-app
cd my-electron-app
npm init -y
npm install --save-dev electron

Create these files index.js, index.html, and package.json

const { app, BrowserWindow } = require("electron");

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Allows Node.js integration
    },
  });

  mainWindow.loadFile("index.html"); // Load the HTML file

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
});

// Quit when all windows are closed (except on macOS)
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Electron App</title>
</head>
<body>
  <h1>Hello, Electron! &#x1f680;</h1>
</body>
</html>

"scripts": {
  "start": "electron ."
}

Finally, run npm start and you can see the result

Leave a Reply