Tutorial/guide to build for Ionic-React-Electron app

Hi,
i’m trying to build from scratch an app with ionic-react & electronjs, but following official "get started"guide
https://capacitor.ionicframework.com/
electron main page is blank and not correctly shown.

My commands are:

ionic start myApp blank --type=react
cd myApp

to build a new react-ionic generic app

Following this official guide
https://capacitor.ionicframework.com/docs/getting-started/with-ionic/

I added capacitor with this command:

ionic integrations enable capacitor
npx cap init
ionic build

I had to change capacitor.config.json file to link a public folder instead www folder, otherwise

npx cap add electron

could not be able do add an electron sub-project

Finally, launchin electron app with this command

npx cap open electron

Electron page was visible, but blank (seems react components was not parsed correctly)
I attach screenshot.

Thanks for anyone can help me.
Lewix

No help?
I think issue is confirmed here

Following the router for app:

<IonReactRouter> <IonRouterOutlet animated={true}> <Route path="/" component={ABC} exact/> </IonRouterOutlet > </IonReactRouter> </IonApp>

electron apps are served from file protocol, so they need to be built in a different way.
I’ve made it work by adding "homepage": "." in the package.json and removing the <base href="/" /> in index.html or changing it to <base href="%PUBLIC_URL%/">

2 Likes

Any chance the capacitor docs get changed to reflect this? I tried to follow these steps too, and failed to get it launched… which is a pity.

those are framework specific problems, not Capacitor problems, Capacitor knows nothing about your project or framework

While maybe true, the developer experience gets broken while following the tutorial on Capacitor website.

EIther way fine by me, glad to see the specific solution posted where I could find it.