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

> Build the Electron desktop application for Next AI Draw.io easily. Follow this guide to install dependencies and run npm run dist for platform-specific installers. Get started today.

- Repository: [Dayuan Jiang/next-ai-draw-io](https://github.com/DayuanJiang/next-ai-draw-io)
- Tags: how-to-guide
- Published: 2026-07-13

---

**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:

```bash
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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/electron/main/index.ts) and `electron/preload/*.ts` into JavaScript.
4. **Launches Electron** – Opens a `BrowserWindow` (managed by [`electron/main/window-manager.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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/`:

```bash
npm run electron:compile

```

This script invokes **esbuild** to transpile the main entry point at [`electron/main/index.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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:

```bash
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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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:

```bash
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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/main/index.js)) and preload scripts, which `electron-builder` later packages alongside the standalone Next.js application.