Overview

This tutorial answers you:

  • How to make electron apps distribution easier?
  • How to protect electron apps resources?
  • How to setup an icon and a splashscreen for electron apps?

Let's take file-explorer as a sample of an electron app that we will pack.

Traditional Way Of Distribution Has Problems

Usual way to distribute an Electron Application is to provide a lot of files: application's sources (scripts, assets and other resources), and electron binaries.

Look at the typical set of files (yeah, there are a LOT of files):

(This directory should be copied to user computer)
│   blink_image_resources_200_percent.pak
│   content_resources_200_percent.pak
│   content_shell.pak
│   d3dcompiler_47.dll
│   electron.exe
│   ffmpeg.dll
│   icudtl.dat
│   libEGL.dll
│   libGLESv2.dll
│   LICENSE
│   LICENSES.chromium.html
│   natives_blob.bin
│   node.dll
│   snapshot_blob.bin
│   ui_resources_200_percent.pak
│   version
│   views_resources_200_percent.pak
│   xinput1_3.dll
│   
├───file-explorer <-- contains electron application files
│   │   about.html
│   │   index.html
│   │   main.js
│   │   package.json
│   │   README.md
│   │   script.js
│   │   style.css
│   │   ...
│   │       
│   ├───node_modules
│   │   │   address_bar.js
│   │   │   folder_view.js
│   │   │   mime.js
│   │   │   underscore.js
│           ...
│           
├───locales
│       am.pak
│       ar.pak
│       bg.pak
│       ...
│       
└───resources
        default_app.asar
        electron.asar
								

The standard approach has several obvious issues:

  • It's impossible to create a single executable file of an electron application.
  • Application source code are available for anyone.
  • No ways to protect application assets (scripts, images and others).
  • No ways to set executable file icon.
  • No ways to add a splashscreen.

BoxedApp Packer can pack all the files into a single executable file (packed exe). Being run, a packed exe doesn't unpack embedded files on the disk. They are in memory.

Pack The Files

Download BoxedApp Packer and run it. Select electron.exe as input exe, and set output exe path as you want (you can change the output name).

As you know, one needs to pass folder name of the electron app to electron.exe to run it:

> electron.exe file-explorer
That's why you should also click to "Override command line" and type there:
<BoxedAppVar:OldCmdLine> file-explorer
It means then when someone runs the output exe, it runs as if "file-explorer" is passed as an argument.

Click to Application Directory, then click to Add Files..., select all electron binaries (except electron.exe) and add them.

Then click to Import Directory... and firstly select "file-explorer", then "locales" and finally "resources".

Build it and run. It works!

Screenshots

1. Select electron.exe
Select electron.exe
2. Set any output name
Set any output name
3. Override command line
Override command line
4. Add files
Add files
5. Import directories
Import directories
6. Build and run. It works!
Packed electron exe

Download

Both sources and BoxedApp Packer project are available on GitHub.