csepulv/electron-with-create-react-app

Sample Electron application using create-react-app

How to build an Electron app using create-react-app. No webpack configuration or “ejecting” necessary.

Code repo for post on freeCodeCamp.

https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c#.ze6c9qin1

There is another branch, npm-start It uses npm-start instead of npm run dev. (change submitted by vcarl) Details are in this pull request

Thanks to marbemac for submitting a pull request that captures logging output. It can be found in logging-capture

Thanks to vicentedealencar for an example of using electron-builder for packaging. Details are here.

electron-with-create-react-app's Issues

Error when quitting app

Hi! Thank you for a great tutorial :)

When explicitly quiting the app, the web server is not killed and it throws and error. The same error is given when trying to start the app again ("killall node" resolves this). Any ideas what to do about this? Is this a problem when building the electron app for prod?

[DONE] Killing all processes with signal  null
internal/util.js:186
  throw new errors.TypeError('ERR_UNKNOWN_SIGNAL', signal);
  ^

TypeError [ERR_UNKNOWN_SIGNAL]: Unknown signal: null
    at convertToValidSignal (internal/util.js:186:9)
    at ChildProcess.kill (internal/child_process.js:396:5)
    at EventEmitter.<anonymous> (/Users/nadangergeo/Workspace/lek/korv/experiment2/node_modules/foreman/lib/proc.js:54:11)
    at EventEmitter.emit (events.js:164:20)
    at ChildProcess.<anonymous> (/Users/nadangergeo/Workspace/lek/korv/experiment2/node_modules/foreman/lib/proc.js:50:13)
    at ChildProcess.emit (events.js:159:13)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `nf start -p 3000`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nadangergeo/.npm/_logs/2018-01-07T06_57_30_724Z-debug.log

[REQUEST] electron-packager configuration

I'm new to Electron/desktop apps coming from a React/web app background. I've started writing an application based on your boilerplate but I haven't been able to get electron-packager to build the actual .app executable.

Have you accomplished that for this repo and do you have any plans to add those instructions to the blog post?

[WARN] No ENV file found

Thanks for the blog post and this repo! After I run dev (I'm using Yarn but it happens with NPM too), I get the warning No ENV file found. Should I add one? What's your suggestion here?

Running last version of react-scripts will cause to launch the app in both Browser and Electron window

Hi,
i was updating the app to the latest versions of the packages- Everything was fine until i updated the react-scripts package to the last version (2.1.3).
Now running yarn dev will cause to launch the app in the browser and lately in the electron window.
Any idea on how to fix it?

Last package.json for ts.

{
  "name": "react-test",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "src/electron-starter.js",
  "resolutions": {
    "@types/react": "^16.8.6"
  },
  "dependencies": {
    "electron": "^4.0.6",
    "react": "^16.8.3",
    "react-dom": "16.8.3"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject",
    "electron": "electron ."
  },
  "devDependencies": {
    "@types/react-dom": "^16.8.2",
    "@types/electron": "^1.6.10",
    "@types/jest": "^24.0.9",
    "@types/node": "^11.10.4",
    "@types/react": "^16.8.6",
    "foreman": "^2.0.0",
    "react-scripts-ts": "3.1.0",
    "typescript": "^3.3.3333"
  }
}

How do we run this in production?

Thanks for the article! How should we deploy this/ run it in production?

Doesn't work with electron version 8

Had to revert the version to 1.7.9 for my case to work.
Help is appreciated.
Can you update this?

The trick no longer works

That trick to getting ipcRenderer exposed, no longer works. You'll need a ridiculously stupid and verbose workaround to get to it. I blame Electron for not playing nice with tools in the past, and for not providing this solution to issues raised about the plethora of errors from workarounds - no longer functioning, mind you - floating around all over SO and Github and whatnot.

1. Add a preload config:

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'electron-preload.js')
  }
});

2. Expose stuff in the preload file (in ./src/electron-preload.js in this case):

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
const { contextBridge, ipcRenderer } = require("electron");

// As an example, here we use the exposeInMainWorld API to expose the browsers
// and node versions to the main window.
// They'll be accessible at "window.ipcRenderer".
process.once("loaded", () => {
  contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer);
});

3. If using typescript, place this somwhere in a sensible file as well:

import { IpcRenderer } from 'electron';

declare global {
  interface Window {
    ipcRenderer: IpcRenderer
  }
}

4. Now you can use window.ipcRenderer anywhere in the app.

[WARN] Cannot read property '1' of null

When I run npm start I get the following error. I'm running on a windows machine. Far as I can tell my setup is exactly the same as this branch.

[WARN] Cannot read property '1' of null

Hello,I want to know how can I update the ico of the packaged .exe file for the electron package

I want to change this default ico for the .exe file,please tell me wher to change this ico file,thankyou

throw new errors.Error('ERR_UNKNOWN_SIGNAL', signal);

I have run this project using npm run dev, the app ran fine, but I also got this output:

[WARN] No ENV file found
03:14:29 electron.1 | starting electron
03:14:30 react.1 | > [email protected] start C:\Users\G\Downloads\electron-with-create-react-app-master
03:14:30 react.1 | > react-scripts start
03:14:34 react.1 | Something is already running on port 3000.
[DONE] Killing all processes with signal null
internal/util.js:186
throw new errors.Error('ERR_UNKNOWN_SIGNAL', signal);
^

