## Electron packager tutorial

18 October 2016

In this electron packager tutorial we will look at how to create MacOS, Windows and Linux executables with an app icon. This is also a continuation of the Electron app icon post, so start there if you haven’t read it (It’s short, i promise).

I add this code to the Electron tutorial app on github. Just look at that repo if you want to see all the code.

In this tutorial I package the application on Windows, macOS and Ubuntu Linux. There are some information about building Windows apps from non-Windows platforms in the Electron packager readme.

## 1. Install Electron packager

Electron packager is created by electron-userland and this is what they say about it:

> "Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution."

So lets go ahead and install it. Run these commands in the terminal in the app folder:

    # for use in npm scripts
    npm install electron-packager --save-dev

    # for use from cli
    npm install electron-packager -g

## 2. Setting productname and electron version

Electron packager looks for a product name in package.json, so lets go ahead and add one. We also need to add what version of electron to package the app with.

Lets begin with the electron version. We’ll add that from the terminal with this command:

    npm install --save-dev electron

Now when that is done open up package.json and add a productname:

    {
     "name": "electron-tutorial-app",
     "productName": "Electron tutorial app",
     "version": "0.1.0",
     "main": "main.js",
     "devDependencies": {
     "electron": "^1.4.3",
     "electron-packager": "^8.1.0"
     }
    }

## 3. Building MacOS, Windows and Linux package from the terminal

To get to know what all these flags do, and what more flags exists you can read the electron-packager api.

### MacOS

Now you can run this command from the terminal to build a package for mac:

    electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds

Electron packager mac

### Windows

And to build for Windows you can run this from the git bash:

    electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Tutorial App"

Electron packager windows

### Linux

    electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds

Electron packager ubuntu linux

overwrite: replaces any existing output directory when packaging.

platform: The target platform to build for

arch: the architecture to build for

icon: sets the icon for the app

prune: runs npm prune –production before packaging the app. It removes unnecesary packages.

out: the name of the directory where the packages are created.

## 4. Shortcuts

To make it easier to create new builds we can create scripts in package.json so that we don’t have to remember all these settings. Add the scripts below, making your package.json look like this:

    {
     "name": "electron-tutorial-app",
     "productName": "Electron tutorial app",
     "version": "0.1.0",
     "main": "main.js",
     "devDependencies": {
     "electron": "^1.4.3",
     "electron-packager": "^8.1.0"
     },
     "scripts": {
     "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",
    "package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
     }
    }

Now you can run:

    npm run package-mac

    npm run package-win

    npm run package-linux

## Installer tutorials

DMG installer for macOS tutorial

Windows installer tutorial.

Debian package installer tutorial

Coming soon: Red-hat package.

## Next tutorial

The next tutorial in this series is Electron menu. It explains how to add a menu to your app.

I hope you find this post valuable. If you click the ad below I get paid by someone else and can continue to publish posts for free. I would appreciate it very much.
Login
M ↓ Markdown
Upvotes Newest Oldest
Junaid Javed
1 point
2 years ago

Hey @Cristian this post is very help full for me. thank you so much for your appreciable research and the knowledge you shared with the world!.

Santiago Luquez
2 points
18 months ago

This is very helpfull, I dont know why when I run the command I get this:

WARNING: --asar does not take any arguments, it only has sub-properties (see --help) Packaging app for platform win32 ia32 using electron v11.2.0

-But then nothing happens, I dont get any error, but I dont get the folder with the compile file.

MOHAMMAD THAHAIR
0 points
16 months ago

hi Santiago, even I'm facing same issue. I tried to connect you on LinkedIn.... have you found solution for this error??

Hey @Christian can you please help?

Mike Doran
0 points
16 months ago

I'm having the exact same issue, the warning is just because asar doesn't take arguments anymore, so you can remove the "=true" bit from the command if you haven't already figured that out. as for the packager hanging after the "packaging app for..." line I have no idea. Post here if you figure it out though, I'd definitely really appreciate it lmao

Sherebiah Tishbi
1 point
2 years ago

This certainly is all I was looking for since such a long time! Great article! I build the app for linux (Ubuntu 20.04) which gave me release build. Now when I try to run the executable it asks me to select default application run it! Not sure how to get it work..

# Below is the content of my "release-build" folder, "sermondownloader" is my executable I am trying to run

-rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 167930 Apr 26 11:25 chrome_100_percent.pak -rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 250097 Apr 26 11:25 chrome_200_percent.pak -rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 10221472 Apr 26 11:25 icudtl.dat -rwxr-xr-x 1 sherebiahtishbi sherebiahtishbi 255912 Apr 26 11:25 libEGL.so -rwxr-xr-x 1 sherebiahtishbi sherebiahtishbi 3152384 Apr 26 11:25 libffmpeg.so -rwxr-xr-x 1 sherebiahtishbi sherebiahtishbi 6058008 Apr 26 11:25 libGLESv2.so -rwxr-xr-x 1 sherebiahtishbi sherebiahtishbi 7199112 Apr 26 11:25 libVkICD_mock_icd.so -rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 1060 Apr 26 11:25 LICENSE -rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 1993542 Apr 26 11:25 LICENSES.chromium.html drwxrwxr-x 2 sherebiahtishbi sherebiahtishbi 4096 Apr 26 11:25 locales -rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 125011 Apr 26 11:25 natives_blob.bin drwxrwxr-x 2 sherebiahtishbi sherebiahtishbi 4096 Apr 26 11:25 resources -rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 8691077 Apr 26 11:25 resources.pak -rwxr-xr-x 1 sherebiahtishbi sherebiahtishbi 114612392 Apr 26 11:25 sermondownloader -rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 641676 Apr 26 11:25 snapshot_blob.bin drwxrwxr-x 2 sherebiahtishbi sherebiahtishbi 4096 Apr 26 11:25 swiftshader -rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 1040448 Apr 26 11:25 v8_context_snapshot.bin -rw-r--r-- 1 sherebiahtishbi sherebiahtishbi 5 Apr 26 11:25 version

?
Anonymous
0 points
5 years ago

thanks sir

C
Christian Engvall
0 points
5 years ago

You're welcome!

?
Anonymous
0 points
5 years ago

Great stuff, very helpful : )

C
Christian Engvall
0 points
5 years ago

Glad I could help! :)

Р
Ричард Громов
0 points
4 years ago

Cool stuff. I'm from Traversy Media. ;)

S
searchs
0 points
5 years ago

Sweet tutorial. Thanks so much!

C
Christian Engvall
0 points
5 years ago

You're welcome! Happy to help :)

C
Cezary
0 points
3 months ago

thanks for share. This is very helpful!

S
Siddharth Sharma
0 points
15 months ago

hey when I create a package, which environment file does it take, and can I pass the environment in the electron packager command

C
Chris Buzzerd
0 points
5 years ago

Great article. Got my first electron app to build easily. I noticed that the output is 144MB. Very large for a simple app. Any advice on how to reduce the size?

C
Christian Engvall
0 points
5 years ago

Hi! There seems to be some advice on how to reduce the size in this thread: https://github.com/electron...

C
Chris Buzzerd
0 points
5 years ago

I read the article and tried a few suggestions. I didn't have much luck. I only spent an hour or so, and then I decided to just live with the size. Compiled for Linux my bare bones app is 141MB. Compiled for Windows it is 120MB.

Thanks for the follow up. If anyone finds a solution please post it.

J
Justin Garza
0 points
5 years ago

please do a snap/flatpak/appImage for linux!

C
Christian Engvall
0 points
5 years ago

Sounds like a good idea, i've added an issue to the app-repository https://github.com/crilleen...

You can add a comment there if you want to be notified when the tutorial is published.

?
Anonymous
0 points
6 years ago

Thank you very much! This is the best explication that i have found. A very complete example.

C
Christian Engvall
0 points
5 years ago

You're welcome! Glad i could help!

S
Saad Bin Saeed
0 points
5 years ago

Thank you soooo much @christianengvall:disqus for very concise and best tutorial

C
Christian Engvall
0 points
5 years ago

You're welcome! Happy to help :)

?
Anonymous
0 points
4 years ago

hello
I told you to tell me
The dist folder is not created ...
OS is mac
I used Google Translator.

I
ian giger
0 points
5 years ago

thanks for this tutorial. finally able to build app.

C
Christian Engvall
0 points
5 years ago

You are welcome! I'm glad you found it useful!

غ
غسان بن عبد الله
0 points
3 years ago

thank you for the tuto after run package-win there is no answer no error just :
"Packaging app for platform win32 ia32 using electron v5.0.6"
for long time and no package!!

T
Thamizh
0 points
19 months ago

Yes. I do have the same problem. Is any solution is there for this problem?

F
Fabio Marzocca
0 points
5 years ago

Hi Christian! Great tutorial (this one and all the following!) I made huge steps forward with your help.

A question: In my app I have several code snippets which I need to "polish" before packaging for production (i.e.: web urls, devtools, debug logs, etc). This is becoming a long and annoying exercise and everytime I risk to forget something.

I have tried cross-env, but NODE_ENV is undefined after the packaging, so it is not a solution.
For sure, I am missing something here, as it should be a way to have a conditional packaging without scrolling the whole code...! :-)

