ElectronJS-template

A starter template for building desktop applications with Electron, TypeScript, React and Webpack. This repository provides a working example app, build scripts and recommended editor settings for ESLint + Prettier.

Important: This project is intended to be used via GitHub "Use this template" feature (not only cloning).

Features

• Electron main (backend) + React renderer (frontend) using TypeScript and Webpack.
• Pre-configured IPC preload bridge and typings.
• Example UI (titlebar) and basic window control handlers.
• ESLint and Prettier integration for consistent code style.
• Support for worker bundles and packaging with electron-builder.
• Persistent storage controller with IPC synchronization between main and renderer processes (see src/shared/storage.ts, src/backend/modules/storage.ts, src/frontend/modules/storage.tsx).
• Storage replication across worker processes — IPC-driven synchronization keeps in-memory storage consistent between main and forked workers (see src/backend/workers/worker.main.ts and src/backend/workers/worker.inside.ts).
• Unified translation layer (i18n) with centralized language files and helpers for backend and frontend (see src/lang/core.ts, src/backend/modules/lang.ts, src/frontend/modules/lang.ts).

Project structure

• src/shared — shared utilities and common code.
• src/backend — Electron main process, modules, pages and workers.
• src/frontend — React renderer, entry HTML and styles.
• src/preload — preload scripts and IPC bridge exposed with contextBridge.
• src/lang — Language module.
• src/types — TypeScript global declarations.

Build & output

• Compiled bundles are emitted to ./dist.
• Packaged installers/artifacts are produced in ./out by electron-builder.
• Webpack configs are split for frontend, backend and workers.

NPM scripts

• npm run watch — run Webpack in watch mode for development.
• npm run build — build all bundles (Webpack).
• npm run build:frontend — build frontend bundle only (uses webpack.config.frontend.mjs).
• npm run build:backend — build backend (main) bundle only (uses webpack.config.backend.mjs).
• npm run build:workers — build worker bundles only (uses webpack.config.workers.mjs).
• npm run build:electron — package the app with electron-builder.
• npm run start — run Electron loading ./dist/main.bundle.js.
• npm run lint — run ESLint and attempt to fix issues automatically.
• npm run test — run lint and jest tests.
• npm run next-patch|next-minor|next-major — bump package version.

How to use this repository as a template

• On GitHub, press "Use this template" to create a new repository pre-populated with this template.
• After creating the new repository, update package.json metadata (name, author, productName, appId) and adjust build settings before packaging.

IPC / preload (brief)

• The preload bridge exposes a small set of safe helpers to the renderer (see src/preload/ipc-api.ts).
• Renderer code can call window.ipcAPI (types in src/types/global.d.ts).
• Add main-process handlers under src/backend and expose only safe methods through the preload API.

VSCode, ESLint and Prettier

• ESLint and Prettier configs are included; run npm run lint to enforce code style.
• Recommended: install ESLint and Prettier extensions and enable "Format on Save" in VSCode workspace.

Packaging notes

• Ensure npm run build produces a valid ./dist/main.bundle.js referenced by main in package.json.
• electron-builder settings live in the build field of package.json.

Contributing / extending

• This repository is a template. Structure your new app by keeping main logic in src/backend, UI in src/frontend and shared utilities in src/shared.

Changelog / Recent notable changes

• feat(storage): add persistent storage with IPC sync — introduced a shared StorageController with persistent JSON file storage and IPC handlers that keep renderer processes in sync. Relevant files:
  • src/shared/storage.ts — StorageController implementation, events (OnLoad, OnChange, OnChangeKey, OnSave), auto-save logic.
  • src/backend/modules/storage.ts — backend module persisting storage to disk and forwarding changes via IPC.
  • src/frontend/modules/storage.tsx — frontend integration, listens to IPC events and exposes useStorage() hook.
  • Minor frontend updates: src/frontend/App.tsx and src/frontend/index.tsx.
• feat(storage): replicate state across worker processes — added IPC-driven synchronization between main and forked workers so in-memory Storage stays consistent:
  • src/backend/workers/worker.main.ts — worker bootstrap modifications: optional storage sync flag, forwarding Storage.OnLoad and OnChangeKey to workers.
  • src/backend/workers/worker.inside.ts — worker-side storage controller and IPC handlers to receive initial load and sync updates.
  • Storage change deduplication improved in src/shared/storage.ts to avoid redundant updates.
• feat(i18n): add unified translation layer — provide a single source of truth for localized strings and helpers, available to both backend and frontend:
  • src/lang/core.ts — core language registry, helpers (langString, langStringSystem, GetUserLanguage) and utilities to resolve languages and nested placeholders.
  • src/backend/modules/lang.ts — backend-side language detection and LangString helper for main process usage.
  • src/frontend/modules/lang.ts — frontend helper LangString for renderer usage.
  • Language resources: src/lang/en.json, src/lang/ru.json, src/lang/uk.json, src/lang/shared.json.
  • Types and config: src/types/lang.d.ts and a tsconfig paths update to include _lang/*.

License

• MIT — see LICENSE.

Useful files and configs

• package.json — scripts and build settings.
• webpack.common.mjs, webpack.config.frontend.mjs, webpack.config.backend.mjs, webpack.config.workers.mjs.
• tsconfig.json, ESLint and Prettier config files.
• Storage & sync related:
  • src/shared/storage.ts
  • src/backend/modules/storage.ts
  • src/frontend/modules/storage.tsx
  • src/backend/workers/worker.main.ts
  • src/backend/workers/worker.inside.ts

End of README.