Initial work on react.

Far from done.
Far from working.
Requires rewrite of UI logic using react patterns.

assets/scripts/uicore.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import $ from 'jquery'
 import { ipcRenderer, remote, shell, webFrame } from 'electron'
 import { LoggerUtil } from '../loggerutil'
@@ -107,7 +108,7 @@ function changeAllowPrerelease(val){
 
 function showUpdateUI(info){
     //TODO Make this message a bit more informative `${info.version}`
-    document.getElementById('image_seal_container').setAttribute('update', true)
+    document.getElementById('image_seal_container').setAttribute('update', 'true')
     document.getElementById('image_seal_container').onclick = () => {
         /*setOverlayContent('Update Available', 'A new update for the launcher is available. Would you like to install now?', 'Install', 'Later')
         setOverlayHandler(() => {
@@ -138,6 +139,7 @@ document.addEventListener('readystatechange', function () {
         loggerUICore.log('UICore Initializing..')
 
         // Bind close button.
+        // DONE
         Array.from(document.getElementsByClassName('fCb')).map((val) => {
             val.addEventListener('click', e => {
                 const window = remote.getCurrentWindow()
@@ -146,6 +148,7 @@ document.addEventListener('readystatechange', function () {
         })
 
         // Bind restore down button.
+        // DONE
         Array.from(document.getElementsByClassName('fRb')).map((val) => {
             val.addEventListener('click', e => {
                 const window = remote.getCurrentWindow()
@@ -154,23 +157,24 @@ document.addEventListener('readystatechange', function () {
                 } else {
                     window.maximize()
                 }
-                document.activeElement.blur()
+                (document.activeElement as HTMLElement).blur()
             })
         })
 
         // Bind minimize button.
+        // DONE
         Array.from(document.getElementsByClassName('fMb')).map((val) => {
             val.addEventListener('click', e => {
                 const window = remote.getCurrentWindow()
-                window.minimize()
+                window.minimize();
-                document.activeElement.blur()
+                (document.activeElement as HTMLElement).blur()
             })
         })
 
         // Remove focus from social media buttons once they're clicked.
         Array.from(document.getElementsByClassName('mediaURL')).map(val => {
             val.addEventListener('click', e => {
-                document.activeElement.blur()
+                (document.activeElement as HTMLElement).blur()
             })
         })
 
@@ -184,10 +188,10 @@ document.addEventListener('readystatechange', function () {
         //const targetWidth2 = document.getElementById("server_selection").getBoundingClientRect().width
         //const targetWidth3 = document.getElementById("launch_button").getBoundingClientRect().width
 
-        document.getElementById('launch_details').style.maxWidth = 266.01
+        document.getElementById('launch_details').style.maxWidth = '266.01'
-        document.getElementById('launch_progress').style.width = 170.8
+        document.getElementById('launch_progress').style.width = '170.8'
-        document.getElementById('launch_details_right').style.maxWidth = 170.8
+        document.getElementById('launch_details_right').style.maxWidth = '170.8'
-        document.getElementById('launch_progress_label').style.width = 53.21
+        document.getElementById('launch_progress_label').style.width = '53.21'
         
     }
 
@@ -209,6 +213,6 @@ $(document).on('click', 'a[href^="http"]', function(event) {
 document.addEventListener('keydown', function (e) {
     if((e.key === 'I' || e.key === 'i') && e.ctrlKey && e.shiftKey){
         let window = remote.getCurrentWindow()
-        window.toggleDevTools()
+        window.webContents.toggleDevTools()
     }
 })

package.json

@@ -10,54 +10,86 @@
     "url": "https://github.com/dscalzi/HeliosLauncher/issues"
   },
   "private": true,
-  "main": "out/index.js",
+  "main": "./dist/main.js",
   "scripts": {
-    "clean": "rimraf out",
+    "clean": "rimraf dist",
     "tsc": "tsc",
-    "build": "npm run clean && npm run tsc",
     "start": "electron .",
     "cilinux": "node build.js WINDOWS && node build.js LINUX",
     "cidarwin": "node build.js MAC",
-    "dist": "cross-env ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=true node build.js",
     "dist:win": "npm run dist -- WINDOWS",
     "dist:mac": "npm run dist -- MAC",
     "dist:linux": "npm run dist -- LINUX",
-    "lint": "eslint --config .eslintrc.json ."
+    "lint": "eslint --ext=jsx,js,tsx,ts src",
+    "build-main": "cross-env NODE_ENV=production webpack --config webpack.main.prod.config.js",
+    "build-renderer": "cross-env NODE_ENV=production webpack --config webpack.renderer.prod.config.js",
+    "build": "npm run build-main && npm run build-renderer",
+    "start-renderer-dev": "webpack-dev-server --config webpack.renderer.dev.config.js",
+    "start-main-dev": "webpack --config webpack.main.config.js && electron ./dist/main.js",
+    "start-dev": "cross-env START_HOT=1 npm run start-renderer-dev",
+    "pack": "npm run build && cross-env ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=true node build.js --dir",
+    "dist": "npm run build && cross-env ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=true node build.js",
+    "postinstall": "electron-builder install-app-deps"
   },
   "engines": {
     "node": "12.x.x"
   },
   "dependencies": {
-    "adm-zip": "^0.4.13",
+    "adm-zip": "^0.4.14",
-    "async": "^3.1.1",
+    "async": "^3.2.0",
     "discord-rpc": "3.1.0",
-    "ejs": "^3.0.1",
+    "electron-updater": "^4.2.4",
-    "ejs-electron": "^2.0.3",
-    "electron-updater": "^4.2.0",
     "fs-extra": "^8.1.0",
     "github-syntax-dark": "^0.5.0",
     "jquery": "^3.4.1",
-    "request": "^2.88.0",
+    "request": "^2.88.2",
-    "semver": "^7.1.1",
+    "semver": "^7.1.3",
     "tar-fs": "^2.0.0",
     "winreg": "^1.2.4"
   },
   "devDependencies": {
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/polyfill": "^7.8.7",
+    "@babel/preset-env": "^7.8.7",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
     "@types/adm-zip": "^0.4.32",
-    "@types/async": "^3.0.5",
+    "@types/async": "^3.0.8",
     "@types/discord-rpc": "^3.0.2",
-    "@types/fs-extra": "^8.0.1",
+    "@types/fs-extra": "^8.1.0",
-    "@types/jquery": "^3.3.31",
+    "@types/jquery": "^3.3.33",
-    "@types/node": "^12.12.25",
+    "@types/node": "^12.12.29",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-redux": "^7.1.7",
     "@types/request": "^2.48.4",
     "@types/tar-fs": "^1.16.2",
     "@types/winreg": "^1.2.30",
-    "cross-env": "^7.0.0",
+    "babel-loader": "^8.0.6",
-    "electron": "^7.1.10",
+    "cross-env": "^7.0.2",
-    "electron-builder": "^22.2.0",
+    "css-loader": "^3.4.2",
+    "electron": "^7.1.14",
+    "electron-builder": "^22.4.0",
+    "electron-devtools-installer": "^2.2.4",
     "eslint": "^6.8.0",
+    "fork-ts-checker-webpack-plugin": "^4.0.5",
     "helios-distribution-types": "1.0.0-pre.1",
-    "rimraf": "^3.0.0"
+    "html-webpack-plugin": "^3.2.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-hot-loader": "^4.12.19",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
+    "rimraf": "^3.0.2",
+    "source-map-loader": "^0.2.4",
+    "style-loader": "^1.1.3",
+    "typescript": "^3.8.3",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^4.2.2"
   },
   "repository": {
     "type": "git",

src/main/main.ts

@@ -6,7 +6,15 @@ import { format } from "url"
 import { autoUpdater } from 'electron-updater'
 import isdev from "./isdev"
 
-const ejse = require('ejs-electron')
+const installExtensions = async () => {
+    const installer = require('electron-devtools-installer');
+    const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
+    const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];
+
+    return Promise.all(
+        extensions.map(name => installer.default(installer[name], forceDownload))
+    ).catch(console.log); // eslint-disable-line no-console
+};
 
 // Setup auto updater.
 function initAutoUpdater(event: any, data: any) {
@@ -89,7 +97,11 @@ app.disableHardwareAcceleration()
 // be closed automatically when the JavaScript object is garbage collected.
 let win: BrowserWindow | null
 
-function createWindow() {
+async function createWindow() {
+
+    if (process.env.NODE_ENV !== 'production') {
+        await installExtensions();
+    }
 
     win = new BrowserWindow({
         width: 980,
@@ -104,10 +116,10 @@ function createWindow() {
         backgroundColor: '#171614'
     })
 
-    ejse.data('bkid', Math.floor((Math.random() * readdirSync(join(__dirname, '..', 'assets', 'images', 'backgrounds')).length)))
+    // ejse.data('bkid', Math.floor((Math.random() * readdirSync(join(__dirname, '..', 'assets', 'images', 'backgrounds')).length)))
 
     win.loadURL(format({
-        pathname: join(__dirname, '..', 'assets', 'templates', 'app.ejs'),
+        pathname: join(__dirname, 'index.html'),
         protocol: 'file:',
         slashes: true
     }))
@@ -120,6 +132,13 @@ function createWindow() {
 
     win.resizable = true
 
+    if (process.env.NODE_ENV !== 'production') {
+        // Open DevTools, see https://github.com/electron/electron/issues/12438 for why we wait for dom-ready
+        win.webContents.once('dom-ready', () => {
+            win!.webContents.openDevTools();
+        });
+    }
+
     win.on('closed', () => {
         win = null
     })

src/renderer/app.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+
+import Application from './components/Application';
+
+// Create main element
+const mainElement = document.createElement('div');
+document.body.appendChild(mainElement);
+
+// Render components
+const render = (Component: () => JSX.Element) => {
+    ReactDOM.render(
+        <AppContainer>
+            <Component />
+        </AppContainer>,
+        mainElement
+    );
+};
+
+render(Application);

src/renderer/components/Application.tsx

@@ -0,0 +1,14 @@
+import { hot } from 'react-hot-loader/root';
+import * as React from 'react';
+import Frame from './Frame';
+
+const Application = () => (
+    <>
+    <Frame />
+    <div>
+        Hello World from Electron!
+    </div>
+    </>
+);
+
+export default hot(Application);

src/renderer/components/Frame.css

@@ -0,0 +1,151 @@
+/* Frame Bar */
+#frameBar {
+    position: relative;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    transition: background-color 1s ease;
+    /*background-color: rgba(0, 0, 0, 0.5);*/
+    -webkit-user-select: none;
+}
+
+/* Undraggable region on the top of the frame. */
+#frameResizableTop {
+    height: 2px;
+    width: 100%;
+    -webkit-app-region: no-drag;
+}
+
+/* Flexbox to wrap the main frame content. */
+#frameMain {
+    display: flex;
+    height: 20px
+}
+
+/* Undraggable region on the left and right of the frame. */
+.frameResizableVert {
+    width: 2px;
+    -webkit-app-region: no-drag;
+}
+
+/* Main frame content for windows. */
+#frameContentWin {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    -webkit-app-region: drag;
+}
+
+/* Main frame content for darwin. */
+#frameContentDarwin {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    -webkit-app-region: drag;
+}
+
+/* Frame logo (windows only). */
+#frameTitleDock {
+    padding: 0px 10px;
+}
+#frameTitleText {
+    font-size: 14px;
+    font-family: 'Avenir Medium';
+    letter-spacing: 0.5px;
+}
+
+/* Windows frame button dock. */
+#frameButtonDockWin {
+    -webkit-app-region: no-drag !important;
+    position: relative;
+    top: -2px;
+    right: -2px;
+    height: 22px;
+}
+#frameButtonDockWin > .frameButton:not(:first-child) {
+    margin-left: -4px;
+}
+
+/* Darwin frame button dock: NaN; */
+#frameButtonDockDarwin {
+    -webkit-app-region: no-drag !important;
+    position: relative;
+    top: -1px;
+    right: -1px;
+}
+
+/* Windows Frame Button Styles. */
+.frameButton {
+    background: none;
+    border: none;
+    height: 22px;
+    width: 39px;
+    cursor: pointer;
+}
+.frameButton:hover,
+.frameButton:focus {
+    background: rgba(189, 189, 189, 0.43);
+}
+.frameButton:active {
+    background: rgba(156, 156, 156, 0.43);
+}
+.frameButton:focus {
+    outline: 0px;
+}
+
+/* Close button is red. */
+#frameButton_close:hover,
+#frameButton_close:focus {
+    background: rgba(255, 53, 53, 0.61) !important;
+}
+#frameButton_close:active {
+    background: rgba(235, 0, 0, 0.61) !important;
+}
+
+/* Darwin Frame Button Styles. */
+.frameButtonDarwin {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    border: 0px;
+    margin-left: 5px;
+    -webkit-app-region: no-drag !important;
+    cursor: pointer;
+}
+.frameButtonDarwin:focus {
+    outline: 0px;
+}
+
+#frameButtonDarwin_close {
+    background-color: #e74c32;
+}
+#frameButtonDarwin_close:hover,
+#frameButtonDarwin_close:focus {
+    background-color: #FF9A8A;
+}
+#frameButtonDarwin_close:active {
+    background-color: #ff8d7b;
+}
+
+#frameButtonDarwin_minimize {
+    background-color: #fed045;
+}
+#frameButtonDarwin_minimize:hover,
+#frameButtonDarwin_minimize:focus {
+    background-color: #FFE9A9;
+}
+#frameButtonDarwin_minimize:active {
+    background-color: #ffde7b;
+}
+
+#frameButtonDarwin_restoredown {
+    background-color: #96e734;
+}
+#frameButtonDarwin_restoredown:hover,
+#frameButtonDarwin_restoredown:focus {
+    background-color: #D6FFA6;
+}
+#frameButtonDarwin_restoredown:active {
+    background-color: #bfff76;
+}

