Setup Devtools

.gitignore

@@ -9,7 +9,8 @@ extension_chrome/js/
 extension_chrome/css/
 extension_chrome.zip
 
-electron/js/
+electron/js/*
+!electron/js/main.js
 electron/dist
 electron/Comics Reader-linux-ia32
 

src/platform/electron/main.js → electron/js/main.js

@@ -3,6 +3,9 @@ const electron = require('electron');
 const windowStateKeeper = require('electron-window-state');
 const {app, session, BrowserWindow} = electron;
 
+const installExtension = require('electron-devtools-installer').default;
+const { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow;
@@ -23,16 +26,31 @@ function createWindow () {
 		icon: __dirname + '/Icon.ico',
 		darkTheme: true,
 		autoHideMenuBar: true,
-		titleBarStyle: 'hidden-inset'
+		titleBarStyle: 'hidden-inset',
+		webPreferences: {
+			webSecurity: false
+		}
 	});
 
 	// Let us register listeners on the window, so we can update the state
 	// automatically (the listeners will be removed when the window is closed)
 	// and restore the maximized or full screen state
 	mainWindowState.manage(mainWindow);
 
-	// and load the index.html of the app.
-	mainWindow.loadURL(`file://${app.getAppPath()}/index.html`);
+
+	if (process.env.NODE_ENV === 'development') {
+		// and load the index.html of the app.
+		mainWindow.loadURL('http://localhost:8080');
+
+		installExtension(REACT_DEVELOPER_TOOLS).then(() => {
+			installExtension(REDUX_DEVTOOLS).then(() => {
+				mainWindow.openDevTools();
+			});
+		});
+	} else {
+		// and load the index.html of the app.
+		mainWindow.loadURL(`file://${app.getAppPath()}/index.html`);
+	}
 
 	// Open the DevTools.
 	// mainWindow.webContents.openDevTools();

package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "product": "webpack --config webpack.product.config.js --progress --colors --watch",
     "dev": "webpack --config webpack.config.js --progress --colors --watch",
+    "dev:electron": "webpack-dev-server --content-base electron/ --inline --hot --colors",
     "zip": "zip extension_chrome.zip -r ./extension_chrome/ -x \"*/.*\""
   },
   "devDependencies": {
@@ -45,6 +46,7 @@
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2",
     "webpack-livereload-plugin": "^0.8.1"
   },
   "dependencies": {
@@ -68,6 +70,7 @@
     "react-router-redux": "^4.0.5",
     "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.5.2",
+    "redux-devtools-extension": "^1.0.0",
     "redux-logger": "^2.6.1",
     "redux-persist": "^4.0.0-alpha5",
     "redux-saga": "^0.11.1",

src/store/configureStore.js

@@ -6,20 +6,27 @@ import createLogger from 'redux-logger';
 import { history } from 'services';
 import { routerMiddleware } from 'react-router-redux';
 import { persistStore, autoRehydrate } from 'redux-persist';
+import { composeWithDevTools } from 'redux-devtools-extension';
 
 const logger = createLogger();
 
 export default function configureStore(initialState) {
 	const sagaMiddleware = createSagaMiddleware();
 
-	const createStoreWithMiddleware = applyMiddleware(
-		sagaMiddleware,
-		thunk,
-		logger,
-		routerMiddleware(history)
-	)(createStore);
+	const store = createStore(
+		reducer,
+		initialState,
+		composeWithDevTools(
+			applyMiddleware(
+				sagaMiddleware,
+				thunk,
+				logger,
+				routerMiddleware(history)
+			),
+			autoRehydrate()
+		)
+	);
 
-	const store = createStoreWithMiddleware(reducer, initialState, autoRehydrate());
 	persistStore(store);
 
 	store.runSaga = sagaMiddleware.run;

webpack.config.js

@@ -31,8 +31,7 @@ module.exports = [
 	Object.assign({}, baseConfig, {
 		name: 'electron',
 		entry: {
-			app:'./src/app.js',
-			main:'./src/platform/electron/main.js'
+			app:'./src/app.js'
 		},
 		output: {
 			path: path.join(__dirname, 'electron/js'),