Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
codedge opened this issue Jul 9, 2018 · 22 comments
Open

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

codedge opened this issue Jul 9, 2018 · 22 comments

Comments

@codedge
Copy link

@codedge codedge commented Jul 9, 2018

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.

image

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

This comment has been minimized.

Copy link
Contributor

@moberwasserlechner moberwasserlechner commented Jul 25, 2018

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

This comment has been minimized.

Copy link
Member

@jcesarmobile jcesarmobile commented Jul 31, 2018

Related to #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

This comment has been minimized.

Copy link

@NiklasMerz NiklasMerz commented Feb 20, 2019

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

capbug

@mlynch mlynch changed the title Electron cannot load app.js & css Better solution for electron <base> url (or just document it) May 19, 2019
@mlynch

This comment has been minimized.

Copy link
Member

@mlynch mlynch commented May 19, 2019

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

@mlynch mlynch added this to the 1.0.1 milestone May 19, 2019
@basher

This comment has been minimized.

Copy link

@basher basher commented May 22, 2019

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

This comment has been minimized.

Copy link
Member

@jcesarmobile jcesarmobile commented May 22, 2019

@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

This comment has been minimized.

Copy link

@basher basher commented May 22, 2019

@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

This comment has been minimized.

Copy link

@basher basher commented May 28, 2019

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

This comment has been minimized.

Copy link

@basher basher commented May 28, 2019

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

This comment has been minimized.

Copy link
Contributor

@devinshoemaker devinshoemaker commented Jun 13, 2019

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

This comment has been minimized.

Copy link
Member

@jcesarmobile jcesarmobile commented Jun 13, 2019

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

This comment has been minimized.

Copy link
Contributor

@devinshoemaker devinshoemaker commented Jun 13, 2019

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

This comment has been minimized.

Copy link
Contributor

@bibyzan bibyzan commented Jun 19, 2019

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?

devinshoemaker added a commit to devinshoemaker/promise-to-pay that referenced this issue Jun 25, 2019
@xcarlo31

This comment has been minimized.

Copy link

@xcarlo31 xcarlo31 commented Jun 28, 2019

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

@xcarlo31

This comment has been minimized.

Copy link

@xcarlo31 xcarlo31 commented Jun 28, 2019

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

This comment has been minimized.

Copy link

@gbevan gbevan commented Jul 18, 2019

@basher 's solution #639 (comment) worked for me (homepage in root package.json)

@andonivianez

This comment has been minimized.

Copy link

@andonivianez andonivianez commented Mar 3, 2020

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... :)

@jakupi1

This comment has been minimized.

Copy link

@jakupi1 jakupi1 commented Mar 16, 2020

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

@andonivianez

This comment has been minimized.

Copy link

@andonivianez andonivianez commented Mar 16, 2020

@andonivianez after you change <base href="./"/>type again ionic build and npx cap copy and 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

This comment has been minimized.

Copy link

@mandolyte mandolyte commented Mar 21, 2020

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

This comment has been minimized.

Copy link

@iliesaya iliesaya commented Mar 26, 2020

@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"
Screen Shot 2020-03-26 at 7 01 55 PM
ionic --version 6.3.0
npx cap --version 1.3.0

@mandolyte

This comment has been minimized.

Copy link

@mandolyte mandolyte commented Mar 26, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Issue Management
  
Awaiting triage
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.