alex8088 / electron-vite

Next generation Electron build tooling based on Vite 新一代 Electron 开发构建工具,支持源代码保护
https://electron-vite.org
MIT License
3.53k stars 152 forks source link

Multiple vite apps served by the renderer #462

Open shennan opened 7 months ago

shennan commented 7 months ago

Clear and concise description of the problem

Great project; thanks for the work here.

I have a monorepo with a few Vite apps. For testing purposes it would be great to use Electron Vite to serve all of them through one Electron instance and use a hidden button or shortcut to flip between them.

Example monorepo:


monorepo/
├─ emulator (electron-vite)/
│  ├─ package.json
│  ├─ electron.vite.config.ts
├─ vite-app1/
│  ├─ package.json
│  ├─ index.html
├─ vite-app2/
│  ├─ package.json
│  ├─ index.html

In the above scenario, the emulator package would fire up App1 and App2 in different BrowserWindow's which can be switched between.

I see you have documentation for a "Multiple Windows App" but this seems different. If I, say, adjust the config to this:

/*...*/
renderer: {
    root: '../vite-app1/',
    build: {
      rollupOptions: {
        input: {
          'user-app': resolve('../vite-app1/index.html'),
          'control-panel': resolve('../vite-app2/index.html')
        }
      }
    },
/*...*/

I'm still able to see App1, but I'm unable to access/load App2. This makes sense because presumably they would clash anyway due to listening on the same port.

Is this beyond the scope of Electron Vite. And, if so, how would you go about achieving this with what is currently available in the codebase?

Suggested solution

Have the input property run vite on different ports and load the process.env['ELECTRON_RENDERER_URL'] with namespaced URLs.

Alternative

No response

Additional context

This is mostly a desire for less boilerplate code. The apps have distinct lives of their own but they are also useful together. Electron Vite, in this case, is a distribution "flavour" of the monorepo.

Validations

gwicksted commented 3 months ago

This works for but your second index.html file needs to have a different name.

The reason is: they aren't renamed to match the input moniker and they're both written to the same output directory.

So rename vite-app2's index.html "app2.html" and it will work.

If that's not possible, see this workaround: https://stackoverflow.com/questions/75022811/vite-js-build-how-to-produce-output-index-html-if-my-entry-is-named-differently