Added Integration with Electron tutorial #1718

poksme · 2017-03-05T07:21:26Z

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

facebook-github-bot · 2017-03-05T07:22:07Z

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 · 2017-03-05T07:29:38Z

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

gaearon · 2017-03-05T14:15:55Z

packages/react-scripts/template/README.md

+  "homepage": "./",
+  "scripts": {
+    "react-start": "BROWSER=none react-scripts start",
+    "electron-start": "ELECTRON_DEV=1 electron .",


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

See #1712 (comment) though.

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 · 2017-03-05T23:07:20Z

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 · 2017-03-06T10:33:26Z

@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 · 2017-03-07T06:16:27Z

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

tonyonodi · 2017-03-14T00:05:02Z

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 · 2017-04-19T01:32:54Z

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 · 2017-04-23T22:09:27Z

packages/react-scripts/template/README.md

+  "private": true,
+  "devDependencies": {
+    "concurrently": "^3.4.0",
+    "electron": "^1.6.1",


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

Yeah, it needs to be in dependencies

flybayer · 2017-04-29T00:24:14Z

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 · 2017-05-06T11:52:45Z

Works great for me

thisconnect · 2017-05-07T08:11:45Z

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 · 2017-05-18T01:03:02Z

works great for me!!

levrik · 2017-05-27T12:17:46Z

packages/react-scripts/template/README.md

+}
+```
+
+Additionally, you can prevent `react-start` script from opening a browser window by setting the `BROWSER` env variable to `none`. On way of doing it is to create a `.env` file at the root of your React application folder with the following content:


Typo On -> One

levrik · 2017-05-27T12:30:24Z

packages/react-scripts/template/README.md

+
+Once this file is created, the `package.json` needs to be edited:
+- Set the Electron script (here `main.js`) as `main`.
+- Set application's root (`./`) as `homepage`.


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

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 · 2017-05-28T08:35:14Z

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

chrisheninger · 2017-05-28T20:27:10Z

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 · 2017-06-01T09:55:18Z

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 · 2018-01-09T01:49:46Z

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

marcofranssen · 2018-11-21T19:43:16Z

"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?

Added Integration with Electron tutorial

a6808bf

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

facebook-github-bot added the CLA Signed label Mar 5, 2017

gaearon reviewed Mar 5, 2017

View reviewed changes

Timer added the tag: documentation label Mar 7, 2017

Timer added this to the 0.9.5 milestone Mar 7, 2017

gaearon modified the milestones: 0.9.5, 0.9.6 Mar 9, 2017

Add Limited Electron support warning and better env

0428b14

Timer modified the milestones: 0.10.0, 0.9.6 Apr 19, 2017

sebm reviewed Apr 23, 2017

View reviewed changes

gaearon modified the milestones: 0.10.1, 0.10.0 May 15, 2017

gaearon modified the milestones: 1.0.1, 1.0.x May 19, 2017

thisconnect mentioned this pull request May 21, 2017

ESLint checks (and the upcoming Flow integration) is missing in tests #1169

Closed

levrik suggested changes May 27, 2017

View reviewed changes

levrik reviewed May 27, 2017

View reviewed changes

thisconnect mentioned this pull request May 28, 2017

react-scripts test is watching files in node_modules #2393

Closed

chrisheninger mentioned this pull request May 28, 2017

GUI chrisheninger/icon-magic#4

Closed

4 tasks

Hum4n01d approved these changes Aug 4, 2017

View reviewed changes

Timer closed this Jan 9, 2018

marcofranssen mentioned this pull request Nov 21, 2018

Feature/react webapp thrasher-corp/gocryptotrader#210

Merged

lock bot locked and limited conversation to collaborators Jan 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Integration with Electron tutorial #1718

Added Integration with Electron tutorial #1718

poksme commented Mar 5, 2017

facebook-github-bot commented Mar 5, 2017

facebook-github-bot commented Mar 5, 2017

gaearon Mar 5, 2017

gaearon Mar 5, 2017

poksme Mar 6, 2017 •

edited

Loading

Timer commented Mar 5, 2017

poksme commented Mar 6, 2017

Timer commented Mar 7, 2017

tonyonodi commented Mar 14, 2017

Timer commented Apr 19, 2017

sebm Apr 23, 2017 •

edited

Loading

flybayer Apr 29, 2017

flybayer commented Apr 29, 2017

thisconnect commented May 6, 2017

thisconnect commented May 7, 2017

ghost commented May 18, 2017

levrik May 27, 2017 •

edited

Loading

levrik May 27, 2017 •

edited

Loading

Charnnarong Jun 3, 2018

thisconnect commented May 28, 2017 •

edited

Loading

chrisheninger commented May 28, 2017

belgattitude commented Jun 1, 2017

Timer commented Jan 9, 2018

marcofranssen commented Nov 21, 2018

Added Integration with Electron tutorial #1718

Added Integration with Electron tutorial #1718

Conversation

poksme commented Mar 5, 2017

facebook-github-bot commented Mar 5, 2017

facebook-github-bot commented Mar 5, 2017

gaearon Mar 5, 2017

Choose a reason for hiding this comment

gaearon Mar 5, 2017

Choose a reason for hiding this comment

poksme Mar 6, 2017 • edited Loading

Choose a reason for hiding this comment

Timer commented Mar 5, 2017

poksme commented Mar 6, 2017

Timer commented Mar 7, 2017

tonyonodi commented Mar 14, 2017

Timer commented Apr 19, 2017

sebm Apr 23, 2017 • edited Loading

Choose a reason for hiding this comment

flybayer Apr 29, 2017

Choose a reason for hiding this comment

flybayer commented Apr 29, 2017

thisconnect commented May 6, 2017

thisconnect commented May 7, 2017

ghost commented May 18, 2017

levrik May 27, 2017 • edited Loading

Choose a reason for hiding this comment

levrik May 27, 2017 • edited Loading

Choose a reason for hiding this comment

Charnnarong Jun 3, 2018

Choose a reason for hiding this comment

thisconnect commented May 28, 2017 • edited Loading

chrisheninger commented May 28, 2017

belgattitude commented Jun 1, 2017

Timer commented Jan 9, 2018

marcofranssen commented Nov 21, 2018

poksme Mar 6, 2017 •

edited

Loading

sebm Apr 23, 2017 •

edited

Loading

levrik May 27, 2017 •

edited

Loading

levrik May 27, 2017 •

edited

Loading

thisconnect commented May 28, 2017 •

edited

Loading