making overlay work with separate react file

packages/desktop/package.json

@@ -55,8 +55,8 @@
         [
           "@electron-forge/plugin-webpack",
           {
-            "port": "3001",
-            "loggerPort": "9001",
+            "port": "4000",
+            "loggerPort": "9003",
             "mainConfig": "./webpack.main.config.js",
             "devContentSecurityPolicy": "connect-src 'self' http://localhost:5000 ws://localhost:5000 'unsafe-eval'",
             "renderer": {
@@ -69,6 +69,14 @@
                   "preload": {
                     "js": "./src/electron/preload.ts"
                   }
+                },
+                {
+                  "html": "./src/index.html",
+                  "js": "./src/rendererTwo.ts",
+                  "name": "second_window",
+                  "preload": {
+                    "js": "./src/electron/preload.ts"
+                  }
                 }
               ]
             }

packages/desktop/src/index.ts

@@ -10,6 +10,7 @@ import store from "./electron/store";
 // whether you're running in development or production).
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
 declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
+declare const SECOND_WINDOW_WEBPACK_ENTRY: string;
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require("electron-squirrel-startup")) {
@@ -20,6 +21,7 @@ if (require("electron-squirrel-startup")) {
 // 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.
 export let browserWindow: BrowserWindow;
+export let overlayWindow: BrowserWindow;
 
 const createWindow = (): void => {
   // Create the browser window.
@@ -30,14 +32,25 @@ const createWindow = (): void => {
       sandbox: true,
     },
     icon: "./assets/1024x1024.icns",
+  });
+
+  overlayWindow = new BrowserWindow({
+    ...Dimensions.default,
+    webPreferences: {
+      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+      sandbox: true,
+    },
+    icon: "./assets/1024x1024.icns",
     alwaysOnTop: true,
   });
 
   // and load the index.html of the app.
   browserWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+  overlayWindow.loadURL(SECOND_WINDOW_WEBPACK_ENTRY);
 
   // Open the DevTools.
-  browserWindow.webContents.openDevTools({ mode: "detach" });
+  browserWindow.webContents.openDevTools({ mode: "right" });
+  overlayWindow.webContents.openDevTools({ mode: "left" });
 };
 
 // This method will be called when Electron has finished

packages/desktop/src/overlay/index.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+function render() {
+  ReactDOM.render(
+    <div>this is the best in the world</div>,
+    document.getElementById("root")
+  );
+}
+
+render();

packages/desktop/src/rendererTwo.ts

@@ -0,0 +1 @@
+import "./overlay/index";