How to Generate Windows build For Ionic – Capacitor Applications using electron

Share the post

Hello All, In the last topic, We discussed How to show local notification in the Ionic Capacitor application. In this topic, We will discuss How to generate windows build for our Ionic – Capacitor application using electron. Also, We will discuss What is electron? What is electron-packager? And Offcourse, Steps to generate Windows build for our Ionic – Angular Or Ionic – React application.

What is Electron?

The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It’s based on nodejs & chromium.

What is electron-packager?

Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI.

Steps to generate Windows build in an Ionic application

Step 1: Create Ionic Project using the following command

ionic start <appname> <template>

Step 2: Install electron to our Ionic Project

npm i @capacitor-community/electron

Step 3: Add electron as a platform to our Ionic Project

npx cap add @capacitor-community/electron

Step 4: Install electron packager to create Windows / Mac Build

npm install electron-packager --save -dev

Step 5: Update the script section in the package.json file

"build:windows": "electron-packager ./electron IonicApp --overwrite --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds"

Step 6: Create a release build for windows

npm run build:windows

Step 7: Create an electron build

ionic cap run electron electron:start

Leave a Comment