src/renderer/components/Frame.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { remote } from 'electron';
+import './Frame.css';
+
+require('./Frame.css')
+
+function closeHandler() {
+    const window = remote.getCurrentWindow();
+    window.close();
+}
+
+function restoreDownHandler() {
+    const window = remote.getCurrentWindow()
+    if(window.isMaximized()){
+        window.unmaximize()
+    } else {
+        window.maximize()
+    }
+    (document.activeElement as HTMLElement).blur()
+}
+
+function minimizeHandler() {
+    const window = remote.getCurrentWindow()
+    window.minimize();
+    (document.activeElement as HTMLElement).blur()
+}
+
+const Frame = () => (
+    <div id="frameBar">
+    <div id="frameResizableTop" className="frameDragPadder"></div>
+    <div id="frameMain">
+        <div className="frameResizableVert frameDragPadder"></div>
+        { process.platform === 'darwin' ?
+            <div id="frameContentDarwin">
+                <div id="frameButtonDockDarwin">
+                    <button className="frameButtonDarwin" onClick={closeHandler} id="frameButtonDarwin_close" tabIndex={-1}></button>
+                    <button className="frameButtonDarwin" onClick={minimizeHandler} id="frameButtonDarwin_minimize" tabIndex={-1}></button>
+                    <button className="frameButtonDarwin" onClick={restoreDownHandler} id="frameButtonDarwin_restoredown" tabIndex={-1}></button>
+                </div>
+            </div>
+        : 
+            <div id="frameContentWin">
+                <div id="frameTitleDock">
+                    <span id="frameTitleText">Helios Launcher</span>
+                </div>
+                <div id="frameButtonDockWin">
+                    <button className="frameButton" onClick={minimizeHandler} id="frameButton_minimize" tabIndex={-1}>
+                        <svg name="TitleBarMinimize" width="10" height="10" viewBox="0 0 12 12"><rect stroke="#ffffff" fill="#ffffff" width="10" height="1" x="1" y="6"></rect></svg>
+                    </button>
+                    <button className="frameButton" onClick={restoreDownHandler} id="frameButton_restoredown" tabIndex={-1}>
+                        <svg name="TitleBarMaximize" width="10" height="10" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="#ffffff" stroke-width="1.4px"></rect></svg>
+                    </button>
+                    <button className="frameButton" onClick={closeHandler} id="frameButton_close" tabIndex={-1}>
+                        <svg name="TitleBarClose" width="10" height="10" viewBox="0 0 12 12"><polygon stroke="#ffffff" fill="#ffffff" fill-rule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
+                    </button>
+                </div>
+            </div>
+        }
+        <div className="frameResizableVert frameDragPadder"></div>
+    </div>
+</div>
+);
+
+export default Frame;

