-
-
Notifications
You must be signed in to change notification settings - Fork 154
State of Electron frameworks [May 2021]
There are a lot of templates, guides and boilerplates on how to make Electron apps, but many are out of date due to the rapid frequency of updates to the core Electron library (which is a very good thing!). I wanted to create an objective comparison to these templates in order to guide users for picking the template that makes sense for them.
For each boilerplate/template, public metrics such as the number of stars, commits, open/closed issues, repository create date and Electron version will be listed to you a good overview of the health and status of the template. The top contenders will be given further review later in this post. All of the specific Electron versions will be marked with a ✅ or ❌ based on the currently supported versions of the framework [as of this writing].
Name | Author | Supported | Electron version | URL | License | Stars | Commits | Issues (open/closed) | Create date | About |
---|---|---|---|---|---|---|---|---|---|---|
secure-electron-template | reZach | ✅ | 12.0.5 | Github | MIT | 687 | 184 | 7/49 | 2020-01-02 | The best way to build Electron apps with security in mind |
electron-boilerplate | sindresorhus | ✅ | 12.0.6 | Github | MIT | 655 | 94 | 2/13 | 2015-04-23 | Boilerplate to kickstart creating an app with Electron |
generator-electron | sindresorhus | ✅ | 12.0.6 | Github | MIT | 1.5k | 58 | 5/12 | 2015-04-23 | Scaffold out an Electron app boilerplate |
electron-boilerplate | szwacz | ✅ | 12.0.2 | Github | MIT | 3k | 441 | 0/210 | 2015-04-25 | Boilerplate application for Electron runtime |
electron-react-boilerplate | electron-react-boilerplate | ✅ | 11.0.1 | Github | MIT | 17.5k | 986 | 104/1300 | 2015-05-18 | A Foundation for Scalable Cross-Platform Apps |
lein_template_descjop | karad | ❌ | 1.6.6 | Github | MIT | 393 | 98 | 6/7 | 2015-04-17 | A Leiningen template(Clojure/ClojureScript Project) for Web based desktop application with Electron (atom-shell) |
electron-quick-start | electron | ✅ | 12.0.5 | Github | CC0-1.0 | 8.5k | 290 | 11/210 | 2015-10-16 | Clone to try a simple Electron app |
bozon | railsware | ✅ | 12.0.2 | Github | MIT | 693 | 523 | 6/53 | 2016-04-26 | Command line tool for building, testing and publishing modern Electron applications |
electron-vue | SimulatedGREG | ❌ | 2.0.4 | Github | MIT | 13.9k | 844 | 237/656 | 2016-05-12 | An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack |
electron-next-skeleton | leo | ❌ | 1.7.10 | Github | MIT | 169 | 129 | 3/3 | 2017-07-16 | An example Electron app built with Next.js |
electron-sandbox-boilerplate | kewde | ❌ | 1.7.15 | Github | MIT | 71 | 83 | 9/4 | 2017-09-13 | A simple example for a (more reasonably) secure electron application, by enabling the sandbox and forcing communication over IPC |
angular-electron | maximegris | ✅ | 12.0.2 | Github | MIT | 4.6k | 449 | 12/477 | 2017-04-02 | Ultra-fast bootstrapping with Angular and Electron (Typescript + SASS + Hot Reload) |
photon | connors | ❔ | Unknown | Github | MIT | 9.6k | 261 | 66/37 | 2015-09-28 | The fastest way to build beautiful Electron apps using simple HTML and CSS |
basic-electron-react-boilerplate | pbarbiero | ❌ | 7.1.2 | Github | MIT | 230 | 28 | 9/9 | 2017-02-22 | Minimal and modern react+electron+webpack boilerplate |
enhanced-electron-react-boilerplate | pbarbiero | ❌ | 7.1.2 | Github | MIT | 61 | 30 | 7/2 | 2017-02-22 | Modern and somewhat opinionated react+electron+webpack boilerplate |
reactron | WilianZilv | ❌ | 8.2.3 | Github | MIT | 76 | 11 | 1/0 | 2020-04-21 | A tiny Electron + React boilerplate |
electron-gatsby-boilerplate | zonayedpca | ❌ | 9.4.0 | Github | MIT | 28 | 53 | 0/1 | 2020-04-10 | Simple Minimal Electron Gatsby Boilerplate. Create new BrowserWindow easily and speed up your development experience. Also included Automatic Linting, Redux, TravisCI Configuration and GitHub Release |
electron-react-redux-boilerplate | jschr | ❌ | 8.2.2 | Github | MIT | 511 | 114 | 2/50 | 2020-04-10 | A minimal boilerplate to get started with Electron, React and Redux |
electron-react-redux-advanced-boilerplate | ganeshrvel | ❌ | 4.0.1 | Github | MIT | 10 | 67 | 0/0 | 2018-09-20 | Advanced and highly scalable boilerplate built using Electron v4, React v16, Redux v4, Webpack v4, Babel v7 {HMR, Loadables, Dynamic Reducer Injection, Selectors, Code splitting} |
vite-electron-builder | cawa-93 | ✅ | 12.0.6 | Github | MIT | 167 | 532 | 4/20 | 2020-11-20 | Secure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla |
Based on our initial review, let's focus on these projects as they are the most up-to-date.
- secure-electron-template
- electron-boilerplate (sindresorhus)
- generator-electron
- electron-boilerplate (szwacz)
- electron-react-boilerplate
- electron-quick-start
- bozon
- angular-electron
- vite-electron-builder
For each of these templates, we will compare features each template provides, as well as what front-end js framework that is used.
Note - (library) is used if a library is used for this feature. (example) is used if the code is a raw implementation of that feature.
Name | Hello world | E2E tests | Bundler | Create distributable | JS framework | Page routing | Local data store | Custom context menu | i18n support | License key validation |
---|---|---|---|---|---|---|---|---|---|---|
secure-electron-template | ✅ | ✅ (library) | Webpack | ✅ (library) | React | ✅ (library) | ✅ (library) | ✅ (library) | ✅ (library) | ✅ (library) |
electron-boilerplate (sindresorhus) | ✅ | ❌ | ❌ | ❌ | JS | ❌ | ❌ | ❌ | ❌ | ❌ |
generator-electron | ✅ | ❌ | ❌ | ❌ | JS | ❌ | ❌ | ❌ | ❌ | ❌ |
electron-boilerplate (szwacz) | ✅ | ✅ (library) | Webpack | ✅ (library) | JS | ❌ | ✅ (example) | ❌ | ❌ | ❌ |
electron-react-boilerplate | ✅ | ✅ (library) | Webpack | ✅ (library) | React (w/ Typescript) | ❌ | ❌ | ❌ | ❌ | ❌ |
electron-quick-start | ✅ | ❌ | ❌ | ❌ | JS | ❌ | ❌ | ❌ | ❌ | ❌ |
bozon | ✅ | ✅ (library) | Webpack | ✅ (library) | JS | ❌ | ❌ | ❌ | ❌ | ❌ |
angular-electron | ✅ | ✅ (library) | Webpack | ✅ (library) | Angular | ✅ (library) | ❌ | ❌ | ✅ (library) | ❌ |
vite-electron-builder | ✅ | ✅ (library) | Vite | ✅ (library) | Vue | ✅ (library) | ❌ | ❌ | ❌ | ❌ |
After this review, the up-to-date templates are placed into three camps: kitchen-sinks, hello worlds and bare minimum.
These templates have more features than other templates. These templates may include features you may desire for your application.
These templates have just enough to get you started, but may not have all the components set up for a production-ready app.
This template is likely best if you want to create your app with the least amount of pre-written code.
- electron-boilerplate (sindresorhus)
- generator-electron
- electron-quick-start
It has been the trend to move towards more secure way of building Electron applications. We will do a security review based on the checklist from the Electron team on the most up-to-date templates.
Note; out of all of the below security suggestions, disabling
nodeIntegration
and enablingcontextIsolation
are expected to require the most refactoring in a given Electron application if you'd like to secure your Electron application.
Name | Load secure content | Disable nodeIntegration
|
Enable contextIsolation
|
Use setPermissionRequestHandler
|
webSecurity enabled |
CSP defined |
allowRunningInsecureContent is false |
Experimental features disabled |
enableBlinkFeatures disabled |
Do not use allowpopups
|
Verify <webview> options |
Disable navigation | Disable creation of new windows | Do not use openExternal
|
Current version of Electron |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
secure-electron-template | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
electron-boilerplate (sindresorhus) | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ✅ |
generator-electron | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ✅ |
electron-boilerplate (szwacz) | ✅ | ❌ | ❌ | ❌ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ✅ |
electron-react-boilerplate | ✅ | ❌ | ❌ | ❌ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ✅ |
electron-quick-start | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ |
bozon | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ✅ |
angular-electron | ✅ | ❌ | ❌ | ❌ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ |
vite-electron-builder | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ |
Due to the fact that a number of repositories do not disable nodeIntegration
or enable contextIsolation
, which leave large gaps in security when loading or using remote content, I cannot recommend they be used for production-ready templates without updating these settings. Updating these settings may require substantial work if these features are heavily used within an Electron application.
These templates are ready and recommended to use when building an app you may use on your local machine or distribute/sell to others.
These templates have more features than other templates. These templates may include features you may desire for your application.
- React
- Can distribute right away
- Has additional features you may want
- Secure by default
These templates have just enough to get you started, but may not have all the components set up for a production-ready app.
- JS
- Can distribute right away
- Recommend security enhancements
- Vue
- Can distribute right away
- Recommend security enhancements
This template is likely best if you want to create your app with the least amount of pre-written code.
electron-boilerplate (sindresorhus)
- JS
- Bare minimum template
- Requires changes for bundling/distribution
- Recommend security enhancements
- JS
- Bare minimum template
- Requires changes for bundling/distribution
- Recommend security enhancements
- JS
- Bare minimum template
- Copyright rights are waived (CC0-1.0 license)
- Requires changes for bundling/distribution
- Recommend security enhancements
These templates should only be used on your local machine and should not render or use remote resources due to security settings that are not set to the recommended secure practices set out by the Electron team. If security settings are updated, these templates can be valid to use for production apps.
These templates have more features than other templates. These templates may include features you may desire for your application.
- Angular
- Can distribute right away
- Has additional features you may want
- Recommend security enhancements
These templates have just enough to get you started, but may not have all the components set up for a production-ready app.
electron-boilerplate (szwacz)
- JS
- Can distribute right away
- Recommend security enhancements
- React w/ Typescript
- Can distribute right away
- Recommend security enhancements