Electron: how to add Electron to a Ionic App with Capacitor?

Capacitor
1

hello,

i’m trying to add Capacitor Electron to a brand new Ionic React App but it doesn’t work.
Do you have a tutorial to follow?

I tried to follow this guide:

nstallation into an existing Capacitor application.#
Note: these instructions require a Capacitor version of ^3.2.0

Build your webapp in your capacitor initiated project ('npm run build' for example).
Run npm i @capacitor-community/electron in your webapp project directory. This will install the platform for use with the @capacitor/cli.
Run npx cap add @capacitor-community/electron to initiate the platform, this will create the electron folder in your webapp project.
Run npx cap open @capacitor-community/electron to start your app in electron.
Note: You can use other npx cap commands with the platform by: npx cap <command> @capacitor-community/electron

but it doesn’t work, the app gives me a “exited with a non zero error” etc etc.

the folder Electron is created but nothing else works if I try to run npx cap open @capacitor-community/electron

any tutorial / suggestion?

2

I am going through the same thing. As near as I can tell ionic has really dropped real support for electron even thought it is in the docs. I have gone the route of building an electron app outside of ionic and then add the www folder to it and edit the links.

2 Likes
3

I’ve just tried this steps and it’s working fine:

ionic start reactTest 
cd reactTest
npm run build
npm i @capacitor-community/electron
npx cap add @capacitor-community/electron 
npx cap open @capacitor-community/electron

On ionic start command I select react and blank, but I also tested with Angular ngModules and also worked.

4

I was reading this topic and it helped me a lot to build my application :slight_smile:
now i have another problem that i cant google out…or maybe i do something wrong

By using “npx cap open @capacitor-community/electron” command my app opens and it works. that is great! but now i want to build an .exe file and ship my application to the client and i have no idea how to do so. Is there any help?

I also created Ionic/Angular project and added Electron…Same steps you provided

thank you in advance :slight_smile:

5

I think you need to use this . I’m found myself in same pickle.