C
Christian Engvall
0 points
5 years ago

Hi!
I'm glad the tutorials are helping!

If you do not find the "missing" part maybe you could script the things you need to do before packaging and then run: 'npm run my-prepackage-script && package-mac && my-afterpackage-script'

F
Fabio Marzocca
0 points
5 years ago

Good idea. Thanks again!

O
ozonostudio
0 points
4 years ago

First of all: Great tutorial, i'm really new on Electron and this is one of the first easy to understand tutorials I found.

Second, I have this error, and sine I'm really new on this I don't know what means:
https://uploads.disquscdn.c...

Also I'm using mac to do this, maybe that can help

C
Christian Engvall
0 points
4 years ago

Looks like you are using wine to package for windows, unfortunately i cant help you with that. I'd ask over at the forums: https://discuss.atom.io/c/e...

J
Jagadish .A
0 points
4 years ago

by installing wine package sloved this problem.i installed wine in my arch linux now i got executable file.refer this link to install wine in mac -- https://www.davidbaumgold.c...

I
i.spiritus
0 points
5 years ago

How do you get electron to recognize a base-href? I'm using Electron to wrap around an angular app. The angular app specifies the base-href to be ./v3 However, everytime i package it with electron-packager and electron-builder it goes and seems to set the base-href to / I can't find any info on where to config this in electron, so it can point to the right base-href for my app. any ideas?

C
Christian Engvall
0 points
5 years ago

Hi,

Unfortunately i do not have an answer to this question. I would suggest posting a question in the forums:
https://discuss.atom.io/c/e...

?
Anonymous
0 points
4 years ago

Great blog post!
I am really stuck on something.
When I run:
electorn-packager . —overwrite —out ./dist/
It tries to download electron-v1.4.6-win32-x64.zip
Although I have both v1.4.6 and 1.7.7 (the one that I use) on my machine.
Unfortunately I am on a privte LAN and that is way it cannot download.
How do I tell the electron packager were the 1.4.6 is?
In the electron packager package.json there is no refrence to non of the versions of electron 1.7.7 or 1.4.6.
I copied the packege.jsons (of the app and the electron-packager) from another machine were it works and dosent tries to download.
Any idea?
I will be so great full :)

?
Anonymous
0 points
3 years ago

Thanks for the awesome tutorials! Quick question, if you are building the app on windows, is it possible to make the application for Mac or Linux? It seems to have built perfectly for windows, but it tosses the following error when I try for other platforms

