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
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"
Linux
electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds
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
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.
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!.
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.
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?
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
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
thanks sir
You're welcome!
Great stuff, very helpful : )
Glad I could help! :)
Cool stuff. I'm from Traversy Media. ;)
Sweet tutorial. Thanks so much!
You're welcome! Happy to help :)
thanks for share. This is very helpful!
hey when I create a package, which environment file does it take, and can I pass the environment in the electron packager command
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?
Hi! There seems to be some advice on how to reduce the size in this thread: https://github.com/electron...
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.
please do a snap/flatpak/appImage for linux!
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.
Thank you very much! This is the best explication that i have found. A very complete example.
You're welcome! Glad i could help!
Thank you soooo much @christianengvall:disqus for very concise and best tutorial
You're welcome! Happy to help :)
hello
I told you to tell me
The dist folder is not created ...
OS is mac
I used Google Translator.
thanks for this tutorial. finally able to build app.
You are welcome! I'm glad you found it useful!
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!!
Yes. I do have the same problem. Is any solution is there for this problem?
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...! :-)
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'
Good idea. Thanks again!
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
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...
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...
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?
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...
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 :)
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
`
Amazing sir.
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
Hi,
Unfortunately i do not. I'd recommend asking in the Electron forums: https://discuss.atom.io/c/e...
in package.json change: "main": "your file.ja"
js
Hey Christian,
well thanks for the great work,
please help me i could not go any further with this https://uploads.disquscdn.c...
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?
i get similar error. how do i resovled ??
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:
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" },
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.
Move the electron dependency from dependencies to devDependencies.
"dependencies": { "jquery": "^3.4.1" }, "devDependencies": { "electron": "^7.1.1", "electron-packager": "^14.1.0" }
Nice to hear it is still valuable :)
Thanks for coming back and sharing updates!
@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
Hi!
Posted a screenshot on a comment below on how i start a packaged application on Ubuntu: http://disq.us/p/1hbid6y
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?
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...
run command prompt as an administrator
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 ?
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)
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.
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!
how to create shortcuts section
It worked!. This is the best tutorial ever. Thank you
Thank you so much for this crystal clear and complete tutorial.
can someone give me an example how to use extraResource in this tutorial?
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.
Glad the post was of service!
Yep, the packaged app can be executed on a machine that has not installed node.
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.
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... )?
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.
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...
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
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?
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...
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!
Happy to help!
Good luck with the debugging :)
"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
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.
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?
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
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?
Hi!
This post contains steps on how to create a windows installer: https://www.christianengval...
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.
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...
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
Thanks for perfect tutorials! Could you help me with following:
How to affect on this behavior?
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!
actually I found the answer. Indeed all files packed in ASAR and I just need to extract them. So, well known RTFM :)
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"
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.
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!
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
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?
'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?
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 ?
I'm not familiar with indexedddb. I'd recommend asking this question in the Electron forums https://discuss.atom.io/c/e...
Hey Christian,
Im running into an issue where NPM wont install electron and save to --dev-save after Ive created my application!
Hi Ethan!
I'm not sure i understand. Would you like to elaborate?
When i am wrapping this pen - http://codepen.io/Polanco08... with electron , its not working, any guidance please
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
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
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}
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...
Tks for your reply Christian. I will try to follow in the forum.
Brgds,
Noel
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...
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...
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?!
Awesome.
Haven't tried the auto update features yet, so no tips there unfortunately. Hopefully Google has some good answers for you!
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
Thank you, this is the best explanation, but I got this error when I run it.
Do you have solution?
https://uploads.disquscdn.c...
This error comes when I tried to execute the app 32bit under windows 10 64 bit.
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.
How you run this packaged app on linux?
https://uploads.disquscdn.c...
I double click on the Electron tutorial app in the folder that is created during the packaging process.
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
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 !!!
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.
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
It says: ENAMETOOLONG: name too long, unlink
Hi!
Would you like to elaborate? Is there a question in there somewhere?
great tutorial. I was looking for something like that!
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 ?
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'
I just tried in on Windows10 and here it is working fine, thanks.
+1 me too. Great tutorial
Thanks so much!
You're welcome!
Amazing tutorial Bro.
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"
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...
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 :(
in package.json change: "main": "your file.ja"
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.
In my experience on linux you have to install Wine 32 bit
npm run package-mac
missing script: package-mac
What a legend
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
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...
Awesome, thankyou!
You're welcome!
yes! thanks this is what I was looking for my app dev - we tried like 10 different soluitions and this worked out
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
@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
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.
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.
--asar doesn't take any arguments (at least not anymore), so you should delete =true from the script lines.
Thanks for sharing!