Electron Setup

🛠 Electron Setup

This page explains how the EVE Companion App is structured as an Electron application using Electron Forge and Webpack. We use a modular, modern development setup that separates the main and renderer processes cleanly while enabling future expansion with preload scripts, workers, and more.

---

⚙️ Electron Forge

We use Electron Forge for:

• Scaffolding
• Building and packaging (cross-platform)
• Managing Electron's lifecycle with plugins

Relevant Forge dependencies:

• @electron-forge/cli
• @electron-forge/plugin-webpack
• @electron-forge/maker-zip, maker-deb, maker-rpm, etc.

Forge makes it easy to run:

npm run start    # Start in dev mode
npm run make     # Build app for distribution

---

📦 Webpack Setup

Webpack is configured via the Forge Webpack plugin to handle both main and renderer bundles.

Structure

webpack.main.config.js       # Electron main process (Node context)
webpack.renderer.config.js   # Renderer (browser context)
webpack.rules.js             # Loaders
webpack.plugins.js           # Plugins

Entry Points

Target	Entrypoint	Purpose
Main	src/index.js	Electron app lifecycle, IPC
Renderer	src/renderer.js	Main UI script
Preload(s)	(planned)	Isolated context bridges

---

✍️ Electron Context Separation

Electron apps are composed of two main processes:

• Main (Node): manages windows, menu, IPC, filesystem access
• Renderer (Browser): UI layer, runs in Chromium sandbox

Communication between the two is done via ipcMain / ipcRenderer or preload scripts.

---

🔐 Preload Scripts (Planned)

We plan to introduce preload.js files to:

• Securely expose limited Node APIs to the renderer
• Register shared functionality like config access, IPC messaging, auth tokens

These are registered when creating windows:

new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    enableRemoteModule: false
  }
});

---

🚀 Forge + Webpack Scripts

The following npm scripts are available:

"scripts": {
  "start": "electron-forge start",
  "package": "electron-forge package",
  "make": "electron-forge make"
}

These are powered by Forge’s Webpack plugin which automatically compiles and serves your renderer assets.

---

🔧 Environment Setup

• .env files can be used with webpack.DefinePlugin
• Development variables are available in both contexts
• For secure credentials, use Electron's secure storage or pass them via the preload context only

---

📁 Example Directory Layout

src/
├── index.js         # Electron main process entry
├── renderer.js      # Renderer (browser) script
├── api/             # Swagger + helper modules
├── js/main/         # Class-per-file logic
├── style-guide/     # Visual design support
├── components/      # (optional) UI modules

---

✅ Summary

• Electron Forge handles build + packaging
• Webpack plugin bundles and hot-reloads
• Future-proofed for preload scripts
• Separation between main and renderer is cleanly maintained

Ready to build? Continue to:

• UI Styling
• Build & Scripts

---