tsconfig.json

@@ -4,23 +4,25 @@
     "target": "ES2019",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     "lib": [                                  /* Specify library files to be included in the compilation. */
-      "ES2019",
+      "DOM",
-      "dom"
+      "ES2019"
     ],
     "allowJs": true,                          /* Allow javascript files to be compiled. */
+    "jsx": "react",
     // "checkJs": true,                       /* Report errors in .js files. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    "sourceMap": false,                        /* Generates corresponding '.map' file. */
+    "sourceMap": true,                        /* Generates corresponding '.map' file. */
-    "outDir": "out",                          /* Redirect output structure to the directory. */
+    "outDir": "dist",                         /* Redirect output structure to the directory. */
-    "baseUrl": ".",                           /* Base directory to resolve non-absolute module names. */
+    "strict": true,
+    // "baseUrl": ".",                           /* Base directory to resolve non-absolute module names. */
     // "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     //   "*": ["node_modules/*"]
     // },
     "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
   },
   "include": [
-    "src/**/*"
+    "./src"
   ],
   "exclude": [ "node_modules" ]
 }

webpack.base.config.js

@@ -0,0 +1,21 @@
+'use strict'
+
+const path = require('path')
+
+module.exports = {
+    mode: 'development',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].js'
+    },
+    node: {
+        __dirname: false,
+        __filename: false
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js', '.json']
+    },
+    devtool: 'source-map',
+    plugins: [
+    ]
+}

