React Electron Boilerplate

The essential framework for React-Electron development.

Included

• Enhanced example App based on Redux's tutorial with data layer seperation:
  • Redux hydration from SQLite3 to Apollo GraphQL
  • ORM architecture with Sequelize
• React and Redux support libraries:
  • React Router Redux
  • Electron Redux
  • Redux Undo
  • Redux Saga
  • Reselect
• CSS-in-JS using Styled Components
• Webpack + Babel-loader with presets:
  • Env with stage-0 features
  • Flow Type support
  • Sass support
  • Hot Module Reloading enabled with React Refresh
• Babel plugins:
  • Module Resolver
  • Regenerator Runtime support with Tranform Runtime
• Simple app persistence using electron-store
• Logfile support using electron-log
• Packaging support: electron-builder
• Test runner: Jest
• e2e runner: Spectron + AVA
• Mocking and testing utilities
  • Enzyme
  • Redux Mock Store
  • Redux Saga Test Plan
  • Sequelize Mock
  • Mock Apollo Client
• Code Coverage reporter: Codecov
• ES Linting: ESLint using AirBnb style guide
• Style Linting: stylelint
• Install extensions using electron-devtools-installer, including:
  • React Developer Tools
  • Redux DevTools Extension

Setup

1. Clone the repository
2. Install the latest Node JS and Yarn and simply run yarn or yarn install command in the project directory.
3. git remote add base https://github.com/psychobolt/electron-boilerplate

Local development

During development, run watch task:

yarn start # compile new code changes and reloads the app

Alternatively, you can launch "Debug App" in Visual Studio Code in debugger.

Testing only with production code (watch and debug unnecessary):

yarn prod

Adding dependencies (libraries)

yarn add [package-name] --dev
yarn add [package-name]

For any packages you wish to include in the app build, install as a non-development dependency in src/package.json and specify it as externals in webpack config. Any native code included in src/package.json will be compiled for platform target during npm's postinstall.

Adding DevTools

Modify the file devtools.json. For example:

{
    "Redux DevTools": {
        "id": "lmhkpmbekcpmknklioeibfkpmmfibljd",
        "version": "2.17.0"
    }
}

Merging from base project

This project is a fork from psychobolt's electron-boilerplate. To fetch latest changes, git remote add base https://github.com/psychobolt/electron-boilerplate.git. On a clean working branch, git pull base master, and fix any conflicts before commit.

Static Type Checker

yarn flow

Some extensions such as in Visual Studio Code detect .flowconfig and run type checking in the editor.

Static Types

yarn flow # performs type checking on files

See official documentation for a usage guide.

Yarn will usually run postinstall for updating flowtype definitions when new packages are added. To manually update typed definitions yourself:

yarn flow-typed-install:dev # installs development flowtypes
yarn flow-typed-install:app # installs app flowtypes

See additional documentation for adding type definitions.

Lint

The watch task will automatically lint on file changes. However, you can invoke the linter directly:

yarn lint # runs linter to detect any style issues (CSS & JSS)

yarn lint:css # lint only CSS
yarn lint:css --fix # tries to fix CSS lint issues

yarn lint:js # lint only JS
yarn lint:js --fix # tries to fix CSS lint issues

See official documentation for a usage guide.

Test

yarn test # runs functional/unit tests using Jest
yarn test --coverage # with coverage
yarn test-e2e # run end-to-end tests. (build required)

Build

yarn build

For configuration details, see electron-builder.