Monorepo demo

[be5invis]

Are there demos about using electron-vite in a monorepo? Saying that all the packages (main / preload / renderer / shared logic) are placed under a subdirectory like packages/<package name>, and each sub-package has its own package.json, and possibly internal dependenceis.

[kyleshrader]

@be5invis I will try to put together a demo. I am working on one for Typescript + React + Yarn latest.

Do you have any specific stack you are trying to use? And do you intend to separate main from the electron-vite package?

The solution I may end up taking is using Yarn's no-hoist in the electron-vite package and then the settings will look like so:

import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
    build: {
      lib: {
        entry: 'node_modules/main/index.js',
      }
    }
  },
  preload: {
    plugins: [externalizeDepsPlugin()],
    build: {
      lib: {
        entry: 'node_modules/preload/index.js',
      }
    }
  },
  renderer: {
    plugins: [react()],
    root: 'node_modules/renderer',
    build: {
      rollupOptions: {
        input: 'node_modules/renderer/index.html'
      }
    }
  }
})

The folder structure will be like so:

root/
├── apps/
│   └── client/
└── packages/
    ├── main/
    ├── preload/
    ├── renderer/
    ├── api/
    └── common/

client is the electron-vite code.
api will be public and included in the preload.
common will have some .d.ts and other shared code.

I think if I get those working for dev, start, typecheck, and build's then I will share it.

If anyone has a recommendation besides using no-hoist and referring directly to the node_modules symlinked packages, please @ me...

[debsouryadatta]

@be5invis I will try to put together a demo. I am working on one for Typescript + React + Yarn latest.

Do you have any specific stack you are trying to use? And do you intend to separate main from the electron-vite package?

The solution I may end up taking is using Yarn's no-hoist in the electron-vite package and then the settings will look like so:

import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
    build: {
      lib: {
        entry: 'node_modules/main/index.js',
      }
    }
  },
  preload: {
    plugins: [externalizeDepsPlugin()],
    build: {
      lib: {
        entry: 'node_modules/preload/index.js',
      }
    }
  },
  renderer: {
    plugins: [react()],
    root: 'node_modules/renderer',
    build: {
      rollupOptions: {
        input: 'node_modules/renderer/index.html'
      }
    }
  }
})

The folder structure will be like so:

root/
├── apps/
│   └── client/
└── packages/
    ├── main/
    ├── preload/
    ├── renderer/
    ├── api/
    └── common/

client is the electron-vite code. api will be public and included in the preload. common will have some .d.ts and other shared code.

I think if I get those working for dev, start, typecheck, and build's then I will share it.

If anyone has a recommendation besides using no-hoist and referring directly to the node_modules symlinked packages, please @ me...

Do this approach still works? Wanted to set up a turborepo.

[kyleshrader]

@be5invis here's what I've got: https://github.com/kyleshrader/electron-vite-monorepo

It is lacking a few features you'd want in a project. eslint, prettier, cross-package dependency version constraints, a monorepo management tool (nx, lerna, turbo, etc), typechecking on build...

But this solves all the primary electron-vite issues. dev, start, and build work.

FYI this is a minimal working config. You may want to add in the rest of the features from the normal electron-vite ts react yarn template as it's required. Feel free to use the issues or discussions board on that repo if you have questions or comments.

[rares-lupascu]

when i comes to electron ... most people use it as a wrapper for full web apps
so in ur case ... in apps u would need to have a remixjs / nextjs app and client would be actually electron wrapping that remixjs / nextjs app