Is still possible to create a desktop app with Electron and Ionic 6?

Ionic Framework
1

Hi,
I’m trying to create a desktop app with Ionic 6 and Electron.
I’m followinng these tutorials:

And I’ve followed these steps starting from a new brand app:

ionic start myPhotoGallery my-first-app --type=angular --capacitor
cd myPhotoGallery
npm install ngx-electron electron
npm install electron-packager --save-dev
ionic build
npx cap add electron
npx cap open electron

However the last command doesn’t nothing and I have not an Electron folder in the project.
I’m using:

Windows 10 Pro - 21H2
Ionic:

   Ionic CLI                     : 6.18.1 
   Ionic Framework               : @ionic/angular 5.6.7
   @angular-devkit/build-angular : 12.0.1
   @angular-devkit/schematics    : 12.0.1
   @angular/cli                  : 12.0.1
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI      : 3.0.0
   @capacitor/android : 3.0.0
   @capacitor/core    : 3.0.0
   @capacitor/ios     : 3.0.0

Utility:

   cordova-res : not installed globally
   native-run  : 1.3.0

System:

   NodeJS : v16.14.2 (C:\Program Files\nodejs\node.exe)
   npm    : 8.5.0
   OS     : Windows 10

Which could be the problem according to you?
How can I debug the problem?

Thank you very much

Claudio

1 Like
2

Hi
Same issue here while trying to do the same commands.

This did do the trick though:

For you too?

3

In my case the electron folder is not created.

cld

4

Also it is not generated with the community version? It does work on my side…

5

Sorry, yes it is true, with the community edition if I execute these steps:

ionic start myPhotoGallery my-first-app --type=angular --capacitor
cd myPhotoGallery
npm i @capacitor-community/electron
ionic build
npx cap add @capacitor-community/electron
cd electron
npm run build
npm run electron:start-live
npm run electron:pack

The run build command fails with this error:

>npm run build

> Photo Gallery Cap Ng@1.0.0 build
> tsc && electron-rebuild

capacitor.config.ts:6:3 - error TS2322: Type '{ appId: string; appName: string; bundledWebRuntime: false; npmClient: string; webDir: string; }' is not assignable to type 'CapacitorConfig'.
  Object literal may only specify known properties, and 'npmClient' does not exist in type 'CapacitorConfig'.

6   npmClient: "npm",
    ~~~~~~~~~~~~~~~~

Found 1 error.

So, I’m looking for other tutorials, but It seems that, despite the announcements, the integration with electron is not so simple and supported.

cld

6

With these commands the error during the build phase is ignored and the demo app starts:

ionic start myPhotoGallery my-first-app --type=angular --capacitor
cd myPhotoGallery
npm i @capacitor-community/electron
ionic build
npx cap add @capacitor-community/electron
cd electron
npm run electron:start-live

demo_electron
demo_electron1065×851 29.1 KB

1 Like
7

Hi,

I don’t know whether this is fully related, but I ran into similar issues when I first tried syncing my electron build on my ionic (react) app.
I did manage to create the electron folder (using ionic cap add @capacitor-community/electron instead of ionic cap add capacitor, since the latter is deprecated), but I simply couldn’t get the ionic build changes to reflect in electron without deleting and then fully re-adding it each time.

In case you’ve faced something like that, try running:

ionic build # as you would normally
ionic cap sync @capacitor-community/electron

Note: simply running ionic cap sync without specifying the platform (as I saw suggested in other threads) did not work for me.

And then your electron live app should be properly updated when you run

ionic cap open @capacitor-community/electron

(or simply npm run electron:start-live if you’re running it from the electron folder directly).

Hope this helps!

1 Like
8 
ionic cap copy @capacitor-community/electron

this command also works.

1 Like