DEV Community

Alex Spinov
Alex Spinov

Posted on

Electron Forge Has a Free API — Here's How to Build and Distribute Desktop Apps

Electron Forge is the official toolchain for building Electron apps. It handles scaffolding, building, packaging, and publishing — all with a unified configuration.

Getting Started

npm init electron-app@latest my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

forge.config.ts

import type { ForgeConfig } from "@electron-forge/shared-types";

const config: ForgeConfig = {
  packagerConfig: {
    asar: true,
    icon: "./assets/icon"
  },
  makers: [
    { name: "@electron-forge/maker-squirrel", config: {} },
    { name: "@electron-forge/maker-zip", platforms: ["darwin"] },
    { name: "@electron-forge/maker-deb", config: {} },
    { name: "@electron-forge/maker-rpm", config: {} }
  ],
  plugins: [
    {
      name: "@electron-forge/plugin-vite",
      config: {
        build: [{ entry: "src/main.ts", config: "vite.main.config.ts" }],
        renderer: [{ name: "main_window", config: "vite.renderer.config.ts" }]
      }
    }
  ]
};
export default config;
Enter fullscreen mode Exit fullscreen mode

Main Process

// src/main.ts
import { app, BrowserWindow, ipcMain } from "electron";

const createWindow = () => {
  const win = new BrowserWindow({
    width: 1200, height: 800,
    webPreferences: { preload: path.join(__dirname, "preload.js") }
  });
  win.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
};

ipcMain.handle("read-file", async (event, filePath) => {
  const fs = await import("node:fs/promises");
  return fs.readFile(filePath, "utf-8");
});

app.whenReady().then(createWindow);
Enter fullscreen mode Exit fullscreen mode

Preload Script (Context Bridge)

import { contextBridge, ipcRenderer } from "electron";

contextBridge.exposeInMainWorld("electronAPI", {
  readFile: (path: string) => ipcRenderer.invoke("read-file", path),
  onProgress: (cb: Function) => ipcRenderer.on("progress", (_, data) => cb(data))
});
Enter fullscreen mode Exit fullscreen mode

Build and Publish

# Build installers for current platform
npm run make

# Package without making installers
npm run package

# Publish to GitHub Releases
npm run publish
Enter fullscreen mode Exit fullscreen mode

Auto-Updates

import { autoUpdater } from "electron-updater";

autoUpdater.checkForUpdatesAndNotify();
autoUpdater.on("update-downloaded", () => {
  autoUpdater.quitAndInstall();
});
Enter fullscreen mode Exit fullscreen mode

Need to extract or automate web content at scale? Check out my web scraping tools on Apify — no coding required. Or email me at spinov001@gmail.com for custom solutions.

Top comments (0)