Dev setup

.env

@@ -0,0 +1 @@
+DEV=true

Procfile

@@ -1,3 +1,3 @@
-tsc: npm run watch:tsc
-webpack: npm run watch:webpack
-electron: nodemon --exec "electron out/app.js"
+webpack-renderer: npm run watch:renderer
+webpack-main: npm run watch:main
+electron: nodemon --exec "electron ."

nodemon.json

@@ -1,5 +1,5 @@
 {
   "verbose": true,
-  "delay": 2500,
-  "ignore": [".git", "node_modules/**/*", "dist/**/*"]
+  "ignore": [".git", "node_modules/**/*"],
+  "watch": ["dist/app.js"]
 }

package.json

@@ -5,19 +5,20 @@
   "license": "BSD-3-Clause",
   "homepage": "https://github.com/wakatime/wakatime-desktop",
   "description": "The WakaTime desktop app.",
-  "main": "out/app.js",
+  "main": "dist/app.js",
   "scripts": {
-    "start": "electron out/app.js",
+    "dev": "npm run watch",
+    "start": "electron dist/app.js",
     "eslint": "eslint --ext ts --ext tsx .",
     "eslint:fix": "eslint --ext ts --ext tsx --fix .",
-    "build": "npm run build:clean && npm run build:production && npm run build:tsc",
-    "build:clean": "rimraf dist",
-    "build:tsc": "tsc",
-    "build:production": "webpack --mode production",
-    "build:dev": "webpack --mode development",
+    "build": "npm run build:clean && npm run build:renderer && npm run build:main",
+    "build:clean": "rimraf dist out",
+    "build:main": "webpack --config webpack.main.config.js --mode production",
+    "build:renderer": "webpack --config webpack.renderer.config.js --mode production",
+    "build:dev-renderer": "webpack --mode development --config webpack.renderer.config.js",
     "watch": "nf start",
-    "watch:tsc": "tsc --watch",
-    "watch:webpack": "webpack --mode development --watch --config webpack.config.js",
+    "watch:main": "webpack --mode development --watch --config webpack.main.config",
+    "watch:renderer": "webpack-dev-server --config webpack.renderer.config.js",
     "upgrade": "yarn upgrade --latest"
   },
   "repository": {
@@ -34,6 +35,7 @@
   "devDependencies": {
     "@types/node": "^12.6.8",
     "@types/react": "^16.8.23",
+    "@types/react-dom": "^16.8.5",
     "@types/react-redux": "^7.1.1",
     "@types/redux": "^3.6.0",
     "@typescript-eslint/eslint-plugin": "^1.13.0",
@@ -46,19 +48,22 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
+    "file-loader": "^4.1.0",
     "husky": "^3.0.1",
     "lint-staged": "^9.2.1",
     "nodemon": "^1.19.1",
     "prettier": "^1.18.2",
     "typescript": "^3.5.3",
     "typescript-eslint-parser": "^22.0.0",
     "uglifyjs-webpack-plugin": "^2.1.3",
-    "webpack-cli": "^3.3.6"
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
     "async-file": "^2.0.2",
     "electron": "^5.0.8",
     "foreman": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.1.0",
@@ -75,4 +80,4 @@
       ]
     }
   }
-}
+}

src/app.ts

@@ -1,6 +1,8 @@
 import * as electron from "electron";
+import { join } from "path";
 import EditorManager from "./editorManager";
 
+const isDev = process.env.DEV === "true";
 const { Menu, Tray } = electron;
 // Module to control application life.
 const { app } = electron;
@@ -17,10 +19,29 @@ function createWindow() {
   mainWindow = new BrowserWindow({ width: 800, height: 600 });
 
   // and load the index.html of the app.
-  mainWindow.loadURL(`file://${__dirname}/../html/index.html`);
+  console.log(`Starting in dev mode? ${isDev}`);
+  if (isDev) {
+    // Attempt to load window until successful
+    // This is cause webpack is launching during this in dev mode
+    const loadWin = async () => {
+      try {
+        mainWindow.loadURL("http://localhost:8080");
+      } catch (e) {
+        console.error("Unable to load page, waiting 500ms to retry...");
+        setTimeout(loadWin, 500);
+      }
+    };
+    setTimeout(loadWin, 500);
+  } else {
+    const indexHtmlPath = `file://${__dirname}/index.html`;
+    console.log("indexHTMLPATH", indexHtmlPath);
+    mainWindow.loadURL(indexHtmlPath);
+  }
 
   // Open the DevTools.
-  mainWindow.webContents.openDevTools();
+  if (isDev) {
+    mainWindow.webContents.openDevTools();
+  }
 
   // Emitted when the window is closed.
   mainWindow.on("closed", function() {

src/containers/index.tsx

@@ -1,15 +1,13 @@
 import * as React from "react";
-import ReactDom from "react-dom";
-import { Provider } from "react-redux";
-import { createStore } from "redux";
+import { render } from "react-dom";
+import imgPath from "../imgs/editor-icons/blender-128.png";
 
-const reducer = () => "TODO";
-const store = createStore(reducer);
 const div = document.getElementById("container");
 
-ReactDom.render(
-  <Provider store={store}>
-    <div>Hello World</div>
-  </Provider>,
+render(
+  <div>
+    Hello World
+    <img src={imgPath} alt="Test example of a png imported" />
+  </div>,
   div
 );

html/index.html → src/html/index.html

@@ -8,6 +8,5 @@
   </head>
   <body>
     <div id="container"></div>
-    <script src="../dist/main.js"></script>
   </body>
 </html>

typings/imags.d.ts

@@ -0,0 +1 @@
+declare module "*.png";

webpack.config.js → webpack.main.config.js

@@ -2,10 +2,14 @@ const path = require("path");
 
 module.exports = {
   devtool: "source-map",
-  entry: path.resolve(__dirname, "./src/containers/index.tsx"),
+  target: "electron-main",
+  entry: path.resolve(__dirname, "./src/app.ts"),
+  node: {
+    __dirname: false
+  },
   output: {
-    path: path.resolve(__dirname, "./dist"),
-    filename: "[name].js"
+    path: path.join(__dirname, "dist"),
+    filename: "app.js"
   },
   resolve: {
     // Add `.ts` and `.tsx` as a resolvable extension.
@@ -18,13 +22,11 @@ module.exports = {
         exclude: /node_modules/,
         use: [
           {
-            loader: "ts-loader",
-            options: {
-              configFile: "webpack.tsconfig.json"
-            }
+            loader: "ts-loader"
           }
         ]
       }
     ]
-  }
+  },
+  plugins: []
 };

webpack.renderer.config.js

@@ -0,0 +1,58 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const plugins = [
+  new HtmlWebpackPlugin({
+    template: path.resolve(__dirname, "src", "html", "index.html")
+  })
+];
+module.exports = {
+  devtool: "source-map",
+  target: process.env.DEV === "true" ? "web" : "electron-renderer",
+  entry: path.resolve(__dirname, "./src/containers/index.tsx"),
+  output: {
+    path: path.resolve(__dirname, "./dist"),
+    filename: "[name].js"
+  },
+  resolve: {
+    // Add `.ts` and `.tsx` as a resolvable extension.
+    extensions: [".ts", ".tsx", ".js"] // note if using webpack 1 you'd also need a '' in the array as well
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              configFile: "webpack.tsconfig.json"
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              name() {
+                if (
+                  process.env.NODE_ENV === "development" ||
+                  process.env.DEV === "true"
+                ) {
+                  return "[path][name].[ext]";
+                }
+
+                return "[hash].[ext]";
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins
+};