Step-by-Step Guide to Setting Up an Electron Project and Creating the First Window

Introduction: This article walks readers through installing, configuring, and launching a basic Electron project, aiming to help beginners get their first window up and running while avoiding common network and version issues.

Prerequisites: Node.js 20.16.0+ and pnpm 8.15.3+ are required; using nvm is recommended for managing Node versions.

Installation steps include initializing a package.json with pnpm init , editing the file to set entry point and scripts, configuring .npmrc to enforce Node version, use highest resolution, and set a mirror registry, then installing Electron via pnpm install [email protected] and adding an engine constraint in package.json :

"engines": {
    "node": ">=20.16.0"
}

A simple main.js is created to log a message, and the project is started with pnpm start to verify the installation.

Creating the first window involves adding an index.html file, then modifying main.js to create a BrowserWindow of size 400x200 and load the HTML file using win.loadFile("index.html") :

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

app.whenReady().then(() => {
    const win = new BrowserWindow({
        width: 400,
        height: 200,
    });
    win.loadFile("index.html");
});

Running the app displays the HTML content inside the Electron shell, confirming the window is working.

The article also notes future integration of Vue or React, hot‑reloading, and provides appendices covering simple nvm and pnpm usage, including commands to set mirrors for reliable installations.