A project with Electron Forge

Electron Forge is Electron's official toolkit. It creates a project from a template, runs it during development and builds installers for Windows, macOS and Linux. For a real app it is more convenient to start with Forge than with an empty folder.

Creating the project

npm init electron-app@latest notes
cd notes
npm start

The first command downloads the Forge generator and creates a notes folder with a ready project. npm start opens a window saying "Hello World!" and shows DevTools right away.

Structure

notes/
├── src/
│   ├── index.html     the window's page
│   ├── index.css      page styles
│   ├── index.js       the main process
│   └── preload.js     the preload script
├── forge.config.js    build settings
└── package.json

These are the same files as in the hand-made project, only inside src and with different names. In the course lessons the files are called main.js, index.html, preload.js and live in the root. In a Forge project the same code goes into src/index.js, src/index.html and src/preload.js.

package.json

What differs most from the hand-made version is the main field and the scripts:

{
  "main": "src/index.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish"
  }
}

start runs the app for development, package builds a folder with the finished app, make builds an installer, and publish uploads the build, for example to GitHub Releases. Building has its own lesson.

The template's main process

Open src/index.js. It starts roughly like this:

// src/index.js
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
 
if (require('electron-squirrel-startup')) {
  app.quit();
}

The electron-squirrel-startup check is needed by the Windows installer: during install and uninstall it briefly launches the app, and no window should open at that moment. The rest of the file creates the window and handles lifecycle events — the next lessons cover them.

Templates

The generator can also create a project with a bundler:

npm init electron-app@latest notes -- --template=vite

The vite, vite-typescript, webpack and webpack-typescript templates are for interfaces written in React or Vue. See the "Vite and React" lesson.

Common mistake

If you run electron . in a Forge project instead of npm start, the app opens but Forge does not prepare it: in bundler templates the window stays empty. Run a Forge project only with npm start.