electron-forge-plugin-vite

Since Electron Forge v6.1.1 started supporting Vite.

├─┬ plugin
│ │
│ ├─┬ src
│ │ ├── util/
│ │ └── VitePlugin.ts  `electron-forge-plugin-vite`
│ │
│ ├─┬ src-migration
│ │ └── index.ts       `electron-forge-plugin-vite/migration`
│ │
│ └─┬ src-plugin
│   └── index.ts       `electron-forge-plugin-vite/plugin`
│

---

electron-forge-plugin-vite

For test electron-forge Vite template.

🚨 This is just a test version of the official plugin @electron-forge/plugin-vite and is only intended as a test for the development phase.

Quick Setup

# npm
npm i -g electron-forge-template-vite-typescript
npm create electron-app my-vite-app --template=vite-typescript

# yarn
yarn global add electron-forge-template-vite-typescript
yarn create electron-app my-vite-app --template=vite-typescript

🔥 Hot restart

electron-forge-plugin-vite@0.4.0+

// vite.main.config.mjs    - For Electron Main
// vite.preload.config.mjs - For Preload Scripts

import { defineConfig } from 'vite';
import { restart } from 'electron-forge-plugin-vite/plugin';

// https://vitejs.dev/config
export default defineConfig({
  plugins: [restart()],
});

Migration

Migrate to v7.3.0+ version.

Why not the Vite plugin? Because dynamically inserting new plugins into the vite.config.ts in the plugin does not work!

---

Before vite.main.config.ts

import { defineConfig } from 'vite';

// https://vitejs.dev/config
export default defineConfig({
  resolve: {
    // Some libs that can run in both Web and Node.js, such as `axios`, we need to tell Vite to build them in Node.js.
    browserField: false,
    conditions: ['node'],
    mainFields: ['module', 'jsnext:main', 'jsnext'],
  },
});

After vite.main.config.ts

import { defineConfig, mergeConfig } from 'vite';
import { to7_3_0_config } from 'electron-forge-plugin-vite/migration';

// https://vitejs.dev/config
export default defineConfig(async (env) => {
  return mergeConfig(
    await to7_3_0_config.main(env),
    {
      resolve: {
        // Some libs that can run in both Web and Node.js, such as `axios`, we need to tell Vite to build them in Node.js.
        browserField: false,
        conditions: ['node'],
        mainFields: ['module', 'jsnext:main', 'jsnext'],
      },
    },
  );
});

---

Before vite.renderer.config.ts

import { defineConfig } from 'vite';

// https://vitejs.dev/config
export default defineConfig({});

After vite.renderer.config.ts

import { defineConfig, mergeConfig } from 'vite';
import { to7_3_0_config } from 'electron-forge-plugin-vite/migration';

// https://vitejs.dev/config
export default defineConfig(async (env) => {
  return mergeConfig(
    await to7_3_0_config.renderer(env),
    {/* You Vite config here... */ },
  );
});

---

Before vite.preload.config.ts

import { defineConfig } from 'vite';

// https://vitejs.dev/config
export default defineConfig({});

After vite.preload.config.ts

import { defineConfig, mergeConfig } from 'vite';
import { to7_3_0_config } from 'electron-forge-plugin-vite/migration';

// https://vitejs.dev/config
export default defineConfig(async (env) => {
  return mergeConfig(
    await to7_3_0_config.preload(env),
    {/* You Vite config here... */ },
  );
});