Ionic 5 + Electron

user_4972844 0
Viewed 1627

I'm trying to start an Electron project, but running ionic capacitor run electron results in a blank screen with 5 console errors that say GET file:///c:/runtime.js net:ERR_FILE_NOT_FOUND.

I'm pretty sure it has to do with <base href="/"> needing to be changed to <base href="./"> but I can't get the change to stick.

If I manually change the base tag in /www/index.html then run ionic capacitor run electron the value in <base> is automatically changed back to the default.

What's the correct way to make the change stick so I can build an Electron app? Steps to reproduce:

1. ionic start test blank --capacitor --type angular
2. cd test
3. open `/tsconfig.json` and change `target` from `es2015` to `es5`
4. ionic build
5. open `/www/index.html` and change `<base href="/">` to <base href="./">`
6. ionic cap add electron
7. ionic cap run electron

Step 7 is where <base> gets overwritten again because I see run app:build listed in the terminal... Any advice on how to get it to work as expected? I imagine there is a better method than manually changing code because that seems tedious in a production app

ionic5 electron
3 Answers

just wondered if you still have this problem?

If yes, try running npx cap copy after every build to sync the web content with Electron.

Moreover, you can also change the base tag in /src/index.html so you don't need to update it in /www/index.html after every build.

Hope this helps!

user_131970080

Stumbled across this question. This is a workflow that has worked ok for me. Also includes the npm package electron-packager which helps bundle the electron output to distributable binaries.

package.json:

{
  // ...

  "scripts": {
    // ...
 
    "package:electron:windows": "electron-packager ./electron MyApp --platform=win32 --arch=x64 --out=./release --overwrite",
    "package:electron:macos": "electron-packager ./electron MyApp --platform=darwin --arch=x64 --out=./release --overwrite",
    "build:electron": "ng build --base-href ./ && ionic cap sync electron --no-build",
    "build:electron:windows": "npm run build:electron && npm run package:electron:windows",
    "build:electron:macos": "npm run build:electron && npm run package:electron:macos"
  }
  
  // ...
}

So then with one command line npm run build:electron:windows or npm run build:electron:macos it will create the distributable in a folder called release

user_78962030

Try to switch steps 4 & 5.
I mean, first change the index.html (step 5) and then execute ionic build (step 4).

user_22745250
Related