Read the generated project

Before we edit anything, let’s map each generated file to the process that owns it. This is the single most useful Electron habit I can give you.

• src/index.js starts the main process and creates the window
• src/preload.js defines the narrow bridge available to the page
• src/renderer.js runs inside the page, with the interface
• src/index.html is the page itself
• forge.config.js controls packaging and makers

Open package.json too. The main field points at Forge’s build output, not at src/index.js directly. The scripts run Forge commands.

How startup flows

When you run npm start, this is the order in which things happen:

npm start
  → Electron Forge configuration
  → bundled main entry
  → BrowserWindow creation
  → preload bundle
  → HTML and renderer bundle

Forge reads its config, bundles the main entry with Webpack, and starts Electron. The main process creates a window. The window loads the preload bundle first, then the HTML page and the renderer bundle.

The uppercase entry constants

Look inside src/index.js and you’ll find two constants that are never declared: MAIN_WINDOW_WEBPACK_ENTRY and MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY. The Forge Webpack plugin injects them at build time.

In development, the first one points at a local dev server URL. In a packaged build, it points at a file inside the app. Always use these constants. Never hardcode http://localhost:3000 or an output path, because it will work on your machine and break in the packaged app.

Find each process with a log

Don’t rename files yet. First follow every entry from package.json to forge.config.js, then into src/.

Then add a temporary log to src/index.js and another to src/renderer.js:

console.log('hello from the main process')

console.log('hello from the renderer')

Run the app and find each message. The main-process message appears in your terminal. The renderer message appears in Chromium DevTools inside the window. Two different consoles, because two different processes.

Remove both logs once you’ve seen them. Knowing which process owns a file is the most important Electron debugging skill, because errors, available APIs, and trust all differ at every boundary. When a require fails or an API is undefined, ask yourself first: which process am I in?