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

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

Tutorial

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

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.