making overlay work with separate react file

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";