added webpack dev server, slightly improved ui and render preview

configs/webpack.base.config.js

@@ -3,7 +3,6 @@ import ESLintPlugin from "eslint-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 export default {
-    mode: 'production',
     module: {
         rules: [
             {

configs/webpack.main.dev.config.babel.js

@@ -0,0 +1,11 @@
+import baseConfig from "./webpack.base.config.js";
+import {merge} from 'webpack-merge';
+
+export default merge(baseConfig, {
+  mode: 'development',
+  target: 'electron-main',
+  entry: './src/index.ts',
+  output: {
+    filename: '../index.build.js'
+  },
+});

configs/webpack.main.prod.config.babel.js

@@ -2,9 +2,10 @@ import baseConfig from "./webpack.base.config.js";
 import {merge} from 'webpack-merge';
 
 export default merge(baseConfig, {
+  mode: 'production',
   target: 'electron-main',
   entry: './src/index.ts',
   output: {
-    filename: 'index.js'
+    filename: '../index.build.js'
   },
 });

configs/webpack.renderer.dev.config.babel.js

@@ -0,0 +1,31 @@
+import baseConfig from "./webpack.base.config.js";
+import {merge} from 'webpack-merge';
+import { spawn } from 'child_process';
+
+const host = process.env.HOST || 'localhost';
+const port = process.env.PORT || 3000;
+
+export default merge(baseConfig, {
+  mode: 'development',
+  target: 'electron-renderer',
+  entry: './src/renderer.tsx',
+  output: {
+    filename: 'renderer.js',
+  },
+  devServer: {
+    compress: true,
+    hot: true,
+    host,
+    port,
+    onBeforeSetupMiddleware() {
+      console.log('Starting Main Process...');
+      spawn('npm', ['run', 'start:main'], {
+        shell: true,
+        env: process.env,
+        stdio: 'inherit',
+      })
+        .on('close', (code) => process.exit(code))
+        .on('error', (spawnError) => console.error(spawnError));
+    },
+  },
+});

configs/webpack.renderer.prod.config.babel.js

@@ -2,6 +2,7 @@ import baseConfig from "./webpack.base.config.js";
 import {merge} from 'webpack-merge';
 
 export default merge(baseConfig, {
+  mode: 'production',
   target: 'electron-renderer',
   entry: './src/renderer.tsx',
   output: {