Problem using nodejs tutorial code in other electron apps

General Support
1

LATEST: I’m stuck again - see my reply

I went through the nodejs tutorial as far as getting it to auth with SAFE Browser (mock) - no problems.

I moved to work on a new electron app which I generated with electron-cli and tried to add the SAFE Auth code from the tutorial into that.

The problem I have is that in the tutorial use is made of electron.remote.app and electron.ipcRenderer, but this doesn’t work in my electron app (which complains they are undefined). I noticed the electron versions were different 1.8.4 in the Tutorial and 2.0.0 in my app, so I edited the package.json version to ^1.8.4 and tried again. It actually used v1.8.6 (don’t know why). Anyway it doesn’t fix the issue.

So I searched for problems with ipcRenderer. There are old reports this was due to npm having a package called electron, which was not the electron I wanted (atom.electron or something). I think, but am not sure, that this is no longer the issue, so I wonder if any of you electron experts can shed some light here.

The offending lines are:

const ipc = electron.ipcRenderer

ipc.on('system-uri-response', async (event, resAuthUri) => {

Which complains that ipc is not defined. Similarly, app is not defined when I do this:

const app = require('electron').remote.app;

which causes errors when app is used because it is undefined.

The code which I am modifying, and works until I try to add the above uses this:

const {app, BrowserWindow} = require('electron')

In this case app is defined. I’m baffled. Probably its something simple and due to the two things being created in different ways, but I don’t understand how to solve it.

UPDATE: I think the issue is indeed two things called electron, having noticed the following line and added it to my package.json I re-installed electron and I get past the above errors, but it seems that now there are other incompatibilities.

"postinstall": "npm rebuild --runtime=electron --target=1.8.4 --disturl=https://atom.io/download/atom-shell --build-from-source"

I can probably sort this now - I’m going to try strip the angular stuff out of the tutorial rather than merge it into something else.

3 Likes
2

I noticed electron-cli was updated last a year ago. That’s a long time for JavaScript projects.

You might want to try GitHub - electron/electron-quick-start: Clone to try a simple Electron app, which at least seems to be updated boiler plate code for Electron.

Anyhow, stripping the Angular from the example app seems like a good option as well.

3 Likes
3

Having been around the houses, I think that the issue may be to do with Angular. The above lines are in controller.js so I’m wondering if the Angular module has added some properties to the electron object, and that my code fails because I am not adding angular to my project.

If that is correct, my question becomes: how can I do the auth without adding in the Angular stuff? (because I’m building a CLI app which won’t display a browser window.

I could just include the angular module, but obviously I’d like to avoid that.

Ahh, ok electron.remote etc are not set-up by angular, but allow the rendered to communicate with the main process. Now looking into how to do auth in the main process…

2 Likes
4

Ah sorry I didn’t get to this sooner. It looks like you are on the right path though.
Here’s another example you can use, which is just using electron with plain HTML view, in order to just focus on Electron flow.

1 Like
5

Seems like people are always stuck on Vue and Angular. I get that its easy once you know something to resist change (Facebook and Angular) but this bleeding edge. You have to be ready to learn everything from scratch every few months until our cyborg masters put us in zoos.

6

This topic was automatically closed after 60 days. New replies are no longer allowed.