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%/">

3 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.

It took me several hours to find this solution. I will add this clarification:

  • remove from ./electron/app/index.html the tag <base href="/" />
  • add this property to ./electron/package.json: "homepage": "."

@jcesarmobile I would observe that it is the capacitor that is creating the package.json file. So it does know something: a) it is electron and b) the files are served from file protocol. So it could at least add the homepage value. The change to the base href could at least be documented.

The homepage is a React thing, and for React apps you have to remove the base href, while in Angular apps you have to change it to “./”

Capacitor is framework agnostic, and doesn’t know if you use React or Angular or something else, and can’t make assumptions.

Those are not Capacitor bugs, Capacitor just provides plugin APIs for your electron app, but you still need to know electron and the framework configurations docs needed to work in electron. And if you don’t know them, you should be able to search them on the framework doc websites, because as I said, they depend on the framework you use, not on Capacitor.

So even applying the following, it still does not end up working.

Still seeing a blank page with error GET file:///static/css/main.cc597592.chunk.css net::ERR_FILE_NOT_FOUND

Ran into this problem even with a new project as described initially.

Thanks for any help

I wrote up in some detail how to make things work… using capacitor on an existing React Web App and transform it into an Electron app.

See near of this issue: