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 an example of an electron app that we will pack.
Traditional Way of Distribution Has Problems
The 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 the user's 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 flaws:
- It's impossible to create a single executable file of an electron application.
- The application's source code is available to anyone.
- No ways to protect the application's assets (scripts, images, etc.)
- No ways to set the executable file icon.
- No ways to add a splashscreen.
BoxedApp Packer can pack all the files into a single executable file (packed exe). When being executed, the packed exe doesn't unpack embedded files to the disk; they remain in the memory.
Pack the Files
Download BoxedApp Packer and run it. Select electron.exe as the input exe and specify the output exe path as you want (you can change the output name).
As you know, one needs to pass the folder name of the electron app to electron.exe in order to run it:
> electron.exe file-explorerThat's why one should also click "Override command line" and then type:
<BoxedAppVar:OldCmdLine> file-exploreron the screen that appears. It means then when someone runs the output exe, it runs it as if "file-explorer" was passed as an argument.
Click Application Directory, then click Add Files..., select all the electron binaries (except electron.exe), and add them.
Then click Import Directory... and first select "file-explorer" and then "locales" and, finally, "resources".
Build it and run. It works!
Screenshots
1. Select electron.exe
2. Set any output name
3. Override command line
4. Add files
5. Import directories
6. Build and run. It works!
BoxedApp is a virtualization library, an executable packer, and a developer API to create custom packers.
Docs
Press
Misc
Copyright © Softanics. All rights reserved.