⚠️ This method is allowed for work in a mac M1 Before create your project be sure to had the ionic cli by runningionic --version
To install run :npm install -g @ionic/cli
⚠️ You need to install Android Studio for build the app
1) Create a project with the ionic cli
ionic start myProjectName tabs --type=vue --capacitor
Note: You can choose another template for starting : tabs, blank, sidemenu
2) Go to our project and add the depencie for electron
cd myProjectName
npm i @capacitor-community/electron
3) Build your app
ionic build
4) Use capacitor to create the Electron project
npx cap add @capacitor-community/electron
5) Go to the new directory, build the app and run the dev-server
cd electron
npm run build
npm run electron:start-live
6) Build the excecutable for desktop
npm run electron:make
Note: If no publisher is defined delete in
electron-builder.config.json
"publish": { "provider": "github" },
💥 case error :
Exit code: ENOENT. spawn /usr/bin/python ENOENT failedTask=build > stackTrace=Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT
Update your
package.json
"devDependencies": { "electron": "^18.0.0", "electron-builder": "^23.0.3", "npm": "^8.8.0", "node-cmd": "^5.0.0", "electron-rebuild": "^3.2.7", "typescript": "~4.3.5" },
7) Add the build Android On the root directory run :
ionic capacitor add android
8) Build the APK On the root directory run :
npx cap copy && npx cap sync
You can now open the Android app by running :
npx cap open android
9) We can now create new commands on the root directory
"scripts": {
"android:open": "npx cap open android",
"capacitor:build": "npx cap copy && npx cap sync",
"build:all": "npm run build && npm run capacitor:build && npm run android:open && cp -r ./dist ./electron/app && npm --prefix ./electron run build && npm --prefix ./electron run electron:make"
},
That build the project, create the APK in the ./android
directory, open Android Studio for build the app, build the Electron app and create a .dmg
package in ./electron/dist
⚠️ You can add this error by opening the new appUnhandled Promise Rejection Error: ENOENT: no such file or directory, open '/Applications/test-project.app/Contents/> > Resources/app-update.yml'
I work to resolve it. I take any ideas that come
✅ Now enjoy and work to your multi-platform app!! 🚀