Electron.JS Files structure and best practices

For larger Electron projects, the structure needs to be scalable, maintainable, and easy to navigate. As your app grows in complexity, it’s important to separate concerns, utilize modular architecture, and follow best practices for organization.

Here’s a more detailed and scalable folder structure for a large Electron project, along with the reasoning behind it:

Scalable Folder Structure for Large Electron Projects:

my-electron-app/
├── assets/                  # Static assets (images, icons, etc.)
├── build/                   # Build configuration files (e.g., Electron Packager, Webpack, etc.)
├── node_modules/            # NPM dependencies
├── public/                  # Public files (index.html, static resources)
├── src/                     # Main source code (separated by process)
│   ├── main/                # Main process (backend logic, Electron API calls)
│   │   ├── app/             # Core application logic (app lifecycle, main window)
│   │   ├── ipc/             # Inter-process communication (Main-Renderer)
│   │   ├── windows/         # Window management (create different windows)
│   │   └── utils/           # Utility functions for the main process
│   ├── renderer/            # Renderer process (UI & front-end)
│   │   ├── components/      # React/Vue components (or other front-end framework)
│   │   ├── pages/           # UI screens or page components
│   │   ├── hooks/           # Custom hooks (if using React)
│   │   ├── services/        # API services or data-fetching logic
│   │   ├── store/           # State management (Redux, Vuex, or any other)
│   │   └── styles/          # CSS/SASS/Styled Components
│   ├── preload/             # Preload scripts to expose API to renderer process
│   ├── shared/              # Shared code between main and renderer (common utilities)
│   └── types/               # TypeScript types if using TypeScript
├── dist/                    # Distribution files after build (output)
├── scripts/                 # Automation scripts (build, test, deploy)
├── tests/                   # Test files (unit tests, integration tests)
├── .gitignore               # Git ignore file
├── package.json             # NPM project configuration
├── package-lock.json        # Lock file for NPM dependencies
├── README.md                # Documentation and project info
└── electron-builder.yml     # Electron build configuration (if using Electron Builder)

Breakdown of the Structure:

1. assets/:

• Store all static files like images, icons, and fonts used throughout the app. This is especially useful when you're working with Electron packaging tools.

2. build/:

• Contains your build configuration files (Webpack, Electron Builder, or Electron Forge configurations). This directory can include your custom Webpack configurations, Electron packaging configurations, etc.

3. node_modules/:

• This folder contains the NPM packages installed for the project. No changes are needed here.

4. public/:

• Static files served directly, such as index.html. This is where your application’s HTML template will live.

5. src/:

• This is the core source code. It is split by the type of process (main or renderer).
• main/:
  • Core application logic. Here you'll have all the code that interacts with Electron's APIs (like app, BrowserWindow, etc.).
  • Subdirectories like ipc/ can help separate the inter-process communication code between the main and renderer processes.
  • windows/ helps separate code responsible for creating different windows in your app.
  • utils/ can house utilities for managing the app’s lifecycle, environment, etc.
• renderer/:
  • Contains the front-end application, which may use a framework like React, Vue, or Angular.
  • This folder can have a components/ folder for individual UI components, pages/ for different screens in your app, services/ for API calls or any data fetching, and store/ for any state management solution like Redux or Vuex.
  • styles/ holds all your CSS/SASS/Styled Components files, depending on your styling approach.
• preload/:
  • Scripts that bridge the gap between the renderer process and the main process. Here, you would expose secure APIs to the renderer process.
• shared/:
  • Code that needs to be used by both the main and renderer processes can go here. For example, utility functions, constants, or any shared logic.
• types/:
  • If you’re using TypeScript, this folder will hold types for both main and renderer processes.

6. dist/:

• After you build and package your app, this is where the final executable and distribution files go. It's where your packaged Electron app will be placed.

7. scripts/:

• Includes automation scripts for tasks like building, testing, or deploying your Electron app. You might also add scripts for continuous integration (CI) processes here.

8. tests/:

• Store all your unit tests, integration tests, or any other testing frameworks you use for both the main and renderer processes.

9. .gitignore:

• Specifies files that shouldn’t be tracked in Git, like node_modules/, dist/, etc.

10. package.json:

• This file contains all the metadata and dependencies for the Electron app, including dev dependencies and scripts to run the app, build, and package it.

11. package-lock.json:

• This file ensures that everyone who works on the project has the exact same versions of dependencies installed.

12. electron-builder.yml:

• If you use Electron Builder to package your app, this file contains build configurations for specifying packaging details like the app name, icons, app version, etc.

Best Practices for Large Projects:

1. Separation of Concerns:
   • Split the application’s functionality into clear, independent modules. This helps in maintenance and debugging.
   • Separate the logic of the main process and renderer process, allowing easier upgrades and refactoring.
2. Use IPC for Communication:
   • Use Electron’s ipcRenderer and ipcMain to communicate between the renderer and main processes instead of directly accessing the Electron APIs from the renderer process.
3. Modular Components:
   • In the renderer process, break your UI into reusable components, which helps in maintaining a scalable front-end architecture.
   • If you’re using React or Vue, structure components, containers, and state management (like Redux or Vuex) to be easy to manage.
4. Security:
   • Always use preload scripts for exposing Node.js functionality to the renderer. Never expose sensitive API logic directly to the renderer process.
   • Enable context isolation and use sandbox mode if possible for added security.
5. Code Splitting:
   • Use tools like Webpack to split your code into chunks. This will allow for faster load times and better performance, especially in larger apps.
6. Electron Packaging:
   • Use Electron Builder or Electron Forge for packaging and distributing your app. These tools help in packaging your app for different operating systems, and handle things like auto-updating, signing, and more.
7. TypeScript:
   • For larger projects, consider using TypeScript to provide strong typing and avoid runtime errors. TypeScript also offers better IDE support and developer tooling.
8. Automated Testing:
   • Implement unit tests for both the renderer and main process. Tools like Jest and Mocha are commonly used in Electron projects.

By following this structure and best practices, you’ll ensure that your Electron project remains maintainable, scalable, and organized, even as it grows.