Better solution for electron <base> url (or just document it)

[codedge]

Hi,

I am trying to get my app running with Electron but no luck. When building this for iOS the iOS Simulator can start the app without problems.

For some reason it cannot load the app.js and app.css. I use the dist dir and configured this in my capacitor.config.json

{
  "appId": "com.ex.ample.com",
  "appName": "Example",
  "bundledWebRuntime": false,
  "webDir": "dist"
}

My npm run build and npx cap copy commands run fine without any errors. I use Fedora 26, if that matters ;-)

Any idea?

Thanks!

[moberwasserlechner]

I think I had the same issue.

Please check your electron/app/index.html.

If you have a

<base href="/">

change it to

<base href="./">

because you serve the files from a file system instead of a domain path. It would be nice if ngx cap copy electron could do this replacement automatically but for now it should work with this manual change.

[jcesarmobile]

Related to https://github.com/ionic-team/capacitor/issues/693.

@mlynch maybe we should also use a web server as on iOS and Android to serve the files instead of serving from file:?

[NiklasMerz]

Using <base href="./"> fixes this partially. The svg from the tabs template cannot load:

[mlynch]

Given that this is just how you need to configure Angular and other HTML5 routing systems, I think we just need to improve our documentation, along with seeing what's up with those asset urls not working

[basher]

I cannot load JS and CSS dependencies in a brand new Capacitor + Electron project which I setup yesterday, using Create React App V3 + TypeScript.

I changed to <base href="./"> in \electron\app\index.html and I still get path issues.

Filepaths compute to file:///C:/static/css/... and file:///C:/static/js/....

My \electron\package.json dependency is = @capacitor/electron": "^1.0.0-alpha.28"

[jcesarmobile]

@basher, I have no experience with React, but you usually have to configure the base href in a config file before building so it changes all references before building instead of you changing manually the index.html. Also, alpha 28 is very old, we are on beta 25, can you try updating?

[basher]

@basher, I have no experience with React, but you usually have to configure the base href in a config file before building so it changes all references before building instead of you changing manually the index.html. Also, alpha 28 is very old, we are on beta 25, can you try updating?

@jcesarmobile Thanks for your quick response.

My bad... I am actually running 1.0.0-beta.25. \electron\package.json installs from alpha 28 upwards. Lock file shows that I actually have @capacitor/electron at 1.0.0-beta.25 installed.

Anyway, I've just re-installed electron again, and still the same problem.

Btw, I'm already familiar with using React + Electron. I build app from \public\index.html, which also has the correct base href. Then I run npx cap copy before launching electron.

[basher]

Further to my last comment, I've now updated start_url in my Create React App manifest.json to point to index.html, ensuring that it's a relative path as per MDN docs:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

I then build my CRA with npm run build, and then run npx cap copy the CRA built output to the electron\app\ folder, as per Capacitor docs.

However, I'm still getting the same error with CSS/JS filepaths computing to file:///C:/static/css/... and file:///C:/static/js/....

Does anyone in the Capacitor team have experience of creating an Electron app using Create React App?

[basher]

UPDATE:

I now have working static paths to my JS/CSS etc in CRA + Capacitor + Electron.

Having scoured the CRA repo for static asset bugs & fixes, this is the solution that works for me:

1. Removed <base href="./"> from .\public\index.html as it does nothing.
2. Added "homepage": "." to .\package.json in root directory. Therefore, npm run build followed by npx cap copy ensures that all the static asset paths in .\electron\app\index.html are now src="./static/".

[devinshoemaker]

Updating the base href in electron/app/index.html seems to work from my initial testing, however, this gets overwritten with npx cap copy electron.

[jcesarmobile]

The idea is to not do it manually, but when you build the www folder, angular allows to do it by adding --base-href=./ to the build command. In other frameworks you do it differently.

[devinshoemaker]

Gotcha. Is adding the build command parameter recommended or is editing src/index.html recommended? I had forgotten to do an ionic build before npx cap copy electron which is why my change was getting overwritten, but once I did that, everything worked fine.

[bibyzan]

I'm on macOS 10.14.4, and my electron just didn't build out of the box until I found the thread indicating to add the './' to the base href element. Now all of my remote images load, but not the local ones.

I have installed "@capacitor/electron": "^1.0.0-beta.11" and "electron": "^3.0.10", it made an icon load in my loading screen that hadn't before, but none of my local assets are loading (with ionic/angular). Was the assets issue addressed yet?

[xcarlo31]

the problem with loading the assets still here, anyone had a work around for it?

[xcarlo31]

