WhiteStormJS Electron Boilerplate

The essential framework for WhiteStormJS React-Electron development.

Included

• Example App based on WhiteStormJS's TypeScript boilerplate
• 
• whs.js with React integration
• Spector.js as a module.
• React with recomp ose utility and Redux support libraries:
  • React Router Redux
  • Electron Redux
  • Redux Undo
  • 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 Hot Loader
• Babel plugins:
  • Module Resolver
  • Regenerator Runtime support with Tranform Runtime
• Simple app persistence using electron-store
• Packaging support: electron-builder
• Test runner: Jest
• e2e runner: Spectron + EVA
• Enzyme
• Code Coverage reporter: Codecov
• ES Linting: ESLint using AirBnb style guide
• stylelint
• DevTools Add-Ons, including:
  • 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/react-electron-boilerplate

Local development

During development, run watch task:

yarn watch # compile new code changes and reloads the app

Alternatively, you can run watch task (npm: watch) in Visual Studio Code.

Then, in another terminal, launch Electron:

yarn dev # same as 'yarn start'

Alternatively, you can launch in Visual Studio Code in debug mode.

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

yarn prod

Enabling Spector.js (Dev Only)

1. Toggle Electron developer tools.
2. In console, execute script command:

   spector.displayUI()

Adding dependencies (libraries)

yarn add [package-name] --dev # for dev tools
yarn add [package-name] # for app

Merging from base project

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

Static Type Checker

yarn run 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.