Foundations and setup
Create the Electron Forge project
Scaffold a JavaScript Electron application with Forge and its Webpack template, then run the generated desktop window.
10 minute lesson
Electron Forge provides development, packaging, installer, and publishing steps in one project.
Create the application with the Webpack template:
npx create-electron-app@latest desktop-notes --template=webpack
cd desktop-notes
npm start
A small Electron window should open. Keep the terminal running while you work. Forge rebuilds the app when source files change.
The @latest tag asks npm for the current project generator. The generated package.json records the exact Electron and Forge versions used by the project.
Inspect those versions:
npm ls electron @electron-forge/cli
Keep the generated lockfile. The generator version is not enough to reproduce the project when dependency ranges resolve differently later.
Log the embedded runtime from src/index.js:
console.log(process.versions)
Compare it with node --version from the terminal. They can differ because Electron ships its own Node.js runtime.
In renderer DevTools, typeof require should be 'undefined'. That difference is our first visible process boundary.
Commit the generated project before changing it. This gives you a clean point to compare when an experiment goes wrong.
Stop and restart npm start once. Hot rebuilding is useful, but lifecycle and preload changes often need a full app restart before you can trust the result.
Lesson completed