Fixed issue with electron main pipeline

Procfile

@@ -0,0 +1,2 @@
+react: npm run react-start
+electron: npm run electron-start

config/webpack.dev.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  target: 'electron-main',
+  entry: './src/electron/main.ts',
+  devtool: 'cheap-module-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [{
+          loader: 'ts-loader',
+          options: {
+            compilerOptions: {
+              noEmit: false
+            }
+          }
+        }],
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js']
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, '../build/electron')
+  }
+};

package.json

@@ -2,21 +2,32 @@
   "name": "vott-react-typescript",
   "version": "0.1.0",
   "private": true,
+  "main": "build/electron/bundle.js",
   "dependencies": {
     "@types/jest": "23.3.9",
     "@types/node": "10.12.7",
     "@types/react": "16.7.6",
     "@types/react-dom": "16.0.9",
+    "@types/redux-logger": "^3.0.6",
+    "@types/redux-thunk": "^2.1.0",
+    "electron": "^3.0.9",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-redux": "^5.1.1",
     "react-scripts": "2.1.1",
-    "typescript": "3.1.6"
+    "redux": "^4.0.1",
+    "redux-immutable-state-invariant": "^2.1.0",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "nf start -p 3000",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "electron": "webpack --config ./config/webpack.dev.config.js && electron .",
+    "electron-start": "node src/electron/start",
+    "react-start": "react-scripts start"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -26,5 +37,12 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "foreman": "^3.0.1",
+    "ts-loader": "^5.3.0",
+    "typescript": "^3.1.6",
+    "webpack": "^4.19.1",
+    "webpack-cli": "^3.1.2"
+  }
 }

src/actions/actionTypes.ts

@@ -0,0 +1,2 @@
+export const TOGGLE_DEV_TOOLS_SUCCESS = 'TOGGLE_DEV_TOOLS_SUCCESS';
+export const OPEN_LOCAL_FOLDER_SUCCESS = 'OPEN_LOCAL_FOLDER_SUCCESS';

src/actions/menuActions.ts

@@ -0,0 +1,34 @@
+import * as ActionTypes from './actionTypes';
+
+function toggleDevToolsSuccess(menuItem: any) {
+    return { type: ActionTypes.TOGGLE_DEV_TOOLS_SUCCESS, menuItem };
+}
+
+function openLocalFolderSuccess(result: any) {
+    return { type: ActionTypes.OPEN_LOCAL_FOLDER_SUCCESS, result };
+}
+
+export function toggleDevTools(menuItem: any, browserWindow: any) {
+    return (dispatch) => {
+        if (menuItem.checked) {
+            browserWindow.webContents.openDevTools();
+        } else {
+            browserWindow.webContents.closeDevTools();
+        }
+
+        dispatch(toggleDevToolsSuccess(menuItem));
+    }
+}
+
+export function openLocalFolder(menuItem: any) {
+    return (dispatch) => {
+        const { dialog } = require('electron');
+        dialog.showOpenDialog({
+            title: 'Open Images Directory',
+            properties: ['openDirectory'],
+        },
+            (result: any) => {
+                dispatch(openLocalFolderSuccess(result));
+            });
+    };
+}

src/electron/main.ts

@@ -0,0 +1,59 @@
+import { app, BrowserWindow } from 'electron';
+import { Store } from 'redux';
+import path from 'path';
+import url from 'url';
+import createReduxStore from '../store/store';
+
+// 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: BrowserWindow;
+let store: Store;
+
+function createWindow() {
+    // Create the browser window.
+    store = createReduxStore();
+    mainWindow = new BrowserWindow({ width: 1024, height: 768 });
+
+    // and load the index.html of the app.
+    const startUrl = process.env.ELECTRON_START_URL || url.format({
+        pathname: path.join(__dirname, '/../build/index.html'),
+        protocol: 'file:',
+        slashes: true
+    });
+    mainWindow.loadURL(startUrl);
+    // Open the DevTools.
+    //mainWindow.webContents.openDevTools();
+
+    // Emitted when the window is closed.
+    mainWindow.on('closed', function () {
+        // Dereference the window object, usually you would store windows
+        // in an array if your app supports multi windows, this is the time
+        // when you should delete the corresponding element.
+        mainWindow = null
+    })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+    // On OS X it is common for applications and their menu bar
+    // to stay active until the user quits explicitly with Cmd + Q
+    if (process.platform !== 'darwin') {
+        app.quit()
+    }
+});
+
+app.on('activate', function () {
+    // On OS X it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (mainWindow === null) {
+        createWindow()
+    }
+});
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.

src/electron/start.js

@@ -0,0 +1,24 @@
+const net = require('net');
+const port = process.env.PORT ? (process.env.PORT - 100) : 3000;
+
+process.env.ELECTRON_START_URL = `http://localhost:${port}`;
+
+const client = new net.Socket();
+
+let startedElectron = false;
+const tryConnection = () => client.connect({ port: port }, () => {
+    client.end();
+    if (!startedElectron) {
+        console.log('starting electron');
+        startedElectron = true;
+        const exec = require('child_process').exec;
+        exec('npm run electron');
+    }
+}
+);
+
+tryConnection();
+
+client.on('error', (error) => {
+    setTimeout(tryConnection, 1000);
+});

src/reducers/index.ts

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import * as menu from './menuReducer';
+
+export default combineReducers({
+    menu: menu.menuReducer
+});

src/reducers/menuReducer.ts

@@ -0,0 +1,28 @@
+import * as ActionTypes from '../actions/actionTypes';
+
+export const menuReducer = (state = {}, action: any) => {
+    switch (action.type) {
+        case ActionTypes.TOGGLE_DEV_TOOLS_SUCCESS:
+            return (<any>Object).assign({}, state, { devToolsEnabled: action.menuItem.checked });
+        case ActionTypes.OPEN_LOCAL_FOLDER_SUCCESS:
+            return (<any>Object).assign({}, state, { openLocalFolder: true });
+        default:
+            return state;
+    }
+}
+
+function openLocalFolder(menuItem: any) {
+    const { dialog } = require('electron');
+    return dialog.showOpenDialog({
+        title: 'Open Images Directory',
+        properties: ['openDirectory']
+    });
+}
+
+function toggleDevTools(menuItem: any, browserWindow: any) {
+    if (menuItem.checked) {
+        browserWindow.webContents.openDevTools();
+    } else {
+        browserWindow.webContents.closeDevTools();
+    }
+}

src/store/store.ts

@@ -0,0 +1,13 @@
+import { createStore, applyMiddleware, Store } from 'redux';
+import rootReducer from '../reducers';
+import reduxImmutableStateInvarient from 'redux-immutable-state-invariant';
+import { createLogger } from 'redux-logger';
+import thunk from 'redux-thunk';
+
+export default function createReduxStore(initialState: any = undefined): Store {
+    return createStore(
+        rootReducer,
+        initialState,
+        applyMiddleware(thunk, reduxImmutableStateInvarient(), createLogger())
+    );
+};

tsconfig.json

@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": false,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node",