---
layout: post
title: "Integrate native Node.js modules into an Electron app (2/2)"
date: 2018-02-28 21:48
comments: true
categories: [javascript]
cover: /images/cover/avatar.png
keywords:
description:
---
### tl;dr
- package an Electron app into OS-specific bundle
- save space by keeping only a few needed `node_modules` directories—tips & tricks
# Current state
[So we've got super simple app which uses node.js features thanks to Electron](/2018/02/22/integrate-native-node-dot-js-modules-into-an-electron-app-1-slash-2/). Let's say it evolves into 100k LOC large app with dozens of dependencies (both browser-friendly and native node.js). How to produce a space-efficient bundle (in the context of Electron)?
# Overview and planning
We'll be using [electron-packager](https://github.com/electron-userland/electron-packager) to create a OS-specific distributable bundle (*Electron bundle*). After we build javascript (*javascript bundle*) we keep an eye on native modules location and `node_modules` content inside Electron bundle.
Build production quality javascript bundle is webpack-specific (and probably also babel-specific). I won't cover this part as it has nothing to do with to Electron. If you use newest Webpack [4.0](https://github.com/webpack/webpack/releases/tag/v4.0.0) you can use nice new features related to development/production mode.
# Organize package.json
Electron-packager copies `node_modules` into the final Electron bundle (which is slow and isn't space-efficient at all). The good news is it ignores all packages in `devDependencies` group in `package.json`. We'll use that.
We need `bindings` dependency to keep in *Electron bundle* `node_modules`. The dependency is responsible for lazy loading of native node.js modules and cannot be part of *javascript bundle*. As it is a dependency of your project dependencies, it is not listed in `package.json`. Simply do `npm i --save bindings`. This can be tricky and can break things but yolo.
Notice deps groups:
{% codeblock package.json lang:json %}
{
"name": "electron-tutorial",
"main": "index.electron.js",
"scripts": {
"build": "webpack",
"electron": "electron .",
"test": "jest"
},
"dependencies": {
"bindings": "^1.3.0"
},
"devDependencies": {
"electron": "^1.8.2",
"electron-packager": "^11.0.1",
"electron-rebuild": "^1.7.3",
"jest": "^22.4.0",
"serialport": "^6.0.5",
"webpack": "^3.11.0"
}
}
{% endcodeblock %}
In projects I develop there's usually a few non-Electron dependencies in the main Electron file (as seen in example below). Keep all non-Electron dependencies inside `dependencies` group (unless you plan to bundle the main file with Webpack's `target: 'electron-main'` option).
{% codeblock index.electron.js lang:javascript %}
const { app, BrowserWindow } = require('electron');
const Raven = require('raven');
const os = require('os');
const isDev = require('electron-is-dev');
const isBundled = !isDev;
if (process.env.NODE_ENV === 'production') {
Raven.config('XXX', {
captureUnhandledRejections: true,
tags: {
process: process.type,
electron: process.versions.electron,
chrome: process.versions.chrome,
platform: os.platform(),
platform_release: os.release()
}
}).install();
}
// ...rest of electron main file
{% endcodeblock %}
I would keep `raven` and `electron-is-dev` in `dependencies` group.
# Make sure there are native modules
Simply copy all native modules (`*.node`) to `build` directory (they should be built in production quality by default). I wrote a few words about them in the [previous article](http://localhost:4000/2018/02/22/integrate-native-node-dot-js-modules-into-an-electron-app-1-slash-2/).
There's a tiny change in `relectron-rebuild` command. By default it won't rebuild modules in `devDependencies` group. Run the command with `t` option: `./node_modules/.bin/electron-rebuild -e node_modules/electron -t prod,dev`.
*Note 1: I've run into this error while running Electron app: `Uncaught Error: Could not find module root given file: "file:///Users/cinan/Coding/js/electron-tutorial/electron-tutorial-darwin-x64/electron-tutorial.app/Contents/Resources/app/build/app.js". Do you have a package.json file?` This is a [known bug](https://github.com/TooTallNate/node-bindings/issues/29). There is a pull request (not yet merged), you can install fixed version with `npm i --save "bindings@https://github.com/ArnsboMedia/node-bindings.git#fix-getFileName-method-for-electron-use"`*
# Can I build the package finally?
First run `PLATFORM=electron npm run build` to create a *javacript bundle*. Build native modules with `./node_modules/.bin/electron-rebuild -e node_modules/electron -t prod,dev` and copy them into `build` directory: `cp node_modules/serialport/build/Release/serialport.node build`.
Now run `./node_modules/.bin/electron-packager . --overwrite` and wait a minute. New *Electron bundle* will be created inside directory `electron-tutorial-darwin-x64` (differs on Linux and Windows).
Check out `node_modules` in *Electron bundle* (in macOS it is `electron-tutorial-darwin-x64/electron-tutorial.app/Contents/Resources/app/node_modules`). There should be a single `bindings` directory. On macOS you can run the product with `open electron-tutorial-darwin-x64/electron-tutorial.app`.
*Note 2: if you find out your `node_modules` directory is empty (although there are `dependencies` defined in `package.json`) then upgrade to npm@next `npm i -g npm@next` ([related bug](https://github.com/npm/npm/issues/19356)).*