electron-react-boilerplate

https://www.npmjs.com/package/electron-react-boilerplate

Electron application boilerplate based on React,React Router,Webpack,React Hot Loader for rapid application development

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:

gitclonehttps://github.com/chentsulin/electron-react-boilerplate.gityour-project-name

And then install dependencies.

$cdyour-project-name&&npminstall

Run

Run this two commandssimultaneouslyin different console tabs.

$npmrunhot-server

$npmrunstart-hot

or run two servers with one command

$npmrundev

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.

Toggle Redux DevTools

• 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：

externals:[

//putyournode3rdpartylibrarieswhichcan'tbebuiltwithwebpackhere(MysqL,mongodb,andsoon..)

]

You can find those lines in the file.

CSS Modules

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

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

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

Package

$npmrunpackage

To package apps for all platforms:

$npmrunpackage-all

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

Useelectron-packagerto pack your app with--alloptions for darwin (osx),linux and win32 (windows) platform. After build,you will find them inreleasefolder. Otherwise,you will only find one for your os.

test,tools,245);">releasefolder and devDependencies inpackage.jsonwill be ignored by default.

Default Ignore modules

We add some module'speerDependenciesto ignore option as default for application size reduction.

• babel-coreis required bybabel-loaderand its size is ~19 MB
• node-libs-browseris required bywebpackand its size is ~3MB.

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

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 forelectron-mainandelectron-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