create account

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

View this thread on: hive.blogpeakd.comecency.com
· @yalzeee ·
$8.15
[Ionic/Electron]: Making windows,mac and debian installers with Electron Forge
![ionic.jpg](https://cdn.steemitimages.com/DQmS4ho2iWke6Uc4wmNdSTD2GCtYJZFb7rRzMD2LLV49Dqs/ionic.jpg)
[image source](https://www.ionicframework.com/)

Repository: [Ionic Github Repository](https://github.com/ionic-team/ionic) 

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
![Screenshot (3).png](https://cdn.steemitimages.com/DQmeEzye8dUB9vqYXVVHKQajJcHcr6nnJr7pxkTqPGABXyD/Screenshot%20(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](https://partner.microsoft.com/en-us/dashboard/registration) 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](https://github.com/electron/windows-installer) for more details on how you could edit your packaging process for windows.
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authoryalzeee
permlinkionic-electron-making-windows-mac-and-debian-installers-with-electron-forge
categoryutopian-io
json_metadata{"tags":["utopian-io","tutorials","programming","stach","wafrica"],"image":["https://cdn.steemitimages.com/DQmS4ho2iWke6Uc4wmNdSTD2GCtYJZFb7rRzMD2LLV49Dqs/ionic.jpg","https://cdn.steemitimages.com/DQmeEzye8dUB9vqYXVVHKQajJcHcr6nnJr7pxkTqPGABXyD/Screenshot%20(3).png"],"links":["https://www.ionicframework.com/","https://github.com/ionic-team/ionic","https://partner.microsoft.com/en-us/dashboard/registration","https://github.com/electron/windows-installer"],"app":"steemit/0.1","format":"markdown"}
created2019-03-09 09:44:48
last_update2019-03-09 09:44:48
depth0
children4
last_payout2019-03-16 09:44:48
cashout_time1969-12-31 23:59:59
total_payout_value6.272 HBD
curator_payout_value1.881 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,158
author_reputation12,484,565,044,191
root_title"[Ionic/Electron]: Making windows,mac and debian installers with Electron Forge"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,957,819
net_rshares11,523,096,728,866
author_curate_reward""
vote details (54)
@portugalcoin ·
$11.27
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](https://join.utopian.io/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](https://review.utopian.io/result/8/3-1-3-4-3-3-4-3-).

---- 
Need help? Chat with us on [Discord](https://discord.gg/uTyJkNm).

[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , , , , , , , , , , , , , , , , ,
properties (23)
authorportugalcoin
permlinkre-yalzeee-ionic-electron-making-windows-mac-and-debian-installers-with-electron-forge-20190309t122759952z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["yalzeee"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/8/3-1-3-4-3-3-4-3-","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2019-03-09 12:28:00
last_update2019-03-09 12:28:00
depth1
children1
last_payout2019-03-16 12:28:00
cashout_time1969-12-31 23:59:59
total_payout_value8.571 HBD
curator_payout_value2.697 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length849
author_reputation599,460,589,822,571
root_title"[Ionic/Electron]: Making windows,mac and debian installers with Electron Forge"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,963,442
net_rshares15,801,982,697,521
author_curate_reward""
vote details (18)
@utopian-io ·
Thank you for your review, @portugalcoin! Keep up the good work!
properties (22)
authorutopian-io
permlinkre-re-yalzeee-ionic-electron-making-windows-mac-and-debian-installers-with-electron-forge-20190309t122759952z-20190312t035549z
categoryutopian-io
json_metadata"{"app": "beem/0.20.17"}"
created2019-03-12 03:55:51
last_update2019-03-12 03:55:51
depth2
children0
last_payout2019-03-19 03:55:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length64
author_reputation152,955,367,999,756
root_title"[Ionic/Electron]: Making windows,mac and debian installers with Electron Forge"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id81,111,502
net_rshares0
@steem-ua ·
#### 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](https://discord.gg/KpBNYGz)**
properties (22)
authorsteem-ua
permlinkre-ionic-electron-making-windows-mac-and-debian-installers-with-electron-forge-20190309t123205z
categoryutopian-io
json_metadata"{"app": "beem/0.20.18"}"
created2019-03-09 12:32:06
last_update2019-03-09 12:32:06
depth1
children0
last_payout2019-03-16 12:32:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length286
author_reputation23,214,230,978,060
root_title"[Ionic/Electron]: Making windows,mac and debian installers with Electron Forge"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,963,591
net_rshares0
@utopian-io ·
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](https://chrome.google.com/webstore/detail/steemplus/mjbkjgcplmaneajhcbegoffkedeankaj?hl=en) or [Steeditor](https://steeditor.app)).

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

<a href='https://steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
authorutopian-io
permlinkre-ionic-electron-making-windows-mac-and-debian-installers-with-electron-forge-20190310t024026z
categoryutopian-io
json_metadata"{"app": "beem/0.20.17"}"
created2019-03-10 02:40:27
last_update2019-03-10 02:40:27
depth1
children0
last_payout2019-03-17 02:40:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length589
author_reputation152,955,367,999,756
root_title"[Ionic/Electron]: Making windows,mac and debian installers with Electron Forge"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,991,239
net_rshares0