1. Clone the Electron repository

git clone https://github.com/electron/electron-quick-start

2. Transfer the web application files into the electron-quick-start directory.

3. Modify main.js to load the desired HTML file.

const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');
const httpServer = require('http-server');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  Menu.setApplicationMenu(null);
  mainWindow.loadFile('output/index.html');
  httpServer.createServer({ root: './output' }).listen(80);
}

4. Install the packaging tool and configure the build script.

npm install electron-packager

Update package.json with the following script:

{
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ APP --platform=win32 --arch=x64 --electron-version=19.0.6 --icon=logo.ico --overwrite"
  }
}

Command breakdown:

electron-packager <project location> <app name> <platform> <architecture> <electron version> <optional flags>

Example usage:

electron-packager ./ helloworld --platform=win32 --arch=x64 --out=./app --electron-version=3.0.7

5. Execute the packaging command:

npm run packager

Common issues and solutions:

1. Timeout during packaging

# For yarn
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/

# For npm
npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

2. Icon-related errors

rcedit.exe failed with exit code 1. Reserved header is not 0 or image type is not icon for './src/assets/olami.ico'

Solution:

Download an ICO generator tool from https://icofx.ro/. Use it to convert images to .ico format.