found a workaround on ionic capacitor electron build, instead of "../assets/filename" or "/assets/filename", I used this one "assets/filename". But this gives me a heck of editing with other platforms, I hope capacitor will have a fix on this one.

[gbevan]

@basher 's solution https://github.com/ionic-team/capacitor/issues/639#issuecomment-496547899 worked for me (homepage in root package.json)

[andonivianez]

I´m trying to get this stack working for a week, with no luck... I´ve follow a lot of issues related to similar errors but again, with no luck... does someone has an example running with this stack that can share with all of us? Thank you so much in advance... :)

[metinjakupi]

@andonivianez after you change <base href="./"/>type again ionic build and npx cap copyand it should work

[andonivianez]

@andonivianez after you change <base href="./"/>type again ionic build and npx cap copyand it should work

I´ve tested every proposed solution, but any of them works. I´ve tryed from a blank project, and it doesn´t work. Give it a try ;)

[mandolyte]

For React, the index.html does not include a base href -- at least it doesn't now. But if you study the error messages (console window), you'll find that the resources are being referenced with a relative path from root of package. That will not work with electron (the resources are in the electron folder itself). So I used a little sed script to correct:

sed -e "s#/my-app/#./#g" < index.html > x && mv x index.html

I also have made several edits to the electron/package.json that is generated due to use of electron-builder. So I am now keeping a copy of it in my public folder and copying it over to replace the generated one.

Finally, I still haven't found where the error Cannot read property 'SplashScreen' of undefined is coming from. But is discovered that I copy over electron/splash_assets/splash.png with my own splash image, then it will be used.

So at this point (at least for Win10), everything looks good and electron builder works. So for now, I'm inclined to ignore the splash property error.

HTH!

[iliesaya]

@mandolyte could you please give us more detail on your solution, I am facing the same issue ionic start bitgrader conference --type=react --capacitor I tried all possible fix I found , removing the , replacing it by the ' . ' , adding the "homepage": "." in package.json ... nothing worked. are you running the sed command from root folder or from /electron/app ? what is "my-app" ? in my index.html path look like src="./static/js/main.0517756e.chunk.js"

ionic --version 6.3.0 npx cap --version 1.3.0

[mandolyte]

@iliesaya First, I should note that I'm starting with React, not Ionic or Vue, or etc. Second, you are welcome to examine my solution here. So I'm taking an existing React Web app and making it into a standalone Electron app. There are two things you will find useful.

• a bash script build-electron.sh which I used to capture how things worked in detail. But my actual goal was to automate... thus,
• using Github Actions. You can checkout the workflow at .github/workflows/build-electron.yml

So now to answer your question specifically. I found that the index.html that React created used paths to resources from root of package. So the favicon for example looked like this:

    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

This is how it looks in the ./public folder. Then when I use yarn build, the build directory version of this looks like this:

<link rel="icon" href="/book-package-app/favicon.ico"/>

So when I did the npx cap copy command (or the initial add electron), this path was totally wrong for electron and the error messages told me that.

Important! note that after the npx command, the index file is in the ./electron/app directory, but the favicon (in this case) is in ./electron. So fix this I needed to change /book-package-app/favicon.ico to ./favicon.ico. All the resources had the same issue, so all needed to be changed the same way.

The script and workflow file have a number of things I ended up doing to make this work to my satisfaction. You may or may not want to do them as well.

[gnopor]

Note: For launch the app with electron, follow these steps:(forgive my English I am native french speaker)

1. First of all forget about the electron folder, do not touch it.

2. In your react/ionic directory which is your root directory for the app,add the following in your package.json file: "homepage": "./"

3. Now from your react/ionic directory which is your root directory for the app, navigate to the "public" directory and update your index.html file replacing <base href="/" /> with: <base href="./" />

4. Now run the following command and that is it... a. ionic build && npx cap copy b. npx cap open electron

[IT-MikeS]

This is fixed in the next version of the capacitor platform for electron 👍

Changing the base-href stuff will no longer be required.

Electron will be community supported going forward.

[ch4mpy]

@IT-MikeS in which version was it fixed?

I just created an Ionic project, but electron app won't start correctly until I modify base-href. ("@ionic/angular": "^5.5.2", "@capacitor/core": "2.4.6", "@capacitor/electron": "^2.4.6", "electron": "^8.0.0")

[IT-MikeS]

@IT-MikeS in which version was it fixed?

I just created an Ionic project, but electron app won't start correctly until I modify base-href. ("@ionic/angular": "^5.5.2", "@capacitor/core": "2.4.6", "@capacitor/electron": "^2.4.6", "electron": "^8.0.0")

In the community version

https://github.com/capacitor-community/electron

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.