Merge pull request #10 from jschr/feature/chrome-devtools

Add redux/react extension for chrome

Author: pronebird

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["es2015", "stage-0", "react"],
-  "plugins": ["transform-decorators-legacy"]
+  "plugins": ["transform-decorators-legacy", "transform-runtime"]
 }

app/client/actions/index.js

@@ -0,0 +1,5 @@
+import user from './user';
+
+export default { 
+  user
+};

app/client/containers/DevTools.js

@@ -2,27 +2,27 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { compose, createStore, combineReducers } from 'redux';
 import { Provider } from 'react-redux';
-import user from './reducers/user';
 import App from './containers/App';
-import DevTools from './containers/DevTools';
+import reducers from './reducers';
+import actionCreators from './actions';
 
 const initialState = {};
 
-const isDevelopment = process.env.NODE_ENV === 'development';
+const composeEnhancers = (() => {
+  const compose_ = window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
+  if(process.env.NODE_ENV === 'development' && compose_) {
+    return compose_({ actionCreators });
+  }
+  return compose;
+})();
 
-const enhancer = isDevelopment ? compose(
-  // Required! Enable Redux DevTools with the monitors you chose
-  DevTools.instrument()
-) : undefined;
-
-const store = createStore(combineReducers({ user }), initialState, enhancer);
+const store = createStore(combineReducers(reducers), initialState, composeEnhancers());
 const rootElement = document.querySelector(document.currentScript.getAttribute('data-container'));
 
 ReactDOM.render(
   <Provider store={store}>
     <div>
       <App />
-      { isDevelopment && <DevTools /> }
     </div>
   </Provider>,
   rootElement

app/client/main.js

@@ -0,0 +1,5 @@
+import user from './user';
+
+export default { 
+  user 
+};

app/client/reducers/index.js

@@ -2,9 +2,25 @@ import {app, crashReporter, BrowserWindow, Menu} from 'electron';
 import path from 'path';
 import url from 'url';
 
+const isDevelopment = (process.env.NODE_ENV === 'development');
+
 let mainWindow = null;
 let forceQuit = false;
 
+const installExtensions = async () => {
+  const installer = require('electron-devtools-installer');
+  const extensions = [
+    'REACT_DEVELOPER_TOOLS',
+    'REDUX_DEVTOOLS'
+  ];
+  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
+  for (const name of extensions) {
+    try {
+      await installer.default(installer[name], forceDownload);
+    } catch (e) {}
+  }
+};
+
 crashReporter.start({
   productName: 'YourName',
   companyName: 'YourCompany',
@@ -20,14 +36,19 @@ app.on('window-all-closed', () => {
   }
 });
 
-app.on('ready', () => {
+app.on('ready', async () => {
+  if (isDevelopment) {
+    await installExtensions();
+  }
+
   mainWindow = new BrowserWindow({ 
     width: 1000, 
     height: 800,
     minWidth: 640,
     minHeight: 480,
     show: false 
   });
+
   mainWindow.loadURL(url.format({
     pathname: path.join(__dirname, 'client/index.html'),
     protocol: 'file:',
@@ -64,7 +85,7 @@ app.on('ready', () => {
     }
   });
 
-  if (process.env.NODE_ENV === 'development') {
+  if (isDevelopment) {
     // auto-open dev tools
     mainWindow.webContents.openDevTools();
 

app/main.js

@@ -7,26 +7,27 @@
   "repository": "https://github.com/jschr/electron-react-redux-boilerplate",
   "license": "MIT",
   "dependencies": {
+    "electron-compile": "^5.1.3",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-redux": "^5.0.2",
     "redux": "^3.0.0",
-    "redux-actions": "^1.2.1",
-    "electron-compile": "^5.1.3",
-    "redux-devtools": "^3.3.2"
+    "redux-actions": "^1.2.1"
   },
   "devDependencies": {
     "babel-cli": "^6.22.2",
     "babel-core": "^6.2.1",
     "babel-eslint": "^7.1.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-react": "^6.22.0",
     "babel-preset-stage-0": "^6.1.18",
     "browser-sync": "^2.9.3",
     "chai": "^3.4.1",
     "electron": "^1.5.0",
     "electron-compilers": "^5.1.3",
+    "electron-devtools-installer": "^2.1.0",
     "electron-packager": "^8.5.1",
     "eslint": "^3.14.1",
     "eslint-config-airbnb": "^14.0.0",