How to Build the Electron Desktop Application for Next AI Draw.io

To build the Electron desktop application for Next AI Draw.io, run npm run dist after installing dependencies, which compiles the Next.js frontend, bundles the Electron main process, and generates platform-specific installers using electron-builder.

Next AI Draw.io is an open-source project that wraps a Next.js frontend inside an Electron shell to create a native desktop experience. Whether you need to develop locally with hot-reload or package distributable binaries for Windows, macOS, and Linux, the repository provides npm scripts that automate the entire pipeline. Below is the complete workflow for building the Electron desktop application for Next AI Draw.io, including the specific source files and commands used by the maintainers.

Development Setup and Local Testing

Before packaging, you can run the application in development mode to verify functionality. The development workflow starts a Next.js dev server, compiles the Electron TypeScript source, and launches the native window.

Starting the Development Environment

Run the following commands from the repository root:

npm ci
cp env.example .env.local  # Optional: add API keys for AI features

npm run electron:dev

This command executes scripts/electron-dev.mjs, which performs four critical steps:

1. Loads preset configuration – Reads config-presets.json from the user data directory and injects its key-value pairs into process.env, allowing you to test different API configurations without modifying .env files.
2. Starts the Next.js dev server – Launches the development server on port 6002 and waits until the endpoint is reachable.
3. Compiles Electron TypeScript – Uses esbuild to bundle electron/main/index.ts and electron/preload/*.ts into JavaScript.
4. Launches Electron – Opens a BrowserWindow (managed by electron/main/window-manager.ts) pointing to http://localhost:6002.

Production Build Process

Building the Electron desktop application for production involves three distinct phases: compiling the Electron source, preparing the standalone Next.js output, and packaging everything with electron-builder.

Compiling Electron Source Code

The first step converts the TypeScript files in the electron/ directory into plain JavaScript and outputs them to dist-electron/:

npm run electron:compile

This script invokes esbuild to transpile the main entry point at electron/main/index.ts and the context-isolated preload scripts in electron/preload/. It also copies static configuration files into the output directory. The main process code creates the application window via electron/main/window-manager.ts, which handles icons, dev-tool toggling, and title bar updates.

Preparing the Standalone Next.js Output

Next, the build pipeline generates a standalone version of the Next.js application that the Electron main process can serve locally:

npm run electron:prepare

This executes scripts/prepare-electron-build.mjs, which:

• Runs npm run build to create an optimized Next.js production build
• Copies the .next/standalone directory and static assets into a temporary electron-standalone/ folder
• Configures the folder as an extraResource for electron-builder

The standalone output is essential because the Electron main process (in electron/main/index.ts) starts a local file server using these assets when running in production mode.

Packaging with electron-builder

The final phase bundles everything into platform-specific installers:

npm run dist

This orchestrates the full pipeline:

1. Calls npm run electron:build (which runs both the Next.js build and electron:compile)
2. Executes npm run electron:prepare to stage the standalone files
3. Invokes electron-builder using the configuration defined in electron/electron-builder.yml

The configuration file specifies target formats (DMG for macOS, NSIS for Windows, AppImage for Linux), code-signing options, and resource inclusion rules. Final artifacts appear in the release/ directory.

Platform-Specific Builds

To generate binaries for a specific operating system, use the platform-specific npm scripts defined in package.json:

• macOS: npm run dist:mac produces a .dmg and .zip archive
• Windows: npm run dist:win generates an NSIS installer and portable .exe
• Linux: npm run dist:linux creates AppImage, .deb, and .rpm packages

Each command requires the appropriate build tools and certificates installed on the host machine (e.g., Xcode for macOS, Wine for Windows cross-compilation on Linux).

Key Architecture Files

Understanding these source files helps debug build issues or customize the application:

• electron/main/index.ts – The main process entry point that loads preset configs, starts the local server, and initializes the window.
• electron/main/window-manager.ts – Handles BrowserWindow creation, icon paths, title updates, and development tool management.
• scripts/electron-dev.mjs – Development orchestrator that manages the dev server lifecycle and environment injection.
• scripts/prepare-electron-build.mjs – Copies standalone Next.js output into the packaging staging area.
• electron/electron-builder.yml – Defines packaging targets, resource globs, and platform-specific build settings.

Summary

• Development: Use npm run electron:dev to start a hot-reload environment on port 6002 with automatic TypeScript compilation.
• Compilation: npm run electron:compile uses esbuild to output main and preload scripts to dist-electron/.
• Preparation: scripts/prepare-electron-build.mjs stages the standalone Next.js build for embedding.
• Packaging: npm run dist runs the full pipeline and generates installers in release/ based on electron/electron-builder.yml.
• Platform targets: Use dist:mac, dist:win, or dist:linux for OS-specific builds.

Frequently Asked Questions

What Node.js version is required to build the Electron desktop application for Next AI Draw.io?

The repository uses modern npm scripts and esbuild, which generally require Node.js 18 or later. Check the engines field in package.json for the exact version constraint specified by the maintainers.

Why does the dev server use port 6002 instead of the default 3000?

The development script in scripts/electron-dev.mjs explicitly configures the Next.js dev server to run on port 6002 to avoid conflicts with other local development instances and to provide a consistent target URL for the Electron main process to poll during startup.

Can I build Windows binaries on macOS or Linux?

Cross-platform building is possible but requires additional tooling. According to the electron-builder configuration in electron/electron-builder.yml, you typically need Wine installed on Linux/macOS to build Windows NSIS installers. macOS binaries can only be signed and notarized on actual macOS hardware or CI runners with Apple developer certificates.

Where are the compiled Electron files stored after running npm run electron:compile?

The esbuild output lands in the dist-electron/ directory at the repository root. This folder contains the compiled JavaScript for the main process (main/index.js) and preload scripts, which electron-builder later packages alongside the standalone Next.js application.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}