#Virtual Routing with Multiple Windows; Webpack Plugin InElectron Forge

10 messages · Page 1 of 1 (latest)

minor pendant
#

Hello,

I'm working on building and packaging an app, and am having issues with virtual routing not wanting to load defined routes.

Here is my use case:

My application has an initial pop-up window that loads on launch and allows the user to select a project. Once a project is selected, the first window closes, and the new "Main Window" is opened with the selected project.

When I was working in development, before trying to package, I was able to use React Router without much issue, simply passing the route I wanted into the window.loadURL() function to call up the second window.

Now, attempting to package with electron forge and the webpack plugin, I can load the first window without issue, by using window.loadURL(MAIN_WINDOW_WEBPACK_ENTRY), but I cannot seem to be able to successfully append anything to it to load up the new window with a different route.

I have tried several variations of this sort of thing:
window.loadURL(MAIN_WINDOW_WEBPACK_ENTRY + /project/${projectID}), to no avail.

I also altered my Router to try BrowserRouter, HashRouter, and MemoryRouter, none of which seems to make any difference.

How are people loading windows at different paths? Do I need to ditch virtual routing and create an entirely separate entrypoint for every window?

Thanks!

minor pendant
#

For anyone running into this in the future, I've resolved the issue by creating separate entry points for each window rather than attempt to have different routes for different windows. The data I was previously passing via route params to each window now gets stored in the main process and loaded in the renderer over the contextBridge.

sage sierra
#

@minor pendant Can you show an example please

minor pendant
sage sierra
#

@minor pendant your solution. I am working on a project now where I'm using hashRouter.

#

@minor pendant Do you have a second to help me

minor pendant
#

In my use case, I don't have many routes and don't need to worry about navigation history.

My router initially looked like this:

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path={"/main/:projectID"} element={<App />} />
        <Route path={"/projects"} element={<ProjectSelect />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

This would work fine in development mode, but when packaging I could never get routes to work, even after trying the HashRouter and MemoryRouter.

I converted my routes into their own pages.

// @filename: index.tsx

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// @filename: project.tsx

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <ProjectSelect />
  </React.StrictMode>
);
#

Then I set each one as an entrypoint in the forge config:

// @filename: forge.config.js
...
entryPoints: [
          {
            html: './src/project.html',
            js: './src/project.tsx',
            name: 'project_window',
            preload: {
              js: './src/preload.ts',
            },
          },
          {
            html: './src/index.html',
            js: './src/index.tsx',
            name: 'main_window',
            preload: {
              js: './src/preload.ts',
            },
          },
        ],
...
#

Then I can load each page in my main.js file using window.loadURL(MAIN_WINDOW_WEBPACK_ENTRY) where MAIN_WINDOW is the name I gave the entrypoint in forge.config.js

#

To handle the dynamic data in the App route, I used a contextBridge with a listener.