Electron Boilerplate

A minimalistic Electron boilerplate based on the official first-app tutorial. Enhanced with webpack support.

Included

Webpack + Babel-loader with presets:
- Env with stage-0 features
- Flow Type support
- Hot Module Reloading enabled
Simple app persistence using electron-store
Logfile support using electron-log
Packaging support: electron-builder
Test runner: Jest
e2e runner: Spectron + AVA
Code Coverage reporter: Codecov
ES Linting: ESLint using AirBnb style guide
Style Linting: stylelint
Install extensions using electron-devtools-installer

Setup

Install the latest Node JS and Yarn and simply run yarn or yarn install command in the project directory.

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"
    }
}

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