Error [ERR_UNKNOWN_SIGNAL]: Unknown signal: null
at convertToValidSignal (internal/util.js:186:9)
at ChildProcess.kill (internal/child_process.js:379:5)
at EventEmitter. (C:\Users\G\Downloads\electron-with-create-react-app-master\node_modules\foreman\lib\proc.js:54:11)
at emitOne (events.js:121:20)
at EventEmitter.emit (events.js:211:7)
at ChildProcess. (C:\Users\G\Downloads\electron-with-create-react-app-master\node_modules\foreman\lib\proc.js:50:13)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: nf start -p 3000
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\G\AppData\Roaming\npm-cache_logs\2018-04-28T23_14_34_096Z-debug.log

Is this normal?

Module not found: 'child_process'

Hello,

can not use shelljs dependency with your app. Getting this error:

Failed to compile.

Error in ./~/shelljs/src/exec.js
Module not found: 'child_process'

Is there way to fix that?

to replicate:
git clone [email protected]:csepulv/electron-with-create-react-app.git errReport && cd errReport && npm i && npm i shelljs

then add this line to render method of App.js:
let shell = require('shelljs');

then npm run dev

CSS hotreload

Hello,

Great project 👍

The hot reload app is working fine with js files but it does not work with the css files.
Any idea to make the hot reload working?

.env file is being overwritten

Values given to a .env file will not be loaded on startup. When doing

require('dotenv').config()
console.log(process.env);

I only see the NODE_ENV and the PUBLIC_URL and none of the other variables I put into the .env file.

logging from `electron-starter`

Perhaps because it's run as a child process, logs in the electron-starter are not shown on the console from which the project is started.

As a workaround I am manually starting first the create react app bit, then, by hand, the electron npm script -- with the ELECTRON_START_URL prefix.

Is there a way for this solution to surface console.logs from that electron-starter. js file?

Thanks!

Trying to use rethinkdb

I am trying to use rethinkdb in this starter and I am getting the error:

   bluebird.js:953 Unhandled rejection Error: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
   at new HttpConnection 
   (http://localhost:3000/static/js/bundle.js:31218:10)

any help would be appreciated. Thanks!

Logging?

Hey, I'm fairly new with electron, so perhaps I'm missing something basic, but I noticed that console.log isn't working for anything on the electron-starter.js side of things. Is there an easy solution for this? The top stack overflow results weren't helpful, unfortunately.

images broken after building with electron-builder

Hello,
This may not be directly an issue with this package, but whenever I use electron-builder and build a standalone electron app (dmg file, ...) everything works great for the React piece inside Electron except for the images. I can see them both in my public directory as well as in the build/ directory. However after debugging the standalone electron app, it's attempting to load the image from

file:///my-img-folder/my-img.png

while it should probably be something like this as a prod electron, I'm assuming:

file:///Applications/m-yapp.app/Contents/Resources/app.asar/build/my-img-folder/my-img.png

Has anyone seen this behavior as well? I'm thinking a variable in .env might be the solution here, but I'm not sure what it should be.

BrowserWindow#loadUrl niside of electron.screen "display-added" callback causes infinite recursion

• Electron Version: 2.0.2 (also tried on 1.7.9, with same results)
• Operating System (Platform and Version): Windows 10 Professional

This is the minimal code I've found that produces the problem, placed in electron-starter.js:

const electron = require("electron");
const { app, BrowserWindow } = electron;
app.on("ready", () => {
  let window = new BrowserWindow();
  electron.screen.on("display-added", () => {
    window.loadURL("https://www.github.com/");
  });
});

If you have multiple displays, you can reproduce this issue by either plugging in a display, or using Win+P to switch between single screen and extend modes. For some reason, doing this with the above code will cause the "display-added" event to trigger indefinitely.

It doesn't matter if the window is created inside or outside of the callback, nor does it matter what URL (including file paths) is being loaded. I also found by accident that calling a nonexistent method on the window (such as window.asdf()) results in the same problem. Of the few other BrowserWindow methods I've tried, no others caused the same issue.

Any idea what might be going on here?
Thanks in advance for your help!

Redux?

Hi may ask if you can apply redux on this boilerplate?

env file not found

I wonder if env file not found is normal or I follow wrong steps?

Running express server as part of electron app

I have a server electron app to which all client apps connect. I had to do this because the customer wants the server running within their premises. I created an express server in the following way:-

1. Created a server.js file inside public directory where I run the express server.
2. Created a server.html which is loaded in a new hidden browser window from electron.js. The server.html simply runs a function with require('.\server'). I get an error here saying that the required module was not found. I don't know why since server.html and server.js are right next to each other. %PUBLIC_URL% won't work here since server.html is loaded after the build step and during the electron step.

What can I do to fix this issue? Is there a better way of running an express server with create-react-app for electron?

window.require doesn't work with latest version of electron

electron-with-create-react-app/src/electron-starter.js

Line 16 in 7d7f0f3

mainWindow = new BrowserWindow({width: 800, height: 600});

The latest version of electron has nodeIntegration disabled by default, causing window.require to not work.

To fix this:

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: { nodeIntegration: true },
})

Throwing errors with Python 3.x

node-pre-gyp verb command build [ 'rebuild' ]
gyp ERR! configure error 
gyp ERR! stack Error: Python executable "/usr/local/bin/python" is v3.6.4, which is not supported by gyp.
gyp ERR! stack You can pass the --python switch to point to Python >= v2.5.0 & < 3.0.0.```

Can't get click event to register at all in desktop app... works in the browser

Running Electron + react set up according to your guide here. I added a simple app bar from material and created a react class from the component.

However the components in the window launched by electron.exe are not responsive. If I go to localhost:3000 then I find that the buttons are responsive and trigger events, everything works!

Any tips to help me investigate?