I stopped rewriting the same Electron boilerplate — so I packaged it

Every Electron side project begins with the same three weeks of setup. Developers wire up window controls, but they often look out of place compared to the native OS chrome. Building a theme system is common, but it's often inconsistent across components. Storing user API keys in plaintext JSON files is a typical practice, despite plans to encrypt them later.

The auto-updater, a crucial feature for users, is usually bolted on at the last minute, just before a release deadline. This leaves developers with little time to focus on the actual application they intended to create. Frustrated by the repetition of this setup, the author decided to package it into a reusable framework called "electron-shell-framework."

This framework serves as a reusable Electron app shell, turning it into a platform rather than a single app. Developers can then build new desktop applications by simply dropping in pages. No need to rewrite the shell for each new project. The framework inherits the core chrome on day one. There is a single top bar containing tabs, a left sidebar, and a right panel.

The tab strip and window controls share a 40px bar, with the ability to collapse tabs into a slim strip. The left sidebar is collapsible and drag-resizable, while the right panel is page-scoped and can declare its own inspector, notifications, or activity-log views. The bottom panel is a terminal-style strip, and the footer bar displays full-width status information.

The framework supports both dark and light themes, with persisted settings across launches. Every screen in the application is defined as a "PageDefinition," which includes properties for the page's ID, label, description, icon, component, right panel view, category, and whether it should be shown in the sidebar. By registering pages in the page registry, the framework automatically handles tasks such as displaying the sidebar icon, creating the tab, and managing the content area and optional right panel.

Configurations that are not stored as plaintext JSON files are routed through a safe storage system, ensuring that sensitive information is encrypted and protected. The framework stores settings as either "enc:" or "raw:", indicating whether they are encrypted or not. The renderer can access these settings through IPC (Inter-Process Communication) without ever needing to know the filesystem path.

The IPC contract is straightforward, with a single door and a defined shape for communication. The renderer can interact with the main process using the "window.api" object, with methods for retrieving, setting, and checking encrypted configuration values, as well as checking the app's version and platform health. The framework includes robust security measures to prevent a compromised renderer from invoking arbitrary channels.

These measures include sandboxing the renderer process, isolating the context, disabling node integration, and preventing raw ipcRenderer passthrough. The framework's API channels are defined in two files, src/main/ipc.ts and src/preload/index.ts. These channels cover various aspects of the app, such as configuration management, app version and platform health checks, window control functions, and auto-update functionality.

Lastly, the framework includes a shell-cli, a zero-dependency CLI that simplifies the process of cloning the repository, running the app, and building the installer. This CLI streamlines the development process, eliminating the need for lengthy manual steps typically found in other Electron tutorials.