Include node_modules while packaging Electron desktop app?

Question

I am trying out a simple Hello World Electron app in Linux. I want to package it and install it on Windows as well to test if it runs fine there.

When I did 'npm install', it created a node_modules folder of ~112 MB. I don't have anything yet that even makes use of these modules, and the sample starts fine if I delete this folder too. The package.json file has 'electron-prebuilt' as the only item in devDependencies so I assume the node_modules folder was for that.

So my doubt is should this folder be included in the final package if I want it to run on Windows?

I checked the documentation here but it just has the 3 files and no dependencies so I was not sure of what to do in cases where you explicitly have some.

Solution 1

Short answer:

You do need node_modules folder in your final distribution if you install additional libraries via npm and then reference them from your code.

Long answer:

I'm not sure, but you are probably confused because you installed electron-prebuilt, which is also an npm package, but this one is special, since it's required for development and packaging, and doesn't serve as a simple library for your app. I'd recommend using a two-package structure for your application to separate development and application packages. Here's an example of a folder structure for my electron app (let's call it MyApp):

• MyApp: solution root folder, for a simple app this would map onto your repository root folder

  • gulpfile.js - build configuration if you use gulp
  • package.json - dev package metadata. Dev package is not your application, but rather a wrapper around it.
  • other files, like .hgignore, README.md, whatever else.
  • node_modules : all dev dependencies, this will contain packages, which you need for development, like gulp, electron-prebuilt, gulp plugins, etc. exluded from repo

  • dist : distribution folder, this is where my gulp tasks are to put packaged app distribution when it goes to production. excluded from repo

  • src : all app sources. Now this is your application. All contents of this folder get packed into a distribution.

    • bower.json - bower manifest, in case you're using it
    • package.json - app package metadata
    • node_modules: all npm app dependencies (like sqlite, angular, d3, etc.); excluded from repo
    • bower_modules : all bower app dependencies excluded from repo
    • app.js - your app entry point

So, when I need to install a package, which helps me in development (usually a gulp plugin) I navigate to /MyApp and execute npm install -D [package] there. When I need to install a library for my app to use, like a front-end framework, I navigate to /MyApp/src and execute npm install -S [package] there.

When I need to quickly run electron app in development I feed /MyApp/src folder to gulp-run-electron plugin. Alternatively, if you installed electron-prebuilt for you dev package, you can navigate to /MyApp and run /MyApp/node_modules/electron-prebuilt/dist/electron[.exe] ./src. You can also install electron-prebuilt globally with npm i -g electron-prebuilt and just run electron ./src.

When I need to package my app for the release or testing I use gulp-electron plugin for gulp to produce a distribution. There are other ways to do this, like using electron-packager or one of its wrappers for a build system of your choice, or doing the whole thing manually.

Edit: Since you're concerned about the size, yeah prebuilt electron itself will take quite a lot of space, but the installer can be shrunk effectively with some archiver, like 7z.

Solution 2

electron-packager is a light-weight abstraction that takes some of the tedium out of building Electron applications for every platform.

It will go through your applications and create a executable for each of the operating systems that you specify. It will take care of bundling your application. You don't have to worry about specifying that node_modules be in the final build.

Generally speaking, it's not recommended to even check node_modules into version control.

Comments

[Admin]

I added node_modules to the - - ignore property while packaging and the size was still the same. The exe file by itself was 70 MB, and I guess that's because of bundling electron? Irrespective of whether I use electron packager or not I'll end up with some similar size package then?

[Steve Kinney]

Kodathon—Yea, in my experience, OS X bundles tend to be around 450MB, Linux around 120MB, and 225 for Windows. This is because we're pretty much including a stripped down version of Chrome, all of Node, and a bunch of packages for OS integration above and beyond whatever code we wrote.

[Admin]

Steve Kinney - That's pretty large. Microsoft's Visual Studio Code is built on top of Electron but doesn't seem to be a huge installer. Anyway, can't it be deployed such that node and others will be deployed only if it is not already present on the target system, like after a pre-requisite check?

[Dmitriy]

@Kodathon VSCode installation takes roughly 130MB of space on Windows for me. Installer takes 30MB. My small app takes roughly 140MB when unpacked, and takes only 35MB when archived with 7zip on default settings.

[charles ross]

I was also mystified by my overpopulated node_modules when working up a tutorial app. You've help me understand that my use of electron-prebuilt can explain that.

[Charles Robertson]

@Dmitriy I am wondering where your ipcMain is? I presume your ipcRenderer logic goes in src/ I am using this template: github.com/maximegris/angular-electron Basically, there is: app/main.ts [ipcMain] src/app/ [ipcRenderer] But, I can’t see where your NodeJs code is?

[Charles Robertson]

@Dmitriy Also, is their a tutorial on how you use 7z to shrink your installer? Or are you just saying that you create the .exe as normal and then archive it, using 7z, before distribution? Thanks 🙏