Typescript - React - Redux - Electron Boilerplate

https://blog.dcpos.ch/how-to-make-your-electron-app-sexy

Boilerplate project for building an electron app using React, Redux, Electron and Typescript.

Contents

• Features
• Install
• Run
• Code Organization
• CSS
• Adding Type Definitions
• Testing
• Packaging
• Linting

Features

• Hot module reloading
• Installers built using electron-builder
• CI integration with travis and appveyor
• Unit testing with mocha / chai / enzyme
• React / Redux / Electron devtools
• linting with tslint and stylelint

Install

Clone the repo and install deps:

$ git clone https://github.com/xwvvvvwx/typescript-react-electron-boilerplate.git your-project-name
$ cd your-project-name && npm install

Run

Run these two commands simultaneously in separate console tabs.

$ npm run server
$ npm start

Notes

• Uses webpack
• Hot Module Replacement with vanilla HMR (see Hot Reloading In React for details on trade offs)
• Typescript code is processed with awesome-typescript-loader
• Redux / React devtools are automatically installed with electron-devtools-installer
• Electron devtools (devtron) automatically installed with electron-debug
• Notifications of failed builds using webpack-notifier

Code organization

• Uses the two package.json strucure recomened by electron-builder
• src/ contains sourcecode. This source is passed through webpack to generate the actual application.
• app/ contains static resources (main.js and package.json) as well as webpack build artifacts (bundle.js, index.html)
• install-resources/ contains images / resources for the installers
• Application entry point is app/main.js
• This loads app/index.html (generated by webpack)
• This calls src/index.tsx (generates store / handles HMR wrapping)
• This loads src/components/App.tsx (root component)
• Store is built from src/reducers/main.ts
• Modules can be imported using absolute paths (src is the root)

CSS

• CSS is processed with postcss
• The cssnext plugin is installed
• CSS has local scope (each component can have it's own CSS file)
• Global variables are defined in src/global-css-vars
• Global variables are passed to css files using postcss-simple-vars

Using CSS in a React Component

• Typescript gets upset if you try and import css files, so you can bypass the typechecker by using require instead

/* style.css */
.className {
    color: red;
}

/* component.tsx */
const styles = require('./styles.css')

const Component: React.StatelessComponent<{}>  = () => (
  <p className={styles.className}>
    Hello, world!
  </p>
)

Using a global var in a css file

• variables are prefixed with $

.className {
    font-family: $body-font
}

Installing new postcss plugins

1. install the plugin with npm
2. Require the plugin in webpack.config.js
3. Add the plugin to the list of postcss plugins in the webpack config

var plugin = require('post-css-plugin-name')

module.exports = {
  /*
  webpack config....
  */
  postcss: function () {
    return {
      plugins: [
        // add new plugins here
        plugin()
      ]
    };
  }
}

Adding type definitions

• Uses typescript 2
• Type definitions provided by a project are discovered automatically (e.g. redux)
• Community type definitions are installed with npm (see The Future of Type Definition Files)

To add a new type definition file run:

$ npm i -D @types/<PACKAGE_NAME>

Testing

Run tests:

$ npm run test
$ npm run test:watch

Writing Tests

• any file under src of the form *.spec.ts or *.spec.tsx will be executed
• Tests are run using mocha running on ts-node.
• Assertions can be written using chai.
• React components can be tested using enzyme.
• See actionCreators.spec.ts for examples of pure TS tests.
• See components/Todo/tests.spec.tsx for examples of react component testing.

Packaging

Package App

$ npm run build-mac
$ npm run build-linux
$ npm run build-win
$ npm run build

Notes

• Installers are output to the dist directory
• Installer config lives in the application package.json
• npm run build builds installer for the platform that it is executed from
• Uses Electron Builder
• Installers use Squirrel

Platforms

• On OSX a zip and dmg are generated
• On Windows a .exe installer is generated
• On Linux a deb and AppImage are generated

Linting

Lint Code

$ npm run lint

Notes

• Uses tslint for typescript
• Uses stylelint for css