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