Search code examples
electronvitevite-plugin-development

vite-plugin-electron does not create nested folders inside main folder when it compiles


Im trying to struct my electron folder like this:

enter image description here

but vite-plugin-electron doesn't create the api folder instead it compiles on the root folder:

enter image description here

this is my vite config file:

import { defineConfig } from "vite";
import electron from "vite-plugin-electron";
import renderer from "vite-plugin-electron-renderer";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    electron([
      {
        // Main-Process entry file of the Electron App.
        entry: "electron/main.ts",
      },
      {
        entry: "electron/preload.ts",
        onstart(options) {
          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
          // instead of restarting the entire Electron App.
          options.reload();
        },
      },
      {
        entry: "electron/api/upload.ts",
      },
    ]),
    renderer(),
  ],
});

I looked on the vite-plugin-electron docs but didn't found something like outDir property that i can specify by my self.


Solution

  • I opened an issue in their github repo and they helped me. This is the solution:

    import { defineConfig } from "vite";
    import electron from "vite-plugin-electron";
    import renderer from "vite-plugin-electron-renderer";
    import react from "@vitejs/plugin-react";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        react(),
        electron([
          {
            // Main-Process entry file of the Electron App.
            entry: "electron/main.ts",
          },
          {
            entry: "electron/preload.ts",
            onstart(options) {
              // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
              // instead of restarting the entire Electron App.
              options.reload();
            },
          },
          {
            entry: "electron/IpcRenderer/upload.ts",
            vite: {
              build: {
                outDir: "dist-electron/IpcRenderer",
              },
            },
          },
          {
            entry: "electron/IpcMain/upload.ts",
            vite: {
              build: {
                outDir: "dist-electron/IpcMain",
              },
            },
          },
        ]),
        renderer(),
      ],
    });
    

    this will compile files into the specified directory on the outDir property