Electron community reinvented electron-builder/etc. as electron-forge. How to package Quasar w/ electron-forge?

[MichaelJCole]

Electron Forge is the new open source electron builder and it works out of the box with examples for code signing and whatnot. It's a big improvement over electron-builder/etc. It's been on version 6.x for about a year.

https://www.electronforge.io/

There is a vite+typscript example you can create like this:

yarn create electron-app my-new-app --template=vite-typescript
cd my-new-app
npm install
# Check forge.config.ts line 11 for platform support
npm run make
npm run package
npm run publish

The forge.config.ts lists 3 targets. Preload and main_window get the default config. main.ts gets a special config to compile libs like axios for node instead of browser.

**What's the best way to package Quasar w/ electron-forge?

Thank you!**

forge.config.ts

import type { ForgeConfig } from '@electron-forge/shared-types';
import { MakerSquirrel } from '@electron-forge/maker-squirrel';
import { MakerZIP } from '@electron-forge/maker-zip';
import { MakerDeb } from '@electron-forge/maker-deb';
import { MakerRpm } from '@electron-forge/maker-rpm';
import { VitePlugin } from '@electron-forge/plugin-vite';

const config: ForgeConfig = {
  packagerConfig: {},
  rebuildConfig: {},
  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']) /*, new MakerRpm({})*/, new MakerDeb({})],
  plugins: [
    new VitePlugin({
      // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
      // If you are familiar with Vite configuration, it will look really familiar.
      build: [
        {
          // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
          entry: 'src/main.ts',
          config: 'vite.main.config.ts',
        },
        {
          entry: 'src/preload.ts',
          config: 'vite.preload.config.ts',
        },
      ],
      renderer: [
        {
          name: 'main_window',
          config: 'vite.renderer.config.ts',
        },
      ],
    }),
  ],
};

export default config;

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,
    mainFields: ['module', 'jsnext:main', 'jsnext'],
  },
});

main.[preload|renderer].config.ts

import { defineConfig } from 'vite';

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

package.json

{
  "name": "my-new-app",
  "productName": "my-new-app",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": ".vite/build/main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --ext .ts,.tsx ."
  },
  "keywords": [],
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^6.4.2",
    "@electron-forge/maker-deb": "^6.4.2",
    "@electron-forge/maker-rpm": "^6.4.2",
    "@electron-forge/maker-squirrel": "^6.4.2",
    "@electron-forge/maker-zip": "^6.4.2",
    "@electron-forge/plugin-auto-unpack-natives": "^6.4.2",
    "@electron-forge/plugin-vite": "^6.4.2",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "electron": "26.2.1",
    "eslint": "^8.0.1",
    "eslint-plugin-import": "^2.25.0",
    "ts-node": "^10.0.0",
    "typescript": "~4.5.4"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  }
}

[Walnussbaer]

Would like to know this as well :/

[MichaelJCole]

I've done a bit more research on this, and electron-forge uses the electron-packager under the hood. It seems to be a convenience/configuration package.