new file mode 100644

@@ -0,0 +1,105 @@

+---

+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)).*

+

+