How to import email ipcRenderer into react setup / webpack 2
using setting electron, react (es6 / jsx), sass, pouchdb and webpack 2. I cannot import or require ipcRenderer to make communication between main and render process possible. My setup is here: https://github.com/wende60/timeTracker
Any hints how to get ipcRenderer to respond to the component?
Cheers, jo
source to share
Found a good solution for this problem using webpack-target-electron-renderer So I can develop the web part in local environment with hot reload, electron is only required in electronic environment.
You can see a working example here: https://github.com/wende60/webpack-web-and-electron-example forked from acao webpack-web-and-electron-example and updated for webpack 2 and hot plug.
If you are interested in webpack, electron settings, react, sass and pouchdb look here: https://github.com/wende60/timeTracker Work is still in progress ...
source to share
I was researching this topic quite recently and I found a solution to do some ipc between the electrons of main.js and the React part of the application. Because both, import {ipcRenderer} from 'electron';
after adding the plugin to the webpack modules, const ipc = require('electron').ipcRenderer;
caused some errors, I ended up requiring an electron on the resulting page and added it to the window.
In index.html
I did something like this
<body>
...
<script>
window.ipc = require('electron').ipcRenderer;
</script>
<div id="root">
</div>
...
</body>
In Reactions, index.js
I did something like this:
import React from 'react';
import ReactDOM from 'react-dom';
// ...
if(window.ipc)
ipc.on("some-event", (event, someParameter) => {
ReactDOM.render(
<SomeElement value={someParameter} />,
document.getElementById("root")
);
})
// ...
To make this work, I launched the react page from an electronic application, in which main.js
I did something similar.
const {app, BrowserWindow} = require("electron"};
const exec = require("child_process").exec;
let main;
app.on("ready", () => {
exec("node start", (err, stdout, stderr) => {
if(err) console.log(err);
console.log("" + stdout);
console.log("" + stderr);
});
main = new BrowserWindow();
main.loadURL("http://localhost:3006");
main.on("close", () => {main = null});
});
because electron is running on the same port, I added a file .env
to my project containing
PORT=3006
I used the create-react-app my-prj
( npm install -g create-react-app
) command for my base project, it looked something like this:
my-prj
|-package.json
|-main.js
|-.env
|-node_modules/
|-public/
|-index.html
|-src/
|-index.js
Hope this post was helpful.
source to share