electron create react app.md

create-react-app appname
cd addname
yarn add --dev concurrently wait-on electron
yarn add electron-is-dev

package.json

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "concurrently": "^3.4.0",
    "electron": "^1.6.1",
    "electron-packager": "^8.5.2",
    "react-scripts": "0.9.3",
    "wait-on": "^2.0.2"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "main": "main.js",
  "homepage": "./",
  "scripts": {
    "react-start": "react-scripts start",
    "electron-start": "electron .",
    "start": "concurrently 'yarn react-start' 'wait-on http://localhost:3000/ && yarn electron-start'",
    "react-build": "react-scripts build",
    "electron-build": "electron-packager ./ --overwrite",
    "build": "yarn react-build && yarn electron-build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

add script "dev": "concurrently \"yarn react-start\" \"wait-on http://localhost:3000/ && yarn electron-start\"",
add "homepage": "./"
add "main": "public/main/index.js"
add file .env BROWSER=none
add react-app-rewired
change scripts to use react-app-rewired react-start: react-app-rewired start
add config-overrides.js file to root

module.exports = function override(config, env) {
    config.target = 'electron-renderer';
    return config;
}

yarn add babel-register babel-preset-electron
run babel on main process create file start.js

'use strict'
require('babel-register')({
  "presets": ["electron"]
});
require('./index');

use piping to reload main process on the fly

create dev.js file

if (!require('piping')()) { return; }

const electron = require('electron')
const proc = require('child_process')
const child = proc.spawn(electron, process.argv.slice(2), {stdio: 'inherit'})
child.on('close', function (code) { process.exit(code) })

"dev": "concurrently \"yarn react-start\" \"wait-on http://localhost:3000/ && yarn electron-dev\"",
"electron-dev": "node public/main/dev.js public/main/start.js",

add react dev tools
1. yarn add electron-devtools-installer
2. add import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer'; to top of main index.js
3. add this code to after the mainWindow is created
```
installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));
```
add electron builder yarn add electron-builder --dev package.json

"build": {
    "appId": "com.appDev.appName",
    "directories": {
      "buildResources": "public"
    }
  },
"scripts": {
  "pack": "build --em.main=build/electron.js",
  "release": "build --em.main=build/electron.js --publish=always"

add prettier yarn add --dev husky lint-staged prettier

"scripts": {
   "precommit": "lint-staged",

"lint-staged": {
   "src/**/*.{js,jsx,json,css}": [
     "prettier --single-quote --write",
     "git add"
   ]
},

hymm/electron create react app.md