Electron Forge

Electron Forge è la toolchain ufficiale raccomandata dal team di Electron per creare, sviluppare, packaging e distribuire applicazioni. Fornisce un’esperienza di sviluppo completa con configurazione minima.

Installazione

Nuovo Progetto con Forge

npm init electron-app@latest mia-app
cd mia-app
npm start

Aggiungere Forge a un Progetto Esistente

cd mia-app-esistente
npm install --save-dev @electron-forge/cli
npx electron-forge import

Struttura del Progetto Forge

mia-app/
├── package.json
├── forge.config.js          # Configurazione Forge
├── src/
│   ├── main.js              # Main Process
│   ├── preload.js           # Preload script
│   ├── index.html           # UI principale
│   ├── index.css            # Stili
│   └── renderer.js          # Logica renderer
└── node_modules/

Configurazione (forge.config.js)

// forge.config.js
module.exports = {
  packagerConfig: {
    name: 'La Mia App',
    icon: './assets/icon',          // Senza estensione (Forge la aggiunge)
    asar: true,                      // Pacchetta in formato ASAR
    appBundleId: 'com.example.miaapp',
  },
  rebuildConfig: {},
  makers: [
    // Windows: installer NSIS
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        setupIcon: './assets/icon.ico',
      },
    },
    // macOS: file DMG
    {
      name: '@electron-forge/maker-dmg',
      config: {
        icon: './assets/icon.icns',
        format: 'ULFO',
      },
    },
    // macOS: file ZIP
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    // Linux: pacchetto DEB
    {
      name: '@electron-forge/maker-deb',
      config: {
        options: {
          icon: './assets/icon.png',
          maintainer: 'Tuo Nome',
          homepage: 'https://example.com',
        },
      },
    },
    // Linux: pacchetto RPM
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
  ],
};

Comandi Principali

Sviluppo

# Avvia l'app in modalità sviluppo
npm start
# oppure
npx electron-forge start

Packaging

Crea la versione distribuibile (non installabile):

npx electron-forge package

Il risultato si trova in out/mia-app-{platform}-{arch}/.

Build (Make)

Crea gli installer per la distribuzione:

# Build per la piattaforma corrente
npx electron-forge make

# Build per una piattaforma specifica
npx electron-forge make --platform=win32
npx electron-forge make --platform=darwin
npx electron-forge make --platform=linux

I file distribuibili si trovano in out/make/.

Pubblicazione

# Pubblica su GitHub Releases
npx electron-forge publish

Plugin Webpack

Per usare Webpack con Forge (bundling, HMR, etc.):

npm install --save-dev @electron-forge/plugin-webpack

// forge.config.js
module.exports = {
  // ...
  plugins: [
    {
      name: '@electron-forge/plugin-webpack',
      config: {
        mainConfig: './webpack.main.config.js',
        renderer: {
          config: './webpack.renderer.config.js',
          entryPoints: [
            {
              html: './src/index.html',
              js: './src/renderer.js',
              name: 'main_window',
              preload: {
                js: './src/preload.js',
              },
            },
          ],
        },
      },
    },
  ],
};

Plugin Vite

Per usare Vite (più veloce di Webpack):

npm install --save-dev @electron-forge/plugin-vite

// forge.config.js
module.exports = {
  plugins: [
    {
      name: '@electron-forge/plugin-vite',
      config: {
        build: [
          {
            entry: 'src/main.js',
            config: 'vite.main.config.mjs',
            target: 'main',
          },
          {
            entry: 'src/preload.js',
            config: 'vite.preload.config.mjs',
            target: 'preload',
          },
        ],
        renderer: [
          {
            name: 'main_window',
            config: 'vite.renderer.config.mjs',
          },
        ],
      },
    },
  ],
};

Pubblicare su GitHub

Configurazione

// forge.config.js
module.exports = {
  publishers: [
    {
      name: '@electron-forge/publisher-github',
      config: {
        repository: {
          owner: 'tuo-username',
          name: 'tuo-repo',
        },
        prerelease: false,
        draft: true,         // Crea come bozza per revisione
      },
    },
  ],
};

Pubblicazione

# Imposta il token GitHub
export GITHUB_TOKEN=ghp_tuoToken

# Pubblica
npx electron-forge publish

Script nel package.json

{
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint src/"
  }
}

Template Disponibili

Forge offre template predefiniti per i framework più popolari:

# Vanilla JS (default)
npm init electron-app@latest mia-app

# Con Webpack
npm init electron-app@latest mia-app -- --template=webpack

# Con Vite
npm init electron-app@latest mia-app -- --template=vite

# Con TypeScript + Webpack
npm init electron-app@latest mia-app -- --template=webpack-typescript

# Con TypeScript + Vite
npm init electron-app@latest mia-app -- --template=vite-typescript