Added Integration with Electron tutorial

[poksme]

As seen here https://twitter.com/poksme/timelines/838005727440470016

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

If you are contributing on behalf of someone else (eg your employer): the individual CLA is not sufficient - use https://developers.facebook.com/opensource/cla?type=company instead. Contact cla@fb.com if you have any questions.

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[gaearon]

We should probably ask user to put these in .env file because this syntax is not cross-platform.

[gaearon]

See #1712 (comment) though.

[poksme]

The BROWSER env variable can easily be moved to a .env file but the ELECTRON_DEV flag can be problematic because for the user it means changing the env variable value when building or having multiple .env files and some loading logic to switch between prod and build.

What do you think of electron-is-dev instead of the ELECTRON_DEV flag?

[Timer]

I believe people will become confused when they try to use certain electron features, such as IPC. This really doesn't work unless we switch our webpack config to target electron-renderer.

[poksme]

@Timer Should I submit a PR with extra logic to change webpack's target (with a command line option, an env variable or other...) or update the current PR with a warning regarding limited support of electron without ejecting?

[Timer]

I'm not sure if we want to toggle webpack into electron mode. A warning regarding its limitations is probably best for now.

[tonyonodi]

I was just following this and got it working, but only realised once I'd finished that I'd installed the additional packages as dependencies and not dev dependencies. Should have been obvious in hindsight but I think it would help to make it explicit.

[Timer]

I'm going to punt this one until 0.10 because I'm not really happy with that fact that it doesn't "just work" for all cases. I don't want to recommend something that half works.

We'll reconsider it in 0.10 or maybe think of a work around.

[sebm]

nb electron-is-dev should be in package.json somewhere

[flybayer]

Yeah, it needs to be in dependencies

[flybayer]

Thank you @poksme for this CRA-Electron write up!! I'm using it and it works well so far.

I'm using the const electron = window.require('electron'); workaround to avoid ejecting.

[thisconnect]

Works great for me

[thisconnect]

Do people still use require() with CRA? I guess within node_modules there might be require's, but in my code I only use import, and hopefully import() soon. That said, what if CRA webpack ignores userspace require's?

[ghost]

works great for me!!

[levrik]

Typo On -> One

[levrik]

Just wondering: What does this and why is it needed?

[Charnnarong]

so that the CRA's production build will resolve index.html's resources path to be related to the current index.html rather than server'root

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths

[thisconnect]

Since react-scripts@1.0.0 test on macOS are not running anymore, see #2393 can you confirm this?

[chrisheninger]

Went through the instructions ☝️ and had my react-scripts app (simple frontend template) wrapped in Electron within an hour. Will continue experimenting and contribute if I come across anything that could help!

[belgattitude]

Oups, facing an issue with electron-is-dev when running my builded app. (yarn start works like a charm)

A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'electron-is-dev'
at Module._resolveFilename (module.js:470:15)
at Function.Module._resolveFilename (/my/path/app-linux-x64/resources/electron.asar/common/reset-search-paths.js:35:12)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/my/path/app-linux-x64/resources/app/main.js:2:23)
at Object.<anonymous> (/my/path/app-linux-x64/resources/app/main.js:66:3)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)

Weird, I've tried adding electron-is-dev in package.json deps

{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"electron-is-dev": "^0.1.2",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"concurrently": "^3.4.0",
"electron": "^1.7.2",
"electron-packager": "^8.7.0",
"react-scripts": "1.0.7",
"wait-on": "^2.0.2"
},
"main": "main.js",
"homepage": "./",
"scripts": {
"react-start": "react-scripts start",
"electron-start": "electron .",
"start": "concurrently 'yarn react-start' 'wait-on http://localhost:3000/ && yarn electron-start'",
"react-build": "react-scripts build",
"electron-build": "electron-packager ./ --overwrite",
"build": "yarn react-build && yarn electron-build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

*(tried both in dependencies and devDependencies... cleaned-up node_modules and yarn install)

Any ideas that can help ?

[Timer]

Closing this for reasons mentioned above. I believe other tools are better suited for this. Thanks!

[marcofranssen]

"homepage": "./" does not resolve everything in electron.

static resources like images do not work.

import logo from '../../assets/images/logo.svg';
....
....
<img src={logo} className={classes.logo} alt="logo" />

Neither fetching data using relative paths is working. e.g.

let response = fetch('data/donation-addresses.json');

It will try to access them using an absolute path starting with /.

So instead of trying to access at:
data/donation-addresses.json
it goes to /data/donation-addresses.json

Same for the image:
assets/images/logo.svg goes to /assets/images/logo.svg.

Any ideas on how to resolve that?