# How to create a multi platforme app with ionic/capacitor/electron and vuejs

⚠️ This method is allowed for work in a mac M1 Before create your project be sure to had the ionic cli by running ionic --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 ./androiddirectory, open Android Studio for build the app, build the Electron app and create a .dmgpackage in ./electron/dist

⚠️ You can add this error by opening the new app

Unhandled 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!! 🚀