`WARNING: --asar does not take any arguments, it only has sub-properties (see --help)
Packaging app for platform win32 ia32 using electron v6.0.2
WARNING: Found 'electron' but not as a devDependency, pruning anyway
Wrote new app to release-builds\electron-tutorial-app-win32-ia32

hough@LAPTOP-K30NMFV1 MINGW64 ~/Documents/GUIDevs/Electron2
$ npm run package-mac

> electron2@1.0.0 package-mac C:\Users\hough\Documents\GUIDevs\Electron2
> electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds

Packaging app for platform darwin x64 using electron v6.0.2
WARNING: Found 'electron' but not as a devDependency, pruning anyway
The "path" argument must be one of type string, Buffer, or URL. Received type undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron2@1.0.0 package-mac: `electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron2@1.0.0 package-mac script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hough\AppData\Roaming\npm-cache_logs\2019-08-21T03_17_26_563Z-debug.log
`

W
Wilson Prado
0 points
4 years ago

Amazing sir.

J
Jempis Giampietro Fronteddu
0 points
5 years ago

Hi Chiristian,
i have a electron project with a node backend and sqlite3 module.
with npm run start (script: "Electron ."), i not have problems, but if i build with this tutorial i have theis problem: https://uploads.disquscdn.c...

Have you any idea for resolve this problem?
thank's
jempis

C
Christian Engvall
0 points
5 years ago

Hi,
Unfortunately i do not. I'd recommend asking in the Electron forums: https://discuss.atom.io/c/e...

?
Anonymous
0 points
4 years ago

in package.json change: "main": "your file.ja"

E
edbob
0 points
4 years ago

js

W
Wike Sparks
0 points
5 years ago

Hey Christian,
well thanks for the great work,
please help me i could not go any further with this https://uploads.disquscdn.c...

C
Christian Engvall
0 points
5 years ago

You're welcome! Seems like you are having trouble with the icon.
Is the path correct? is there a problem with the icon file. Try using the one that exists in the electron-tutorial app to see if that is the case?

?
Anonymous
0 points
4 years ago

i get similar error. how do i resovled ??

K
KaXaSA
0 points
3 years ago

Fantastic tutorial, it's still relevant in 2019. 👍🏽

Just a small issue I had, instead of:
`"electron-packager . electron-tutorial-app --overwrite **--asar=true** --platform=win32"...`

I had to use:
`"electron-packager . electron-tutorial-app --overwrite **--asar** --platform=win32"...`

## Otherwise I would get a warning:
WARNING: --asar does not take any arguments, it only has sub-properties (see --help)...

For those with the "Cannot find module" error:

1. Check the package.json `"dependencies": { ...`
   if you installed and are using any module they should be listed inside that like:
   `"dependencies": { "electron-settings": "^3.2.0", "electron-window-state": "^5.0.3" },`

2. Check your code for stuff like:
   `require('electron-reload')(__dirname, { electron: require(**`${__dirname}/node_modules/electron/`**), });`

That path works fine until you try to launch the release build executable then you need to comment those lines or do something about the path.

J
James Paul Pena
0 points
3 years ago

Move the electron dependency from dependencies to devDependencies.
"dependencies": { "jquery": "^3.4.1" }, "devDependencies": { "electron": "^7.1.1", "electron-packager": "^14.1.0" }

C
Christian Engvall
0 points
3 years ago

Nice to hear it is still valuable :)

Thanks for coming back and sharing updates!

A
Aakash Bhadana
0 points
5 years ago

@christianengvall:disqus i have successfully created a package for linux but i don't know how to run it on ubuntu, can you please guide me

C
Christian Engvall
0 points
5 years ago

Hi!

Posted a screenshot on a comment below on how i start a packaged application on Ubuntu: http://disq.us/p/1hbid6y

I
IDwithheld
0 points
5 years ago

Finally, Electron packager tutorials that I can follow. Thanks for saving my frazzled sanity!

I trying to build for MacOS on Windows 10, but get the command:
electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds
fails with the error message:
Cannot create symlinks (on Windows hosts, it requires admin privileges); skipping darwin platform

Is this fixable, or do I have to create the app on MacOS?

C
Christian Engvall
0 points
5 years ago

I'm glad the tutorial is helping!
As far as I know you need to build it on macOS. But try asking the question at the forums, maybe someone there knows more :https://discuss.atom.io/c/e...

?
Anonymous
0 points
5 years ago

run command prompt as an administrator

P
phonix
0 points
3 years ago

https://uploads.disquscdn.c... Hello, Christian Engvall, As I am very new to electron I am getting a error while running the command. Can you Please Help me ?

S
Soheil Salah
0 points
3 years ago

Thanks for your effor Christian but it doesn't works with version 5 it gives the following error :

WARNING: --asar does not take any arguments, it only has sub-properties (see --help)

C
Christian Engvall
0 points
3 years ago

The app didn't support v5. if you look in the package.json you can see that the electron version is 3.0.5. However i've updated it now to support 5.0.8. The latest commit in the repo is updated to support it.

R
Russ
0 points
4 years ago

Thank you very much. I love that you added the "shortcuts" section to be complete. Just used this today and it worked like a charm. Great work!

M
MohamedAbbasSiddique Ibrahimsh
0 points
4 years ago

how to create shortcuts section

?
Anonymous
0 points
4 years ago

It worked!. This is the best tutorial ever. Thank you

A
Arif Rahman Hakim
0 points
4 years ago

Thank you so much for this crystal clear and complete tutorial.

A
Arif Rahman Hakim
0 points
4 years ago

can someone give me an example how to use extraResource in this tutorial?

M
Mathieu Hicauber
0 points
5 years ago

Thanks a lot, really helpful. One question though : can the packaged app be executed on a machine without having to install node ? Is it possible to bundle node into the package ? Thanks.

C
Christian Engvall
0 points
5 years ago

Glad the post was of service!
Yep, the packaged app can be executed on a machine that has not installed node.

M
Mathieu Hicauber
0 points
5 years ago

Well that was a rhetorical question :-) If I package the app, then uninstall node.js, when starting the packaged app I get a "node not found" exception. Do you have any idea if there's a particular option to include or not node into the dependencies ? Thanks.

C
Christian Engvall
0 points
5 years ago

ah, interesting. I tried packaging the app, and then move it to a windows computer that didn't have node installed before, and it did start, before answering your question. (I'll have to double check so there really was no node installed) Do you use the prune=true setting (or leave it out, since the default should be true according to the documentation https://github.com/electron... )?

M
Mathieu Hicauber
0 points
5 years ago

I've not set the flag, so must be set to true according to spec. I'll try tonight a build with the flag explicitely set it to false. Thanks for the answer.

C
Christian Engvall
0 points
5 years ago

You should probably leave it true, I only meant to check if it is set to false when you package, which i think could be related since it would not delete the dev-dependencies.

I hope you find why it's not working for you. I'd try asking the question over at the forums, maybe someone there knows the answer: https://discuss.atom.io/c/e...

L
Luca Innocenti
0 points
4 years ago

Thank you for this tutorial...i have a question
I have created successfully packages for Linux, Mac and Windows but every package is huge in dimension,,,also after tgz...any suggestion to reduce the size of final package? Thanks. Luca

H
HJ.c_
0 points
5 years ago

Hey great write-up, im having a strange problem as i go from development to production, is there anyway i can access dev-tools in compiled mode so i can see what the error is?

C
Christian Engvall
0 points
5 years ago

Thanks!

You can add the Developer tools in the menu of the app and open it from there. This tutorial adds a menu, and the example menu structure has a developer tool menu-item in it: https://www.christianengval...

Or you can just toggle the developer tools from any button at all by using toggleDevTools() : https://electron.atom.io/do...

H
HJ.c_
0 points
5 years ago

Seriously, you're a life saver, i just came across your article :) got the dev tools open! now time to debug :D keep the great articles coming, really helping people!

C
Christian Engvall
0 points
5 years ago

Happy to help!
Good luck with the debugging :)

M
MohamedAbbasSiddique Ibrahimsh
0 points
4 years ago

"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Tutorial App"",
this work withe super sir
but appname.exe file how to work in specific location pls help me sir
ex:
for app-name-win32-ia32 folder in gift.exe file copy to past on desktop but dot working sir but working well on contain folder

how to use shortcuts

D
David Ward
0 points
3 years ago

This was Great! saved me from writing in python. Not that I don't like python but Node allows for prettier interfaces in my opinion.

J
Jonathan Day
0 points
4 years ago

thank you for the detailed tutorial. very descriptive for exactly what i needed help with. i only have two things im confused about regarding this tutorial as well as the icon tutorial the goes previous to this. first is do you only need the 1024x1024 icon for each filetype? in the icon tutorial you had an image of your file structure that showed multiple different icon sizes and so i thought you would need an icon file for each possibly needed size. does using a 1024x1024 work for areas the icon may need to be smaller such as taskbar icons and tray icons? if you do need to use multiple sized icon files then how would you package it to use any based on necessary size for each situation? the second confusion lies in the icns file type. i am a windows user and havent dealt with icns extension until now. from what it seems you will only need one file for all sizes? or am i mistaken on that? and if i am not mistaken then do you have to convert all sizes of a png into a single icns file?

C
Christian Engvall
0 points
4 years ago

You could use only one size i think, but as you say you could use other sizes for taskbar and tray icons. I'd ask for more info at the forums.

You can use a tool like https://iconverticons.com/o... to get the sizes and formats automatically

?
Anonymous
0 points
5 years ago

Hello,
I must say it is very good detailed tutorial.
Just need to ask one thing that the packaging here which is prepared is having many dll and resource files.
Can't we get a single installer(.exe or .msi) file which can be installed in any machine?

C
Christian Engvall
0 points
5 years ago

Hi!

This post contains steps on how to create a windows installer: https://www.christianengval...

S
Subha
0 points
5 years ago

https://uploads.disquscdn.c... .Thank you.This is the most easily understandable blog on this topic.I am able to sucessfully package but unable to display the desired icon when the app is closed.But when the app is running it successfully dispalays the deired icons.

C
Christian Engvall
0 points
5 years ago

Glad i could help!

Not sure why the icon is not displayed in explorer. Did you use a service to create a .ico-file or did you rename a .png to ico? if so you could try a service instead.

Maybe you could ask people in the electron forums:https://discuss.atom.io/c/e... or ask the question as an issue on the repo: https://github.com/electron...

?
Anonymous
0 points
3 years ago

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! shopping-list@1.0.0 package-win: `electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Tutorial App"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the shopping-list@1.0.0 package-win script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\narayanapillaik\AppData\Roaming\npm-cache_logs\2019-05-07T07_24_13_422Z-debug.log

S
Stanislav Ploschansky
0 points
4 years ago

Thanks for perfect tutorials! Could you help me with following:

1. I'm using electron-edge and need to include my DLLs into the package, so they available at runtime then. How to do that? (of course I can copy them as files to output but would nicer have them embedded into package as below with config.json)
2. I'm using config ("const config = require("./data/config.json");") and would like have it available as file, but it embedded into package automatically so, even if I create such file, it will not used

How to affect on this behavior?

C
Christian Engvall
0 points
4 years ago

Hi!
You're welcome!

I'd try asking these questions in the electron forums https://discuss.atom.io/c/e... . Hopefully someone has an answer for you there!

S
Stanislav Ploschansky
0 points
4 years ago

actually I found the answer. Indeed all files packed in ASAR and I just need to extract them. So, well known RTFM :)