webpack.main.config.js

@@ -0,0 +1,43 @@
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+
+const baseConfig = require('./webpack.base.config')
+
+module.exports = merge.smart(baseConfig, {
+    target: 'electron-main',
+    entry: {
+        main: './src/main/main.ts'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                options: {
+                    cacheDirectory: true,
+                    babelrc: false,
+                    presets: [
+                        [
+                            '@babel/preset-env',
+                            { targets: 'maintained node versions' }
+                        ],
+                        '@babel/preset-typescript'
+                    ],
+                    plugins: [
+                        ['@babel/plugin-proposal-class-properties', { loose: true }]
+                    ]
+                }
+            }
+        ]
+    },
+    plugins: [
+        new ForkTsCheckerWebpackPlugin({
+            reportFiles: ['src/main/**/*']
+        }),
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+        })
+    ]
+})

webpack.main.prod.config.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge')
+
+const baseConfig = require('./webpack.main.config')
+
+module.exports = merge.smart(baseConfig, {
+    mode: 'production'
+})

webpack.renderer.config.js

@@ -0,0 +1,73 @@
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+
+const baseConfig = require('./webpack.base.config')
+
+module.exports = merge.smart(baseConfig, {
+    target: 'electron-renderer',
+    entry: {
+        app: ['@babel/polyfill','./src/renderer/app.tsx']
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                options: {
+                    cacheDirectory: true,
+                    babelrc: false,
+                    presets: [
+                        [
+                            '@babel/preset-env',
+                            { targets: { browsers: 'last 2 versions ' } }
+                        ],
+                        '@babel/preset-typescript',
+                        '@babel/preset-react'
+                    ],
+                    plugins: [
+                        ['@babel/plugin-proposal-class-properties', { loose: true }]
+                    ]
+                }
+            },
+            {
+                test: /\.scss$/,
+                loaders: ['style-loader', 'css-loader', 'sass-loader']
+            },
+            {
+                test: /\.css$/,
+                loaders: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.(gif|png|jpe?g|svg)$/,
+                use: [
+                    'file-loader',
+                    {
+                        loader: 'image-webpack-loader',
+                        options: {
+                            disable: true
+                        }
+                    }
+                ]
+            },
+            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader'
+            }
+        ]
+    },
+    plugins: [
+        new ForkTsCheckerWebpackPlugin({
+            reportFiles: ['src/renderer/**/*']
+        }),
+        new webpack.NamedModulesPlugin(),
+        new HtmlWebpackPlugin(),
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+        })
+    ]
+})

webpack.renderer.dev.config.js

@@ -0,0 +1,32 @@
+const merge = require('webpack-merge')
+const spawn = require('child_process').spawn
+
+const baseConfig = require('./webpack.renderer.config')
+
+module.exports = merge.smart(baseConfig, {
+    devServer: {
+        port: 2003,
+        compress: true,
+        noInfo: true,
+        stats: 'errors-only',
+        inline: true,
+        hot: true,
+        headers: { 'Access-Control-Allow-Origin': '*' },
+        historyApiFallback: {
+            verbose: true,
+            disableDotRule: false
+        },
+        before() {
+            if (process.env.START_HOT) {
+                console.log('Starting main process')
+                spawn('npm', ['run', 'start-main-dev'], {
+                    shell: true,
+                    env: process.env,
+                    stdio: 'inherit'
+                })
+                    .on('close', code => process.exit(code))
+                    .on('error', spawnError => console.error(spawnError))
+            }
+        }
+    }
+})

webpack.renderer.prod.config.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge')
+
+const baseConfig = require('./webpack.renderer.config')
+
+module.exports = merge.smart(baseConfig, {
+    mode: 'production'
+})