Building Production Mac Apps with Electron & Angular: Complete Desktop Deployment Guide

// forge.config.js - Complete Production Configuration
const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');
const packageJson = require('./package.json');

module.exports = {
  packagerConfig: {
    asar: true,
    // Code signing configuration for macOS
    osxSign: process.env.MAS_BUILD
      ? {
          // App Store configuration
          identity: 'Apple Distribution: Your Company (TEAM_ID)',
          'hardened-runtime': true,
          'gatekeeper-assess': false,
          entitlements: 'build/mac/entitlements.mas.plist',
          'entitlements-inherit': 'build/mac/entitlements.mas.inherit.plist',
          'signature-flags': 'library',
          'pre-embed-provisioning-profile': 'build/mac/YourApp_Mac_App_Store.provisionprofile',
        }
      : {
          // Direct distribution configuration
          identity:
            process.env.APPLE_SIGNING_IDENTITY ||
            'Developer ID Application: Your Company (TEAM_ID)',
          'hardened-runtime': true,
          'gatekeeper-assess': false,
          entitlements: 'build/mac/entitlements.mac.plist',
          'entitlements-inherit': 'build/mac/entitlements.mac.plist',
          'signature-flags': 'library',
          'pre-embed-provisioning-profile': false,
        },
    appBundleId: 'com.yourcompany.yourapp',
    appCategoryType: 'public.app-category.productivity',
    icon: 'src/assets/media/logos/icons/mac/icon.icns',
    name: 'YourApp',
    executableName: 'YourApp',
    extendInfo: {
      CFBundleIdentifier: 'com.yourcompany.yourapp',
      CFBundleName: 'YourApp',
      CFBundleDisplayName: 'YourApp',
      CFBundleExecutable: 'YourApp',
      CFBundleShortVersionString: packageJson.version,
      CFBundleVersion: '1',
      CFBundleDevelopmentRegion: 'en',
      CFBundlePackageType: 'APPL',
      CFBundleInfoDictionaryVersion: '6.0',
    },
  },
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

// electron/main.ts - Production Main Process
import { app, BrowserWindow, dialog, ipcMain, safeStorage } from 'electron';
import * as path from 'path';
import * as url from 'url';
import { createMenu } from './menu';

let mainWindow: BrowserWindow | null;

function createWindow() {
  const windowOptions: any = {
    width: 1200,
    height: 800,
    title: 'YourApp',
    backgroundColor: '#FFFFFF',
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      webSecurity: true,
      devTools: process.env.NODE_ENV === 'development',
      preload: path.join(__dirname, 'preload.js'),
      experimentalFeatures: true,
    },
  };

  mainWindow = new BrowserWindow(windowOptions);

  // Set custom headers for platform identification
  mainWindow.webContents.session.webRequest.onBeforeSendHeaders((details, callback) => {
    const platform = 'mac';
    const appOrigin =
      process.env.NODE_ENV === 'development'
        ? `https://yourdomain.com/dev-${platform}`
        : `https://yourdomain.com/${platform}`;

    details.requestHeaders['x-app-origin'] = appOrigin;
    details.requestHeaders['x-app-platform'] = platform;
    details.requestHeaders['x-app-version'] = app.getVersion();
    callback({ requestHeaders: details.requestHeaders });
  });

  // Handle permission requests
  mainWindow.webContents.session.setPermissionRequestHandler(
    (webContents, permission, callback) => {
      // Allow microphone, camera, notifications, file system
      if (['media', 'display-capture', 'notifications', 'fileSystem'].includes(permission)) {
        callback(true);
        return;
      }
      callback(false);
    },
  );

  // Load application
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:8000');
    mainWindow.webContents.openDevTools();
  } else {
    const indexPath = path.join(app.getAppPath(), 'dist/yourapp/index.html');
    mainWindow.loadURL(
      url.format({
        pathname: indexPath,
        protocol: 'file:',
        slashes: true,
      }),
    );
  }

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.setName('YourApp');
app.setAppUserModelId('com.yourcompany.yourapp');