K
Ken Lai
0 points
5 years ago

Thank you for your help! it help me to create the package successfully!

However, I found something wrong!

For the part of "For building Windows you can run this from the git bash:", the slash should be deleted as shown in the attached picture.

https://uploads.disquscdn.c...

If you haven't delete the 2 slash, the product name will become "Tutorial",
"release-builds/Tutorial-win32-ia32/Tutorial.exe" which is wrong would be created. The right one should be "release-builds/Electron tutorial app-win32-ia32/Electron tutorial app.exe".

It is very important if the name is inconsistent because it will have some problem when you create the shortcut of "electron-windows-installer"

C
Christian Engvall
0 points
5 years ago

Thanks for sharing, I will update the Github repository(or if you would like to send a pull request where this is fixed) and the blog post as soon as I can.

K
Ken Lai
0 points
5 years ago

I think just changing the blog is okay. Because there is no problem for the scripts "package-win" in "package.json" file.

"package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Tutorial App""

It just has the problem when user execute it directly in cmd. (Which is i have mentioned above.)

Thanks!

?
Anonymous
0 points
3 years ago

I am sorry christian, but electron is terrible for web to desktop apps(not your effort). I use to use Java web-view from javafx to integrate web pages to the desktop, and obstruct the html files. It worked well, however i needed something better for rendering to current day use. I manged to compile qt webkit and webkitgtk, webkitgtk had the best rendering out of the two. However decided to give election a try as the fan boys insisted its ''god sent'', sadly electron requires internet access to install via npm each time which is not good if you have a project to do for a client and the web is down, i noticed this. i made the exception, i made some test projects, everything went fine.... Until the packaging part the most important part, and it was Waste of time, after flowing tutorial after tutorial on package deployment got no closer to fixing the problem, can't find the problem on google and how to fix it. i wish i had spent the whole time writing my game in c++ with sdl with gl thats more reliable. You know its 2019, these deployment issues should not exist, with unexplained errors in clarity etc, i am feeling very angry at electron team, i am a open source dev myself for almost 15 years, its no excuse, i am sorry, because i spent two years for the current 3d game i programmed sadly it has gone to waste all because of no one has build a up to date viewer for rendering that actual works as it should even oracles webview from javafx for java is outdated it does not support webgl for example. Looks like i am going to have to be the one thats going to have to build a web/javascript compiler that actually works at some point, i am serious so laugh if you want, and be rude (just look at the comments below me for problems hows that good?), and be critical, because one day you may end up using it my compiler. But first i need to hit the energy drinks and port all my code over to c++, for my game, i have a lot a programming code to go in, before i start writing a web compiler for machine code. - Peace

