# electron-react-boilerplate [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][david_img]][david_site] ![](./erb-logo.png) > Live editing development on desktop app [Electron](http://electron.atom.io/) application boilerplate based on [React](https://facebook.github.io/react/), [Redux](https://github.com/reactjs/redux), [React Router](https://github.com/reactjs/react-router), [Webpack](http://webpack.github.io/docs/), [React Transform HMR](https://github.com/gaearon/react-transform-hmr) for rapid application development ## Screenshot ![](https://cloud.githubusercontent.com/assets/3382565/10557547/b1f07a4e-74e3-11e5-8d27-79ab6947d429.gif) ## Install First, clone the repo via git: ```bash git clone https://github.com/chentsulin/electron-react-boilerplate.git your-project-name ``` And then install dependencies. ```bash $ cd your-project-name && npm install ``` ## Run Run this two commands __simultaneously__ in different console tabs. ```bash $ npm run hot-server $ npm run start-hot ``` or run two servers with one command ```bash $ npm run dev ``` *Note: requires a node version >= 4 and an npm version >= 2.* ## DevTools #### Toggle Chrome DevTools - OS X: Cmd Alt I or F12 - Linux: Ctrl Shift I or F12 - Windows: Ctrl Shift I or F12 *See [electron-debug](https://github.com/sindresorhus/electron-debug) for more information.* #### Toggle Redux DevTools - All platforms: Ctrl+H *See [redux-devtools-dock-monitor](https://github.com/gaearon/redux-devtools-dock-monitor) for more information.* #### Redux Devtools Window Now you can implement it using [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) with a [remote monitor](https://github.com/zalmoxisus/remote-redux-devtools#remote-monitoring) by yourself. ## Externals If you use any 3rd party libraries which can't be built with webpack, you must list them in your `webpack.config.base.js`： ```javascript externals: [ // put your node 3rd party libraries which can't be built with webpack here (mysql, mongodb, and so on..) ] ``` You can find those lines in the file. ## CSS Modules This boilerplate out of the box is configured to use [css-modules](https://github.com/css-modules/css-modules). All `.css` file extensions will use css-modules unless it has `.global.css`. If you need global styles, stylesheets with `.global.css` will not go through the css-modules loader. e.g. `app.global.css` ## Package ```bash $ npm run package ``` To package apps for all platforms: ```bash $ npm run package-all ``` #### Options - --name, -n: Application name (default: ElectronReact) - --version, -v: Electron version (default: latest version) - --asar, -a: [asar](https://github.com/atom/asar) support (default: false) - --icon, -i: Application icon - --all: pack for all platforms Use `electron-packager` to pack your app with `--all` options for darwin (osx), linux and win32 (windows) platform. After build, you will find them in `release` folder. Otherwise, you will only find one for your os. `test`, `tools`, `release` folder and devDependencies in `package.json` will be ignored by default. #### Default Ignore modules We add some module's `peerDependencies` to ignore option as default for application size reduction. - `babel-core` is required by `babel-loader` and its size is ~19 MB - `node-libs-browser` is required by `webpack` and its size is ~3MB. > **Note:** If you want to use any above modules in runtime, for example: `require('babel/register')`, you should move them from `devDependencies` to `dependencies`. #### Building windows apps from non-windows platforms Please checkout [Building windows apps from non-windows platforms](https://github.com/maxogden/electron-packager#building-windows-apps-from-non-windows-platforms). ## How hot-reloading works on Electron We use [webpack-target-electron-renderer](https://github.com/chentsulin/webpack-target-electron-renderer) to provide a build target for electron renderer process. Read more information [here](https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works). > Note: webpack >= 1.12.15 has built-in support for `electron-main` and `electron-renderer` targets. ## Native-like UI If you want to have native-like User Interface (OS X El Capitan and Windows 10), [react-desktop](https://github.com/gabrielbull/react-desktop) may perfect suit for you. ## Maintainers - [C. T. Lin](https://github.com/chentsulin) - [Jhen-Jie Hong](https://github.com/jhen0409) ## License MIT © [C. T. Lin](https://github.com/chentsulin) [npm-image]: https://img.shields.io/npm/v/electron-react-boilerplate.svg?style=flat-square [npm-url]: https://npmjs.org/package/electron-react-boilerplate [travis-image]: https://travis-ci.org/chentsulin/electron-react-boilerplate.svg?branch=master [travis-url]: https://travis-ci.org/chentsulin/electron-react-boilerplate [david_img]: https://img.shields.io/david/chentsulin/electron-react-boilerplate.svg [david_site]: https://david-dm.org/chentsulin/electron-react-boilerplate

	Stars	Issues	Version	Updated	Created
create-react-app	102,547	2,243	5.0.1	2 years ago	8 years ago
electron-react-boilerplate	23,140	151	0.10.0	8 years ago	9 years ago
generator-react-webpack	2,874	43	3.3.4	8 years ago	11 years ago
vite	67,279	629	5.4.6	3 days ago	4 years ago

create-react-app vs electron-react-boilerplate vs generator-react-webpack vs vite

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past