Improve developer pleasure (#556)

* single command to run webpack and app

* added dev tools and custom store for development mode only

* fix linter issues

README.md

@@ -23,8 +23,7 @@ $ brew cask install hyperterm
 1. If you are running Linux, install "icnsutils", "graphicsmagick" and "xz-utils"
 2. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device
 3. Install the dependencies: `npm install`
-4. Build the code and watch for changes: `npm run dev`
+4. Build the code, watch for changes and run app: `npm run dev`
-5. In a new tab, start the application: `npm start`
 
 To make sure that your code works in the finished application, you can generate the binaries like that:
 

app/index.js

@@ -64,7 +64,7 @@ const url = 'file://' + resolve(
 
 console.log('electron will open', url);
 
-app.on('ready', () => {
+app.on('ready', () => installDevExtensions(isDev).then(() => {
   function createWindow(fn) {
     let cfg = plugins.getDecoratedConfig();
 
@@ -375,7 +375,9 @@ app.on('ready', () => {
 
   load();
   plugins.subscribe(load);
-});
+}).catch(err => {
+  console.error('Error while loading devtools extensions', err);
+}));
 
 function initSession(opts, fn) {
   fn(uuid.v4(), new Session(opts));
@@ -394,3 +396,18 @@ app.on('open-file', (event, path) => {
     app.windowCallback = callback;
   }
 });
+
+function installDevExtensions(isDev) {
+  if (!isDev) {
+    return Promise.resolve();
+  }
+  const installer = require('electron-devtools-installer'); // eslint-disable-line global-require
+
+  const extensions = [
+    'REACT_DEVELOPER_TOOLS',
+    'REDUX_DEVTOOLS'
+  ];
+  const forceDownload = Boolean(process.env.UPGRADE_EXTENSIONS);
+
+  return Promise.all(extensions.map(name => installer.default(installer[name], forceDownload)));
+}

lib/index.js

@@ -1,35 +1,24 @@
-import {createStore, applyMiddleware} from 'redux';
 import forceUpdate from 'react-deep-force-update';
 import {Provider} from 'react-redux';
 import React from 'react';
 import {render} from 'react-dom';
-import thunk from 'redux-thunk';
 import {webFrame} from 'electron';
 
 import rpc from './rpc';
 import {init} from './actions/index';
-import effects from './utils/effects';
 import * as config from './utils/config';
-import rootReducer from './reducers/index';
 import * as plugins from './utils/plugins';
 import * as uiActions from './actions/ui';
 import * as updaterActions from './actions/updater';
 import * as sessionActions from './actions/sessions';
 import HyperTermContainer from './containers/hyperterm';
 import {loadConfig, reloadConfig} from './actions/config';
+import configureStore from './store/configureStore';
 
 // Disable pinch zoom
 webFrame.setZoomLevelLimits(1, 1);
 
-const store_ = createStore(
+const store_ = configureStore();
-  rootReducer,
-  applyMiddleware(
-    thunk,
-    plugins.middleware,
-    thunk,
-    effects
-  )
-);
 
 window.__defineGetter__('store', () => store_);
 window.__defineGetter__('rpc', () => rpc);

lib/store/configure-store.dev.js

@@ -0,0 +1,29 @@
+import {createStore, applyMiddleware, compose} from 'redux';
+import thunk from 'redux-thunk';
+import createLogger from 'redux-logger';
+import rootReducer from '../reducers/index';
+import effects from '../utils/effects';
+import * as plugins from '../utils/plugins';
+
+export default () => {
+  const logger = createLogger({
+    level: 'info',
+    collapsed: true
+  });
+
+  const enhancer = compose(
+    applyMiddleware(
+      thunk,
+      plugins.middleware,
+      thunk,
+      effects,
+      logger
+    ),
+    window.devToolsExtension()
+  );
+
+  return createStore(
+    rootReducer,
+    enhancer
+  );
+};

lib/store/configure-store.js

@@ -0,0 +1,10 @@
+import configureStoreForProduction from './configureStore.prod';
+import configureStoreForDevelopment from './configureStore.dev';
+
+export default () => {
+  if (process.env.NODE_ENV === 'production') {
+    return configureStoreForProduction();
+  }
+
+  return configureStoreForDevelopment();
+};

lib/store/configure-store.prod.js

@@ -0,0 +1,16 @@
+import {createStore, applyMiddleware} from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../reducers/index';
+import effects from '../utils/effects';
+import * as plugins from '../utils/plugins';
+
+export default () =>
+  createStore(
+    rootReducer,
+    applyMiddleware(
+      thunk,
+      plugins.middleware,
+      thunk,
+      effects
+    )
+  );

package.json

@@ -38,6 +38,7 @@
     "babel-core": "^6.11.4",
     "babel-loader": "^6.2.4",
     "babel-preset-react": "^6.11.1",
+    "concurrently": "^2.2.0",
     "copy-webpack-plugin": "^3.0.1",
     "electron-builder": "^7.0.1",
     "electron": "1.4.0",
@@ -45,7 +46,8 @@
     "eslint-plugin-react": "^6.2.2",
     "husky": "^0.11.6",
     "webpack": "^2.1.0-beta.15",
-    "xo": "^0.16.0"
+    "xo": "^0.16.0",
+    "electron-devtools-installer": "^2.0.0"
   },
   "xo": {
     "extends": "xo-react",
@@ -102,6 +104,8 @@
   },
   "scripts": {
     "dev": "webpack --watch",
+    "dev": "concurrently --kill-others \"npm run dev-build\" \"npm run start\"",
+    "dev-build": "webpack --watch",
     "lint": "xo",
     "build": "NODE_ENV=production webpack",
     "test": "npm run lint && electron-mocha test/*",