Cordova Electron Integration

Questions
1
  1. I just played a little bit with the new Cordova/Electron integration.
    Right now it seems these are handled as 2 independent projects (Cordova & Electron) inside another project (F7). So - there are 2 separate node_modules, package.json, etc…
    Now, if I install a node_module that I need from Electron, Cordova and F7, where do I install them, so it gets packaged correctly?

I had the problem that - if I install a module inside Cordova (e.g. npm install ‘’ into Cordova, dependencies are not resolved in F7 and vice versa. So how would I handle that?

  1. How would I handle the situation, where I need to require something in platforms/electron/platform_www/cdv-electron-main.js, so this survives updating the project/platform?

  2. If I want to communicate from the UI to the renderer-process, I need to require("electron") somewhere in the app (maybe app.js). But then again, how would I set this up, so I don’t need to add another electron-module to the frontend?

  3. And finally: How would I instruct Webpack to bundle things together so a compiled project is a) still working and b) doesn’t need everything (code) twice?

Sorry for the longer question, but I think getting sorted out these (basic) problems/questions would better help to understand how to create a great setup to work with.

2

Soo :slight_smile: Spinned a quick test project to check, as i haven’t checked it deeply yet. From what i see and understood.

Electron runs under /cordova/ folder context. So all the electron node modules you need, you should install under cordova folder.

Webpack build is supposed to be front-end only package, so it shouldn’t contain electron-related modules, e.g. packages from cordova folder.

Requiring modules. To communicate from UI with node.js, you can just call require, where? Just where you need it, no matter in app.js or other file. Just require it where you need a reference to it. You can also require it within a functions and methods directly, e.g.:

function copyFiles() {
  const fs = require('fs');
  ...
}

So if you need to access some “native” module on UI side, just require it directly relatively from cordova folder, without packing it into webpack.

One issue with webpack and require to notice. Webpack has own require function that will replace the native one, so to call native requires, just call it as window.require('fs') or make an alias for it as:

const electronRequire = window.require;

and then call it like electronRequire('fs')

As for platforms/electron/platform_www/cdv-electron-main.js, even cordova docs says it is not recommended to change it as it will be replaced with update. So i can here recommend to just save it before updates. Other thing to try here is to move this file content to, for example, root cordova folder. And in the original file just leave a line like:

require('../../../cdv-electron-main.js');
3

Hi @nolimits4web,

thx for your reply. I know the recommendations of the Cordova-team, but sometimes it is necessary to hook into the platform-code, e.g. if you’re manipulating menus/windows, etc… (but that’s not a problem).

As far as my test-project is concerned: there’s a bug in the way framework7-cli creates the project:

If you look at the config.xml in the cordova folder, there’s a reference to electron-settings.json, but there’s nowhere such a file.

 <platform name="electron">
      <preference name="ElectronSettingsFilePath" value="electron-settings.json" />

There’s an electron-config.js, but that has another problem:
It reads:

{
  "browserWindow": {
    "nodeIntegration": true
  }
}

but the documentation states that ‘nodeIntegration’ should be part of ‘browserWindow’:

{
  "browserWindow": {
    "webPreferences":{
      "devTools": false,
      "nodeIntegration": true
    }
  }
}

Adding that file made everything work immediately…

That’s good - but running npm run build-cordova-prod still doesn’t work - the required node_modues don’t get bundled into the built project’s (asar) and when launching the file I am getting a ‘Module not found’ error…

One more note: In package.json there’s an index.js defined as entry point, but that one doesn’t exist as well. I don’t know if that matters, I just wanted to mention it.

4

This is thanks to wrong cordova docs https://cordova.apache.org/docs/en/latest/guide/platforms/electron/index.html#how-to-support-nodejs-and-electron-apis :smiley:

Will fix it, as well as wrong config file reference.

For bundling dependencies, yes, i also can’t see a clear way of doing it. I see you already opened issue on cordova-electron github. Let’s wait what they answer.

I’m starting to think we may provide pure electron build rather than cordova-electron

5

The Cordova-Team didn’t reply properly for the past weeks - so I don’t expect any help from there. If you have any ideas (or maybe someone else knows how to do that properly) just drop a note (or maybe we start a tutorial).

But here’s something else (in case you didn’t see yet):

https://deskgap.com

This is a very cool concept: It’s a similar approach like electron, but only wraps node (without the whole chrome-engine), which makes the executables really small (15-20MB) and fast. It uses the system’s webview, which nowadays should be powerful enough to do most things.

I tried it with F7 and that works pretty good - although the build-process is a bit complicated at the moment…

6

That is interesting, thanks!

7

Is there any template purely for Electron, without cordova?