electron-react-sagas-starter

An actual work from chentsulin/electron-react-boilerplate + sagas, immutable and stateless components

Application boilerplate based on

• Electron
• React
• Webpack 2
• Redux
• React Router
• Flow
• ESLint
• Jest
• Yarn
• React Transform HMR
• Apisauce
• Redux Saga
• Immutable
• css-modules

Install

• Note: requires a node version >= 6 and an npm version >= 3.

First, clone the repo via git:

git clone --depth=1 https://github.com/Liftitapp/electron-react-sagas-starter.git your-project-name

And then install dependencies. ProTip: Install with yarn for faster and safer installation:

$ cd your-project-name && npm install

Run

Start the app in the dev environment. This starts the renderer process in hot-module-replacement mode and starts a server sends hot updates to the renderer process:

$ npm run dev

You Run these two commands simultaneously in different console tabs:

$ npm run hot-updates-server
$ npm run start-hot-renderer

Editor Configuration

Atom

apm install editorconfig es6-javascript atom-ternjs javascript-snippets linter linter-eslint language-babel autocomplete-modules file-icons

VSCode

• Editorconfig
• ESLint
• Flow
• Babel
• Jest
• ES6 Snippets
• React Snippets 💡 If you are using the flow-for-vscode plugin, make sure to disable the flowtype-errors/show-errors eslint rule in the .eslintrc by setting it to 0

Sublime

• Editorconfig Integration
• Linting
• ESLint Integration
• Syntax Highlighting
• Autocompletion
• Node Snippets
• ES6 Snippets

Others

• Editorconfig
• ESLint
• Babel Syntax Plugin

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 for more information.

DevTools extension

This boilerplate is included following DevTools extensions:

• Devtron - Install via electron-debug.
• React Developer Tools - Install via electron-devtools-installer.
• Redux DevTools - Install via electron-devtools-installer.

You can find the tabs on Chrome DevTools.

If you want to update extensions version, please set UPGRADE_EXTENSIONS env, just run:

$ UPGRADE_EXTENSIONS=1 npm run dev

# For Windows
$ set UPGRADE_EXTENSIONS=1 && npm run dev

💡 You can debug your production build with devtools by simply setting the DEBUG_PROD env variable:

DEBUG_PROD=true npm run package

Sass support

If you want to use Sass in your app, you only need to import .sass files instead of .css once:

import './app.global.scss';

Packaging

To package apps for the local platform:

$ npm run package

To package apps for all platforms:

First, refer to Multi Platform Build for dependencies.

Then,

$ npm run package-all

To package apps with options:

$ npm run package -- --[option]

Further commands

To run the application without packaging run

$ npm run build
$ npm start

To run End-to-End Test

$ npm run build
$ npm run test-e2e

Missing work...

1. Clean up lint
2. Improve eslint config
3. Saga testing missing

License

MIT ©