Live editing development on desktop app

Electronapplication boilerplate based onReact,Redux,React Router,Webpack,React Transform HMRfor rapid application development

Screenshot

Install

First,clone the repo via git:

And then install dependencies.

Run

Run this two commandssimultaneouslyin different console tabs.

or run two servers with one command

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

Seeelectron-debugfor more information.

@L_403_15@

• All platforms: Ctrl+H

Seeredux-devtools-dock-monitorfor more information.

Redux Devtools Window

Now you can implement it usingremote-redux-devtoolswith aremote monitorby yourself.

Externals

If you use any 3rd party libraries which can't be built with webpack,you must list them in yourwebpack.config.base.js：

You can find those lines in the file.

CSS Modules

This boilerplate out of the Box is configured to usecss-modules.

All@H_301_168@.cssfile extensions will use css-modules unless it has@H_301_168@.global.css.

If you need global styles,stylesheets with@H_301_168@.global.csswill not go through the css-modules loader. e.g.@H_301_168@app.global.css

Package

To package apps for all platforms:

Options

• --name,-n: Application name (default: ElectronReact)
• --version,-v: Electron version (default: latest version)
• --asar,-a:asarsupport (default: false)
• --icon,-i: Application icon
• --all: pack for all platforms

Use@H_301_168@electron-packagerto pack your app with@H_301_168@--alloptions for darwin (osx),linux and win32 (windows) platform. After build,you will find them in@H_301_168@releasefolder. Otherwise,you will only find one for your os.

@H_301_168@test,@H_301_168@tools,245);">releasefolder and devDependencies in@H_301_168@package.jsonwill be ignored by default.

Default Ignore modules

We add some module's@H_301_168@peerDependenciesto ignore option as default for application size reduction.

• @H_301_168@babel-coreis required by@H_301_168@babel-loaderand its size is ~19 MB
• @H_301_168@node-libs-browseris required by@H_301_168@webpackand its size is ~3MB.

Note:If you want to use any above modules in runtime,for example:@H_301_168@require('babel/register'),you should move them from@H_301_168@devDependenciesto@H_301_168@dependencies.

Building windows apps from non-windows platforms

Please checkoutBuilding windows apps from non-windows platforms.

How hot-reloading works on Electron

We usewebpack-target-electron-rendererto provide a build target for electron renderer process. Read more informationhere.

Note: webpack >= 1.12.15 has built-in support for@H_301_168@electron-mainand@H_301_168@electron-renderertargets.

Native-like UI

If you want to have native-like User Interface (OS X El Capitan and Windows 10),react-desktopmay perfect suit for you.

Maintainers

• C. T. Lin
• Jhen-Jie Hong

License

MIT ©C. T. Lin