electron-userland / electron-userland/electron-builder

Manually manage which packages are put into `node_modules` in app.asar

Open
#9,665 4 comments 1 reaction 0 assignees View on GitHub
Stale
Dominant language
TypeScript
Stars
14.7k
Forks
1.9k
Avg merge
3d 12h
Merged PRs (30d)
48

Description

By default, electron-builder takes all deps from `dependencies` in package.json and copies them to `node_modules` within the ASAR archive. For Electron projects, I'd say there are two types of production dependencies: those used from within main/preload scripts and those used only from the renderer. This results in tools like electron-vite encouraging users to put renderer deps into `devDependencies` ([source](https://electron-vite.org/guide/dependency-handling)):

> Dependencies used in the renderer process should preferably be installed as `devDependencies` to help **keep the final package size smaller**.

That tip is true: in the project I work on, we bundle all three scripts: main, preload and renderer. Within main and preload bundles, electron-vite automatically bundles any dependencies not listed in `dependencies` but imported by code. This means that generally putting packages into `node_modules` within app.asar is only useful for packages that depend on native bindings, like node-pty.

But because this is controlled by `dependencies`/`devDependencies` split, it means I can no longer use those fields for their intended purpose: to separate tooling from app deps. We have a pnpm workspace and we wanted to configure Dependabot so that it creates separate PRs for updating tooling and app deps. With electron-build in play, this becomes difficult to achieve.

This problem would be much easier to solve if electron-builder let you control which packages go into `node_modules` in app.asar through a separate config option. In that scenario, `dependencies` in package.json would contain both main/preload-specific deps as well as renderer-only deps. This would let us update tooling separately from app deps while letting electron-builder put into app.asar only those deps that are necessary to put there.

This is how our setup is configured at the moment:

* [`electron-builder.config.js`](https://github.com/gravitational/teleport/blob/f39ce6843e1a0afc5ea32f1b2896764267b7f5b4/web/packages/teleterm/electron-builder-config.js)
* [`electron.vite.config.mts`](https://github.com/gravitational/teleport/blob/f39ce6843e1a0afc5ea32f1b2896764267b7f5b4/web/packages/teleterm/electron.vite.config.mts)
* [`pnpm-workspace.yaml`](https://github.com/gravitational/teleport/blob/f39ce6843e1a0afc5ea32f1b2896764267b7f5b4/pnpm-workspace.yaml)
* [`package.json` of the Electron app](https://github.com/gravitational/teleport/blob/f39ce6843e1a0afc5ea32f1b2896764267b7f5b4/web/packages/teleterm/package.json)

## Possible workarounds

One workaround would be to create a separate packaged called something like `electron-app-renderer` that has renderer-only deps. `electron-app-renderer` would then be added to `devDependencies` of the package with the Electron app. The big downside is that now the Electron app must import any renderer deps through that package.

Another workaround would be to manually filter which deps get added through [the `files` config option](https://www.electron.build/contents#files). But this means pretty much means maintaining a dep graph of packages that need to be put into `node_modules` in app.asar.

## Related issues

* https://github.com/electron-userland/electron-builder/issues/3509

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the linked electron-builder.config.js, electron.vite.config.mts, pnpm-workspace.yaml, and Electron app package.json to understand the current dependency split and packaging inputs. Then trace electron-builder's dependency collection and app.asar creation entry points; done means a documented configuration can select packages for app.asar without relying on the dependencies/devDependencies split, with coverage for the resulting package contents.

Written by the indexing model from the issue text.

Assessment

Tech stack
electron, typescript
Domain
build-system, desktop
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.