Cannot use createElectronRouter with electron-vite

[dantman]

I just tried adding electron-router-dom to a project using electron-vite but ran into a roadblock when trying to refactor the code that calls loadURL/loadFile to use createElectronRouter.

The code in question is written like so, which seems to be effectively what electron-vite's HMR guide suggests.

if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
    myAppWindow.loadURL(
        `${process.env['ELECTRON_RENDERER_URL']}/src/renderer/main.html`,
    )
} else {
    myAppWindow.loadFile(path.join(__dirname, '../renderer/src/renderer/main.html'))
}

I examined createElectronRouter to see if there's some way I could make it happy, but it appears this cannot be refactored to ELECTRON_RENDERER_URL without some something extra.

1. const devServerUrl = `http://localhost:${props.port ?? port}`; is hardcoded, so there's no easy way to pass in ELECTRON_RENDERER_URL. This would be simple if devServerUrl were an option.
2. const URLRoute = createURLRoute(devServerUrl, windowId, { also hardcodes the assumption that loadURL points to the root path. Which won't work if that is not the case. I know electron-router-dom is supposed to be taking care of routing but in this case the multi-page pattern is used because the other html document is a special case like a status window that doesn't fit into being part of the router.

[sebbean]

i've been battling this all dayyyy

[sebbean]

i guess you dont need to mainWindow.loadURL anymore, registerRoute handles that

[daltonmenezes]

@dantman @sebbean Could you please try this preview and see if the issue is resolved?

npm i https://pkg.pr.new/electron-router-dom@30

This preview adds the devServerUrl property, it has priority over both hardcoded localhost url and port property

it must work by providing it in the createElectronRouter function

export const { Router, registerRoute, settings } = createElectronRouter({
  // port: 4927,
  devServerUrl: 'http://localhost:4927',

  types: {
    ids: ['main'],
  },
})

or in the registerRoute function

  registerRoute({
    id: 'main',
    browserWindow: mainWindow,
    devServerUrl: 'http://localhost:4927',
    htmlFile: path.join(__dirname, '../renderer/index.html'),
  })

if it is necessary to pass an env var, this must be done in the registerRoute method (main process)