electron-forge with two windows : how to render the second window? electron-react app

Question

I realized that the second electron browser window, does actually opens, but it doesn't render correctly.

In /tools/forge/forge.config.js I have two entryPoints for the two windows:

        entryPoints: [

        {
          // React Hot Module Replacement (HMR)
          rhmr: 'react-hot-loader/patch',
          // HTML index file template
          html: path.join(rootDir, 'src/index.html'),
          // Renderer
          js: path.join(rootDir, 'src/renderer.ts'),
          // Main Window
          name: 'main_window',
          // Preload
          preload: {
            js: path.join(rootDir, 'src/preload.ts'),
          },
        },

        {
          // React Hot Module Replacement (HMR)
          rhmr: 'react-hot-loader/patch',
          // HTML index file template
          html: path.join(rootDir, 'src/index_two.html'),
          // Renderer
          js: path.join(rootDir, 'src/renderer_two.ts'),
          // Main Window
          name: 'main_window2',
          // Preload
          preload: {
            js: path.join(rootDir, 'src/preload.ts'),
          },
        },

      ], 

And this is the related part in main.ts :

declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;

let mainWindow;
let mainWindow2;

const createWindow = (): void => {
  mainWindow = new BrowserWindow({

  })
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  mainWindow2 = new BrowserWindow({

  })

  // Is this correct??
  mainWindow2.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
}

/src/renderer.ts :

import './app';

/src/renderer_two.ts :

import './app_two'

In src/app_two/components/App_two.tsx :

class App extends React.Component {

  render(): JSX.Element {
    return (
      <div className='container'>
        <h2 className='heading'>
            SECOND WINDOW
        </h2>
        <p>
          <button id="exchange-greetings-with-first-window" onClick={() => {
            exchangeGreetingsFunct();
          }}>Exchange Greetings with First Window</button>
        </p>
      </div>
    );
  }
}

As you can see, the second window, which is the one on the right, doesn't rendere correctly:

How to correctly load the rendering for the second window?

Answer 1

Hello on entryPoints in package.json file you should do some thing like this

"entryPoints": [
            {
              "html": "./src/foldera/view.html",
              "js": "./src/renderer.js",
              "name": "foldera_window",
              "preload": {
                "js": "./src/foldera/preload.js"
              }
            },
            {
              "html": "./src/folderb/view.html",
              "js": "./src/renderer.js",
              "name": "folderb_window",
              "preload": {
                "js": "./src/folderb/preload.js"
              }
            }
          ]

then you can use

FOLDERA_WINDOW_PRELOAD_WEBPACK_ENTRY FOLDERA_WINDOW_WEBPACK_ENTRY
FOLDERB_WINDOW_PRELOAD_WEBPACK_ENTRY FOLDERB_WINDOW_WEBPACK_ENTRY

I think that the variable name depends on the name of the entryPoints

Answer 2

With this in main.ts :

ipcMain.handle("open-second-window", (IpcMainEvent, message) => {
  //mainWindow2.loadURL(path.join('file://', process.cwd(), 'index-2.html'));
  mainWindow2.loadURL('http://localhost:3000/main_window2'); // corresponding 
       to the main_window2 in /stc/tools/forge/forge.config.js : 
  mainWindow2.show();
});

I get the correct rendering

Answer 3

Here is how I got it working: enter image description here

enter image description here

enter image description hereenter image description here enter image description here

This should give you everything you need. package.json config, folder structure to show you how mine is structured and works. enter image description here