Getting errors when attempting to build a desktop app.

VertexZero commented 2 years ago

Currently I'm using capacitor-community/electron with Phaser 3 and when attempting to build for desktop (Windows) I get these errors below. Capture

I had no issues building to iOS and Android devices with Capacitor though. So I assume files are being blocked. I've been searching for possible clues, but I haven't found anything that solves this issue.

Thank you.

IT-MikeS commented 2 years ago

It this only on build or does this happen on dev runs too?

VertexZero commented 2 years ago

No, when testing on web via node, there's no issues. We even got a build for Android using Capacitor. So the problem seems to be only with electron and how probably files are being handled. Any help would be appreciated.

jdgjsag67251 commented 2 years ago

Hmm, strange. Do you see any errored network requests in the DevTools? Because I do see an issue with the CSP. Could you also maybe share the code snippet that tries to read get?

Grayda commented 2 years ago

I'm getting the same error as above. In my case, I'm trying to call an external API (e.g. https://example.com/api/v2) with a fetch call in my Ionic + Vue app, and I've built my project with ionic build, then cd'd into the electron folder and packed my file using npm run electron:pack

I've added a CSP meta tag to my index.html file, and it's actually built into the final product (if I run the packed .exe file, then open devtools and check between the <head> tag, my CSP is there), but I get a console message telling me:

Refused to connect to 'https://example.com/api/v2/some/endpoint' because it violates the following Content Security Policy directive: "default-src capacitor-electron://* 'unsafe-inline' data:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

So my guess is that Electron isn't reading the meta tag at all (because the directive it mentions in the error is absolutely not the directive I set) and is falling back to the default.

And just to clarify, if I open electron/app/index.html, the tag I set is in there, so it's not being injected after the fact by my built Vue.js app, as far as I can tell.

I figure I must be doing something wrong, though I'm not sure what. I think I can edit the files in the electron/ folder manually, but it's just so nice being able to not have to touch anything in the folder so anyone can build the app with no further tweaking.

jepiqueau commented 2 years ago

@Grayda you have to set up the CSP in the setup.ts file of the electron folde r for your url. Look i what i did for https://github.com/jepiqueau/angular-videoplayer-app-starter

jepiqueau commented 2 years ago

@Grayda i did not like to change the setup.ts file for the same reasons that yours. I think the code should read the CSP in the capacitor.config.ts file which is more dedicated for the control of options to control the electton app.

Grayda commented 2 years ago

@Grayda i did not like to change the setup.ts file for the same reasons that yours. I think the code should read the CSP in the capacitor.config.ts file which is more dedicated for the control of options to control the electton app.

Yeah having it in capcitor.config.ts would be a good solution, but support for the <meta> tag would be good as well because electron list the tag as a security option (unless, as I said, there's something about the way Vue works that makes it not work with electron)

Another option I have (which I've used in the past) is to commit just the setup.ts file to git, and exclude all the other files in the /electron folder, but that still feels like extra steps for what should be npx cap add @capacitor-community/electron && npx cap sync && cd electron && npm run electrion:pack to add the project and then build it.

EDIT: I've been playing around with the CSP meta tag, and it works for some combinations, but not others. To test this out, create a CSP using a meta tag. Something like this:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'">

Obviously when you run npm run electron:pack, run the binary and then open the dev tools, it won't load anything. But if you replace it bit by bit, adding the capacitor-electron://*, then data: and then something like 'unsafe-inline', it'll work, until you add something like the wildcard, then it'll fall back to whatever is set in setup.ts. The full tag is still in index.html, but electron doesn't read it, even though it's valid (I think -- there's no CSP validators online)

In the interim, I've done the following:

Create a folder in my project called .electron
Copy electron/src/setup.ts into that folder and modify it.
Create a script in package.json (in the root folder, not the electron folder) that looks like this: "build:desktop": "ionic build && npx cap copy @capacitor-community/electron && cp ./.electron/setup.ts ./electron/src/setup.ts && cd electron && npm run electron:pack". This will build your Ionic project, copy the files into the Electron platform folder, overwrite setup.ts with your modified one, then cd into the folder and package the app

If setup.ts ever changes, you'll need to update your copy which is a pain, but it's better than having to commit almost your entire electron project to SVN.

If you wanted to use .gitignore to just commit your setup.ts in the electron folder, you can do something like this

# First, ignore everything in the electron folder
# Then ignore everything in the electron/src folder
# Then unignore the electron/src folder itself (but not the files within)
# Then finally unignore our setup.ts file
/electron/*
/electron/src/*
!/electron/src
!/electron/src/setup.ts

But when you do npx cap add @capacitor-community/electron, it'll fail because the electron folder isn't empty.

capacitor-community / electron

Getting errors when attempting to build a desktop app. #186