# Electron React Boilerplate: a Vite-based desktop starter that runs on Node.js 24

> Electron React Boilerplate wires Electron, React, React Router and electron-vite into one starter. It suits teams who want a working build, packaging and hot-reload chain on day one, and it assumes you are willing to keep that chain current yourself.

**electron-react-boilerplate/electron-react-boilerplate** — A Foundation for Scalable Cross-Platform Apps

- Repository: https://github.com/electron-react-boilerplate/electron-react-boilerplate
- Website: https://electron-react-boilerplate.js.org/
- Stars: 24,255 · Forks: 3,965
- Language: TypeScript
- License: MIT
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/electron-react-boilerplate-electron-react-boilerplate

## What Electron React Boilerplate actually removes from your to-do list

Starting an Electron app from nothing means deciding on a bundler, a renderer framework, a router, a hot-reload path, a TypeScript config, a linter config, a test runner and a packaging tool. Each of those decisions has its own failure modes, and the combination is where most first attempts stall. Electron React Boilerplate ships that combination already assembled: Electron for the desktop shell, React and React Router for the renderer, electron-vite for the build, and React Fast Refresh for hot reloading during development. The README describes the project as "a foundation for scalable desktop apps", and the repository layout backs that up. There is a src/ directory for application code, an electron.vite.config.ts for build configuration, an eslint.config.js, a jest.config.js, a tsconfig.json and a release/ directory that holds build output. The intended user is a developer or small team that already knows React and wants to spend its first week on product code rather than on wiring. It is a worse fit for someone who wants to learn how Electron works, because the interesting parts are already hidden behind scripts.

## How the Vite build, main process and renderer fit together

The package.json main field points at ./release/app/dist/main/main.js. That single line tells you most of the architecture: the Electron main process is compiled output, not source you run directly, and it lands under release/app/dist. The build script is electron-vite build, so electron-vite owns compilation for both the main and renderer sides, and the dev script is electron-vite dev --watch, which runs the same pipeline in watch mode with React Fast Refresh attached to the renderer. TypeScript is the primary language, and the repository's topics list babel, eslint, webpack and vite together, which reflects that the toolchain has changed over the project's life: webpack was the earlier bundler, and electron-vite is what the current scripts invoke. The practical consequence is that anything you read about this boilerplate from before the Vite migration may describe a structure that no longer matches the scripts. Configuration lives in electron.vite.config.ts at the repository root, and the renderer, main and preload entries are resolved through it rather than through a hand-written webpack config.

## Installing it and getting a first window on screen

The README states the requirements plainly: Node.js 24 or newer and npm 10 or newer. It also points at a separate compiler tooling install described in .erb/tooling/README.md, which matters because the postinstall step runs npm --prefix .erb/tooling ci before anything else. The documented install path clones the repository directly rather than using a scaffolding command, so you rename the directory as part of the clone.

```bash
git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
cd your-project-name
npm install
```

The --depth 1 flag keeps the clone shallow, and the --branch main flag pins you to the default branch. After npm install finishes, the postinstall chain runs three commands in sequence: npm --prefix .erb/tooling ci installs the tooling workspace, install-electron fetches the Electron binary, and electron-builder install-app-deps rebuilds native dependencies against Electron's Node version. If native modules are involved in your app, that last step is the one that decides whether your first run works.

```bash
npm start
```

The start script is electron-vite dev --watch. You should see an Electron window open with the boilerplate UI, and edits to renderer files should apply without a full restart. The README links a debugging guide at issue 400 for install problems, which is a sign that dependency resolution is the most common place people get stuck.

```bash
npm run package
```

Packaging runs npm run build first and then electron-builder build --publish never. The --publish never flag means the command produces installers for the local platform only and does not attempt to upload them anywhere.

## The release cadence is the real limitation

The last release listed is v4.6.0, dated 2022-05-15. The releases before it are v4.5.0 on 2021-12-28 and v4.4.0 on 2021-12-23. The repository's last push was on 2026-09-15, so work is happening on the default branch, but that work is not being cut into tagged releases. For anyone who pins a version, this is the central fact about the project: you are tracking main, not a release line. There is no documented upgrade path between the webpack era and the current electron-vite scripts in the README, and the README does not document rollback or a migration guide. If your organisation requires versioned dependencies with changelogs, this boilerplate will not satisfy that requirement without you maintaining your own fork or your own tag. A second limitation is scope: the README documents install, start and package, and points to external docs for everything else. Authentication, auto-update, code signing, IPC patterns and crash reporting are not covered in the README, so you should not expect the repository to answer those questions for you. A third is the Node.js 24 and npm 10 floor. Teams on older LTS runtimes will need to upgrade before the install command works at all.

