Electron - falling at the first hurdle

Capacitor
1

I’m very new to Ionic, so please forgive me If I’m missing something basic. I’ve got a long way towards getting my app working on web, iOS and Android. I’m now trying to get it to work with Electron, and hitting problems. So I decided to go back to basics and see if I could get a project created by ionic start working. And the answer is no :frowning_face:.

If I run the following:

ionic start MyTestApp --type react blank
cd MyTestApp
ionic build
ionic cap add electron
ionic cap open electron

It fails with:

index.html:1 GET file:///static/css/12.8921c4c4.chunk.css net::ERR_FILE_NOT_FOUND

The problem seems to be that the generated React project is expecting to find files in the root directory, where Electron is loading them using absolute file: URLs. I’ve tried playing around with setting homepage in package.json and removing the <base> tag in index.html with some success (I can get the static files loading initially), but I rapidly run into more problems.

This problem doesn’t seem to be React specific—I see similar issues if I create an Angular project instead.

Should I expect this to work? Are there any examples that I can look at of getting Ionic to play nicely with Electron?

2

So I have managed to get this working, but I’m unsure whether my solution isn’t storing up trouble for me in the future.

What’s working for me at the moment is:

  • Change <base href="/" /> in index.html to <base href="./" />.
  • Add "homepage": "./", to package.json.
  • Modify the routes within App.tsx to become:
    <Switch>
      <Route path="/home" component={Home} exact={true} />
      <Route render={() => <Redirect to="/home" />} />
    </Switch>

(because we can no longer rely on the first path visited being /).

I’m particularly unsure whether changing base and homepage will cause any issues? Is there anything within Ionic which relies upon them being /?

Thanks in advance for any thoughts on this.

3

Changing the base href either manually or via an environment/build setting is the generally accepted way to get apps to function under Electron. I haven’t run into any issues personally doing so.

4

Thanks for responding Mike, and putting my mind at rest :+1:

1 Like