Electron.js Apps Structure
A scalable and maintainable folder structure for Electron.js applications
File Structure
- src
- main
- main.js
- menu.js
- window-manager.js
- app-updater.js
- services
- file-service.js
- settings-service.js
- renderer
- windows
- main
- settings
- about
- components
- sidebar.js
- toolbar.js
- utils
- ipc-renderer.js
- dom-utils.js
- preload
- main-preload.js
- settings-preload.js
- shared
- constants.js
- ipc-channels.js
- types.js
- assets
- icons
- app-icon.png
- tray-icon.png
- images
- fonts
- build
- icon.png
- background.png
- scripts
- build.js
- dev.js
- tests
- main.test.js
- renderer.test.js
- package.json
- electron-builder.json
- forge.config.js
- .gitignore
- README.md
Directory Structure Explanation
main/window-manager.js
Advanced window management including multiple windows, window state persistence, and window communication.
main/app-updater.js
Auto-updater functionality for handling application updates and notifications.
main/services/
Service layer for main process including file operations, settings management, and system integration.
renderer/windows/
Multiple window implementations with each window having its own HTML, CSS, and JavaScript.
renderer/components/
Reusable UI components for the renderer process.
preload/main-preload.js
Main window preload script with specific API exposure for the main window.
shared/ipc-channels.js
Centralized IPC channel definitions for communication between main and renderer processes.
build/
Build-specific assets like application icons and installer backgrounds.
scripts/
Build and development scripts for automation and workflow management.
forge.config.js
Electron Forge configuration for advanced packaging and distribution options.