app.whenReady().then(() => {
  createWindow();
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// electron/notarize.js - Production Notarization
require('dotenv').config();
const { notarize } = require('@electron/notarize');

exports.default = async function notarizing(context) {
  console.log(`🔐 Starting notarization process...`);
  const { electronPlatformName, appOutDir } = context;

  if (electronPlatformName !== 'darwin') {
    console.log(`ℹ️  Notarization not required for platform: ${electronPlatformName}`);
    return;
  }

  const appName = context.packager.appInfo.productFilename;
  const appPath = `${appOutDir}/${appName}.app`;

  // Verify environment variables
  if (
    !process.env.APPLE_TEAM_ID ||
    !process.env.APPLE_ID ||
    !process.env.APPLE_APP_SPECIFIC_PASSWORD
  ) {
    throw new Error('Missing required Apple notarization environment variables.');
  }

  const data = {
    tool: 'notarytool', // Use modern notarytool (not deprecated altool)
    teamId: process.env.APPLE_TEAM_ID,
    appBundleId: 'com.yourcompany.yourapp',
    appPath: appPath,
    appleId: process.env.APPLE_ID,
    appleIdPassword: process.env.APPLE_APP_SPECIFIC_PASSWORD,
  };

  console.log('⏳ Submitting to Apple for notarization...');
  console.log('   This may take 5-15 minutes...');

  await notarize(data);

  console.log('✅ Notarization complete!');
  console.log('🎉 Your app is now ready for distribution!');
};

// scripts/create-dmg.js - Custom DMG Builder
const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

console.log('🎯 Creating DMG file...');

const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
const version = packageJson.version;

// Verify app bundle exists
const appPath = 'out/YourApp-darwin-arm64/YourApp.app';
if (!fs.existsSync(appPath)) {
  console.error('❌ App bundle not found. Please run electron:package first.');
  process.exit(1);
}

// Remove existing DMG
const dmgPath = 'out/YourApp.dmg';
if (fs.existsSync(dmgPath)) {
  console.log('🗑️  Removing existing DMG...');
  fs.unlinkSync(dmgPath);
}

// Create DMG configuration
const dmgConfig = {
  title: 'YourApp',
  icon: path.resolve('src/assets/media/logos/icons/mac/icon.icns'),
  background: path.resolve('src/assets/media/logos/icons/png/256x256.png'),
  contents: [
    { x: 410, y: 150, type: 'link', path: '/Applications' },
    { x: 130, y: 150, type: 'file', path: path.resolve(appPath) },
  ],
  window: {
    width: 540,
    height: 380,
  },
};

// Write config and create DMG
const configPath = 'out/dmg-config.json';
fs.writeFileSync(configPath, JSON.stringify(dmgConfig, null, 2));

try {
  console.log('📦 Building DMG...');
  execSync(`cd out/YourApp-darwin-arm64 && npx appdmg ../dmg-config.json ../YourApp.dmg`, {
    stdio: 'inherit',
  });

  // Sign the DMG
  console.log('🔐 Signing DMG...');
  const signingIdentity =
    process.env.APPLE_SIGNING_IDENTITY ||
    'Developer ID Application: Your Company (TEAM_ID)';
  execSync(`codesign --sign "${signingIdentity}" --timestamp --options runtime out/YourApp.dmg`, {
    stdio: 'inherit',
  });

  // Verify signature
  console.log('🔍 Verifying DMG signature...');
  execSync('codesign --verify --verbose out/YourApp.dmg', {
    stdio: 'inherit',
  });

  console.log('✅ DMG created and signed successfully: out/YourApp.dmg');
} catch (error) {
  console.error('❌ Failed to create/sign DMG:', error.message);
  process.exit(1);
}

<!-- build/mac/entitlements.mac.plist - Direct Distribution -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.cs.allow-jit</key>
    <true/>
    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
    <true/>
    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
    <true/>
    <key>com.apple.security.cs.disable-library-validation</key>
    <true/>
    <key>com.apple.security.device.audio-input</key>
    <true/>
    <key>com.apple.security.device.camera</key>
    <true/>
    <key>com.apple.security.network.client</key>
    <true/>
    <key>com.apple.security.files.user-selected.read-write</key>
    <true/>
  </dict>
</plist>

// forge.config.js - File Exclusion
ignore: [
  /^\/src\/(?!assets\/media\/logos\/icons\/(mac|win|png)\/)/,
  /^\/\.angular/,
  /^\/\.git/,
  /^\/ios/,
  /^\/android/,
  /^\/docs/,
  /^\/build/,
  /^\/release/,
  /^\/out/,
  /^\/logs/,
]