## Electron Forge and hand-rolled Vite setups as alternatives

Electron Forge is the closest alternative in kind, because it also targets the packaging and build problem rather than the UI problem. The difference in approach is where the opinion lives. Electron Forge is a CLI-driven toolchain: you start from a template, and the tool owns the build and packaging pipeline, with makers and plugins you configure. Electron React Boilerplate is a repository you clone, and the pipeline is expressed as scripts and an electron.vite.config.ts file that you edit in place. Forge gives you a documented upgrade path through its own releases; this boilerplate gives you a working tree you own outright and can change without fighting a framework. If your team prefers upgrading a tool to merging upstream changes, Forge is the better shape. If you would rather own every line of the build config, cloning is the better shape. The second alternative is assembling Electron, Vite and React yourself. That is more work up front and gives you exactly the dependency versions you choose, with no inherited assumptions about directory layout or the release/app/dist output path. The trade is time against control, and the boilerplate only wins that trade if its defaults match what you would have picked anyway.

## Licence, maintenance and what upgrades cost you

The project is MIT licensed, which permits commercial and closed-source use with the licence and copyright notice retained. The README also lists OpenCollective backers and sponsors and a donations section, which funds maintenance and roadmap work according to that section. None of that changes the licence terms. The upgrade cost is the part worth thinking about before you clone. Because the last tagged release is v4.6.0 from 2022 and the current scripts reference electron-vite, the version you get from main is ahead of the version anyone documented in a release note. Pulling upstream changes later means resolving differences in electron.vite.config.ts, package.json scripts and the .erb/ tooling directory, and the README does not describe a supported merge procedure. In practice you are adopting a snapshot. Treat the initial clone as a fork you maintain, budget time for Electron and React major upgrades yourself, and do not plan on the project's release tags to carry you. The scripts you will be maintaining most often are build, start, package and rebuild, since the last of those, electron-rebuild --parallel --types prod,dev,optional --module-dir release/app, is what keeps native modules working after an Electron bump.

## Conclusion

Adopt it if you want Electron, React and electron-vite already wired together and you accept that dependency upkeep is your job. Skip it if you need a maintained release cadence, or if you want to pick your own bundler and renderer stack from scratch. Before committing, run npm start on your target platform and check that the postinstall chain (npm --prefix .erb/tooling ci, install-electron, electron-builder install-app-deps) completes cleanly on your machine.

## FAQ

### What is Electron React Boilerplate?

It is a starter repository that combines Electron, React, React Router, electron-vite and React Fast Refresh so that build, hot reload and packaging are already configured. The package description calls it "a foundation for scalable desktop apps".

### What is boilerplate in simple terms?

In this project it means a working desktop app skeleton you clone instead of starting from an empty directory. You get a main process, a React renderer, TypeScript, ESLint, Jest and an electron-builder packaging script without writing the configuration yourself.

### Is Electron.js hard to learn?

The install is three commands, but the README states it requires Node.js 24 or newer and npm 10 or newer, and the postinstall step installs a separate tooling workspace under .erb/tooling. The README links a debugging guide for install problems, which suggests dependency setup is the usual sticking point rather than the React code.

### What is Electron react?

It refers to pairing the Electron desktop shell with React as the renderer layer, which is what this boilerplate does. The README lists Electron, React, React Router, electron-vite and React Fast Refresh as the pieces it combines.

## Sources

- [electron-react-boilerplate/electron-react-boilerplate on GitHub](https://github.com/electron-react-boilerplate/electron-react-boilerplate)
- [License: MIT](https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/LICENSE)
- [Project website](https://electron-react-boilerplate.js.org/)
- [README](https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/README.md)
- [Releases](https://github.com/electron-react-boilerplate/electron-react-boilerplate/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/electron-react-boilerplate-electron-react-boilerplate