ジ
ジャコスウッディン
0 points
3 years ago

EPERM: operation not permitted, rmdir 'C:\Users\USER\AppData\Local\Temp\electron-packager\win32-ia32\level3-win32-ia32\resources\app'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! level3@1.0.0 package-win: `electron-packager . level3 --overwrite --asar --platform=win32 --arch=ia32 --icon=images/icons/icon.ico --prune=true --out=release-builds --version-string.ProductName="level3"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the level3@1.0.0 package-win script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Roaming\npm-cache_logs\2019-09-17T06_47_26_527Z-debug.log

Can anyone help me?

V
vidu2007
0 points
7 months ago

'electron-packager' is not recognized as an internal or external command, operable program or batch file.

I installed electron packager but it's showing this. Can anyone help me please?

S
SAURABH CHADHA
0 points
5 years ago

thanks for the awesome and easy tutorial but your shortcut method did not work, it gave me errors. Does indexeddb, local storage work with electron ?

C
Christian Engvall
0 points
5 years ago

I'm not familiar with indexedddb. I'd recommend asking this question in the Electron forums https://discuss.atom.io/c/e...

E
Ethan
0 points
5 years ago

Hey Christian,
Im running into an issue where NPM wont install electron and save to --dev-save after Ive created my application!

C
Christian Engvall
0 points
5 years ago

Hi Ethan!

I'm not sure i understand. Would you like to elaborate?

S
SAURABH CHADHA
0 points
5 years ago

When i am wrapping this pen - http://codepen.io/Polanco08... with electron , its not working, any guidance please

Q
Quốc Hưng Lê
0 points
5 years ago

Hey Christian,

Thanks for this article. Unfortunately, I got this error after trying out your method.
Any idea why?

https://uploads.disquscdn.c...

Btw, I tried electron-builder as well, but still no luck :(

I'm using electron-builder 19.42.1 & electron 1.7.9

Y
Yura Chumak
0 points
5 years ago

Did you have a module 'glob' in your dependecies in package.json?
I had error like this when module name was in devDependencies, not in dependencies

N
Ncl Sales
0 points
5 years ago

Thank you very much! Where do i include customized asar pack e.g. asar pack app gafm-win32-x64/resources/app.asar --unpack-dir {x1,x2,x3}

C
Christian Engvall
0 points
5 years ago

Hi!

I'm not sure. I think you should be able to use --unpack-dir in the package.json scripts.
Maybe someone in the electron forum has an answer? https://discuss.atom.io/c/e...

N
Ncl Sales
0 points
5 years ago

Tks for your reply Christian. I will try to follow in the forum.

Brgds,
Noel

H
Helen AndPeter Burns
0 points
5 years ago

Hey, thank you so much for your brilliant tutorials... I've successfully managed to package mac and create the installer for it, and I've managed to package windows with no errors but when I come to open the exe it throws up these two dialogs one after the other... any ideas?!

https://uploads.disquscdn.c...

C
Christian Engvall
0 points
5 years ago

Hi! Sry for late reply. Not sure why might be causing this.
Try ask this in the electron forums. Maybe someone there has encountered the same problem. https://discuss.atom.io/c/e...

H
Helen AndPeter Burns
0 points
5 years ago

No worries at all! I actually 'fixed' it this morning so don't worry... it was because I was removing the exe from its folder with all the dlls in after I packaged it to try and install it. It installed fine if I left it in this folder when installing. Not super helpful for distribution though so I got the create windows installer working this morning and found that creating the installer from the exe was the way to go. Thanks so much for replying though, and seriously good tuts as well! I'm learning that everyone's systems have so many slight variations, even within windows and mac, that one tut on a topic is rarely enough! Hopefully I'll only need to go through this painful trial and error once with this project and I'll know what works for my setup for future projects! Just got to master the auto updating now... any tips?!

C
Christian Engvall
0 points
5 years ago

Awesome.
Haven't tried the auto update features yet, so no tips there unfortunately. Hopefully Google has some good answers for you!

A
Abhi Rawat
0 points
4 years ago

Hii Christain i package my electron app using your tutorial now i am getting uncaught exception i.e error finding node sqlite3 modules.. WHEN I RUN .exe pls help

Y
Yamur Kahtan
0 points
5 years ago

Thank you, this is the best explanation, but I got this error when I run it.

Do you have solution?

https://uploads.disquscdn.c...

Y
Yamur Kahtan
0 points
5 years ago

This error comes when I tried to execute the app 32bit under windows 10 64 bit.

C
Christian Engvall
0 points
5 years ago

Not easy to say what it might be. I've also encountered modules that wont work after it is packaged. My solution was to write code that didn't need the module in question. But it's a different solution in every app.

?
Anonymous
0 points
5 years ago

How you run this packaged app on linux?

C
Christian Engvall
0 points
5 years ago

https://uploads.disquscdn.c...

I double click on the Electron tutorial app in the folder that is created during the packaging process.

R
Rajesh Kumar J
0 points
4 years ago

hi @christianengvall:disqus
once i took build the icon is not working
Here is the script i used " "package-linux": "electron-packager . Desktop-Wallet --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/logo.png --prune=true --out=release-builds""
can you please help me with this..Thanks in advance

T
thanh vo
0 points
16 months ago

Sorry, I have a question with my app when I build it in eviroments linux, processes render a folder 'electronjs-linux-x64' and inside have file 'electronjs' and it can't run. I don't known where problem !!!

S
Sachin Shrivastava
0 points
2 years ago

Great..!! build file generated but not working .. if I move that build file from the directory. It's showing an error of "ffmpeg.dll file not found". Please resolve this by which i can share my application with everyone.

P
praveen pasane
0 points
4 years ago

Thank you very much!
I am able to execute in windows 10 but i am not getting how to execute it in linux OS .please do guide me as i am new to electron and linux

N
Nabtron
0 points
5 years ago

It says: ENAMETOOLONG: name too long, unlink

C
Christian Engvall
0 points
5 years ago

Hi!
Would you like to elaborate? Is there a question in there somewhere?

S
Seksuolog Online
0 points
13 months ago

great tutorial. I was looking for something like that!

M
Mike23
0 points
5 years ago

Hi Christian! , thanks that was a great tutorial. To be able to use the
electron generate app in windows. all we need is the .exe file right? no
need any other folders or files ?

S
Sherebiah Tishbi
0 points
2 years ago

Hi - electron-packager is not working to create windows package. it shows below error

Packaging app for platform win32 x64 using electron v8.2.3 ENOENT: no such file or directory, rename 'C:\Users\SHEREB~1\AppData\Local\Temp\electron-packager\win32-x64\sermon-downloader-2-win32-x64\electron.exe' -> 'C:\Users\SHEREB~1\AppData\Local\Temp\electron-packager\win32-x64\sermon-downloader-2-win32-x64\sermon-downloader-2.exe'

Y
yes yes
0 points
2 years ago

I just tried in on Windows10 and here it is working fine, thanks.

M
Mój Seksuolog
0 points
10 months ago

+1 me too. Great tutorial

A
Andros Guiradó
0 points
5 years ago

Thanks so much!

C
Christian Engvall
0 points
5 years ago

You're welcome!

J
Jagadish .A
0 points
4 years ago

Amazing tutorial Bro.

P
Paula Andrea
0 points
6 years ago

Hi! Good post, but I have a question, the commands electron-packager should be run in each OS? I mean, for generate the .exe the electron-packager must be run in windows?.
I tried to create all bundles from Ubuntu and only works the executable for ubuntu, in windows the app crash with error "cannot find module"

C
Christian Engvall
0 points
6 years ago

Hi, that's correct. Run the command on each OS.
You can build a Windows application from a non Windows OS according to the readme: https://github.com/electron...

P
Paula Andrea
0 points
6 years ago

Thank you!
I did it and i found my problem is about native modules, It's a real headache using sqlite3 module, hard days are coming :(

C
Clipart
0 points
3 years ago

in package.json change: "main": "your file.ja"

S
Sai Prakash
0 points
4 years ago

Hi Christian.. This tutorial helped me in packaging the app for linux distribution.
But when I am trying to package it for windows on linux os, it is throwing some errors.
So, please can u give me a solution.

L
Luca Innocenti
0 points
4 years ago

In my experience on linux you have to install Wine 32 bit

P
PoVrEdiTeL
0 points
5 years ago

npm run package-mac

missing script: package-mac

?
Anonymous
0 points
5 years ago

What a legend

?
Anonymous
0 points
4 years ago

Excellent tutorial @christianengvall:disqus! How can i bundle a rasbpian os image along with my app? My app needs the image file to burn it to a SD card

C
Christian Engvall
0 points
4 years ago

Thanks!

I do not know how bundle an os image along with the app. Try asking over at the forums: https://discuss.atom.io/c/e...

E
Emiliano Carrillo
0 points
5 years ago

Awesome, thankyou!

C
Christian Engvall
0 points
5 years ago

You're welcome!

Ż
Żarówki H7
0 points
2 years ago

yes! thanks this is what I was looking for my app dev - we tried like 10 different soluitions and this worked out

V
vedran
0 points
24 months ago

Great tutorial! Many thanks. I did it for windows and everything is great. My linux packaging process went with nos issues reported, but when I run packaged binary it uses original (source files) and locations? I created installer as well (dab) and it installs correctly (usr/bin and usr/lib) but is again using my source files located in my home directory??? I am new to linux so I guess I am doing something wrong. Any ideas and help would be appreciated. Thanks

V
vedran
0 points
24 months ago

@Cristian great tutorials and great help for me! Many thanks! I did everything according and for windows all ok. I have problem with linux packing (I am new to linux so may be something trivial). Process goes ok, package is made, but when I run it it uses files of my source files (source code used for packing) not the packaged resources?? Any ideas?

"package-linux": "electron-packager . esst --overwrite --platform=linux --arch=x64 --icon=project/css/esst.png --asar=false --prune=false --out=release-builds",

"devDependencies": { "electron": "^8.2.5", "electron-installer-dmg": "^3.0.0", "electron-packager": "^15.0.0", "electron-winstaller": "^4.0.0", "gulp-connect-php": "^1.0.3", "gulp-util": "^3.0.8", "jquery": "^3.5.1" },

Many thanks

Y
ykonda
0 points
5 years ago

Thank you for the tutorial.
I think it would be helpful if you mention that you need to install wine to make a windows package, and perhaps a link on how to install wine.

C
Christian Engvall
0 points
5 years ago

You're welcome!
Thanks for the input! I've updated the post with a link to the packager readme on building Windows-apps from non-Windows platforms.

A
Adam Radivojevic
0 points
3 years ago

--asar doesn't take any arguments (at least not anymore), so you should delete =true from the script lines.

C
Christian Engvall
0 points
3 years ago

Thanks for sharing!