[Ionic/Electron]: Making windows,mac and debian installers with Electron Forge

in #utopian-io5 years ago

image source

Repository: Ionic Github Repository

Software Requirements:
Visual Studio Code(Or any preferred code editor),
npm, ionic.

What you will learn:
In this tutorial you would learn about how to manage your ionic/Electron app on whatever platform you choose to target covering these major concepts

  • How to initiate an electron-forge project
  • How to import an existing ionic/electron project
  • How to package your ionic/electron application for release


In the last tutorial we dealt with using electron api's within an ionic built application. If your followed, you should be able to build a full electron application with ionic theming and electron functionality. Being able to do this you should be planning towards packaging and releasing this application and for this there are quite a couple of libraries which can come in quite handy such as electron-builder, electron-packager and for the purpose of this tutorial electron-forge. The common question is why i am choosing electron forge and the answer is quite simple. They have made it way easier for beginners. They have starter templates so you can easily begin with them but since I have an existing project i have to import the project into the electron forge project.

Initiating a new project

First thing to do will be to install electron-forge globally and initialize a new electron-forge project

npm install electron-forge -g
electron-forge init new-project//You could change the name if you please

This would initiate your directory
Screenshot (3).png
This would start off a new electron project with the preset starter templates that you can use to start off. You can see this templates using

electron-forge start

Importing your existing project

You would then need to import your existing ionic electron project into this newly created directory. This can be done easily by using this command while specifying the filepath to the existing project.

electron-forge import C:/users/myAccount/ionicProject

This would copy your project in a way that all the commands on electron-forge can still be run within your existing project which is now copies to the new projects directory. After this you can begin trying to package your application for your desired platforms.

Packaging your application

Packaging for windows, mac and other operating systems can differ as they are all app for different stores and operating systems. For instance for windows you need to have a signing key or else your app would be presented as harmful if you upload it to a website for download. You would need to have a Microsoft Developer Account so that you would be able to sign your applications and they would be able to identify it. You pay a one time developer fee of about $19.

Your electron forge project should have this included in the package.json which is by default the configuration for all builds. Within the areas stated below, you can include any custom configuration within your build. Make sure to add the signing certificate you obtained from your windows, mac or linux developer account.

  "make_targets": {
    "win32": ["squirrel"], // An array of win32 make targets
    "darwin": ["zip", "dmg"], // An array of darwin make targets
    "linux": ["deb", "rpm", "flatpak"] // An array of linux make targets
  "electronPackagerConfig": {},
  "electronWinstallerConfig": {},
  "electronInstallerDMG": {},
  "electronInstallerFlatpak": {},
  "electronInstallerDebian": {},
  "electronInstallerRedhat": {}

Electron forge uses electron-winstaller for the installation process so you could also visit the GitHub Repository for more details on how you could edit your packaging process for windows.


Thank you for your contribution @yalzeee.
We've been reviewing your contribution and suggested the following points for your next tutorial:

  • Your tutorial is quite short for a good tutorial. We recommend you aim for capturing at least 2-3 concepts.

  • Use shorter paragraphs and give breaks between them. It will make it easier to read your tutorial.

Looking forward to your upcoming tutorials.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Chat with us on Discord.


Thank you for your review, @portugalcoin! Keep up the good work!

Hey, @yalzeee!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Hi @yalzeee!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Coin Marketplace

STEEM 0.26
TRX 0.10
JST 0.033
BTC 42137.54
ETH 2237.04
USDT 1.00
SBD 4.86