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.
Npm run dist-darwin open dist/mac/svelte-app.app In the quickstart guide you’ll find out how to customize the most basic things, e.g: Change the app name through changing the name in the package.json. On macOS/Linux you can build Electron app for Windows locally, except Appx for Windows Store (in the future (feel free to file issue) electron-build-service will support Appx target). You can use build servers — e.g. Travis to build macOS/Linux apps and AppVeyor to build Windows app. By default build for current platform and current arch. The Foo Bar.app folder generated can be executed by a system running macOS, which will start the packaged Electron app. This is also true of the Windows x64 build on a system running a new enough version of Windows for a 64-bit system (via Foo Bar-win32-x64/Foo Bar.exe ), and so on. Now when you run the application on a Mac, the menu bar will have three submenus named Electron, File, and View. Electron.NET also supports native system file dialogs. Let's modify the File menu definition to add a Save As command that prompts the user for a filename and outputs the current process list to that file in comma-delimited format. Now when you run the application on a Mac, the menu bar will have three submenus named Electron, File, and View. Electron.NET also supports native system file dialogs.
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:
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:
Now when that is done open up package.json and add a productname:
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:
Windows
And to build for Windows you can run this from the git bash:
Electron packager windows https://renewpeace482.weebly.com/instagram-app-mac-download.html.
Linux
overwrite: replaces any existing output directory when packaging.
platform: The target platform to build for
arch: the architecture to build for Apple app developer.
icon: sets the icon for the app
prune: runs npm prune –production before packaging the app. It removes unnecesary packages.
Electron Build Mac
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:
Now you can run:
Installer tutorials
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.
Electron Builder Mac
Learn more
Want to learn more about Electron? Macos command line apps. Check out the book Electron in Action By Steven Kinney
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.