Connect react on renderer process with main process

#1

I’m trying to figure out how to communicate between React in my renderer process, and Electron on the main process.

This is the folder structure of my project

|- /app
|- - /build
|- - - - build.js
|- - - - index.html
|- - main.js
|- /react

So /app is where the electron app resides and the entry point is main.js. To launch electron I do electron /app from the project folder.

/react is where my .jsx files are. Webpack builds to /app/build.

Now I want to import electron into the react code to be able to to use the remote and do stuff in the main process. Of course it doesn’t work…

So I’ve installed electron with npm install electron --save and it’s there in the package.json.

  "dependencies": {
    "electron": "^0.4.1",
    "firebase": "^3.0.3",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-router": "^2.4.1"
  }

Now I do import electron from 'electron' but all hell breaks lose…

I imagine I’m missing something very obvious here.

What is the trick for importing electron into the react code?

TIA

#2

I’ve used this:

console.log(require('is-electron-renderer'));

And it throws false… :open_mouth:

#3

It seems everyone is solving this using complicated webpack configs… but I found this simple solution in StackOverflow to tell webpack to ignore this import:

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

Is this too good to be true? Are there any drawbacks?

#4

Webpack issues aside, you haven’t actually installed Electron, the electron NPM package is not The Electron Framework but something else entirely. To install Electron you need to install the electron-prebuilt NPM package.

#5

I’m using electron-prebuilt as a global package. Do I need to npm install electron-prebuilt --save too?

#6

If you installed it globally that shouldn’t be necessary.

#7

Hello Pier,

Did the above approach work for you ?
As even I am trying to communicate between the react component and an installed node module (lwip - to process images). Did you find any tutorial regarding this ? Please do help me with this.

#8

Hey @harivasista

Yes it did work.

I import the ipcRenderer like this:

const ipcRenderer = window.require('electron').ipcRenderer

You will need to use IPC for any communication between Node and React though.

#9

Hay @Pier

Could you please share the tutorial or some code that could help me through ?

Thanks in advance.

#10

Um I didn’t follow any tutorial.

Can you tell me what would you like to achieve exactly?

#11

I have posted a question in stackoverflow. I needed to achieve that.

#12

I answered your SO question.

Like I said previously, you need to use IPC. You cannot run Node code in the renderer (browser) thread alongside React. There is no Node in the browser.

Edit: Also depending on how your project is structured maybe your problem is that your Node code isn’t able to find the module you need.

If you take a look at my first post in this thread you will see how I configure my Electron + React projects. If you use a similar structure to install Node modules you need to go to the app folder and do npm install ... there and not in your React folder. The app folder should have its own package.json which is different from the one of React.

#13

@Pier Thanks a lot for the help.

#14

This is not true, if Node integration is enabled for a browser window (and it is enabled by default) then all Node APIs can be accessed from the corresponding renderer process.

#15

Oh I stand corrected!

I only found this in the docs:

nodeIntegration Boolean (optional) - Whether node integration is enabled. Default is true.

How does this work? Is there a global Node context or each window has its own?