Your First Electron App – Hello World

Your First Electron App – Hello World

Create two files:

main.js (main process)

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

function createWindow(){
  const win = new BrowserWindow({ width:800, height:600 });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

index.html (renderer)

<!doctype html>
<html>
<head><meta charset="utf-8"><title>Hello Electron</title></head>
<body>
  <h1>Hello, Electron!</h1>
  <p>This window is rendered by Chromium.</p>
</body>
</html>

Add "main": "main.js" to package.json and run npm start. You should see a native desktop window showing the HTML page.