joeynguyen / create-react-electron-app-example Goto Github PK

This is an example repo of how to integrate a React app created using Create React App with Electron and includes an example of how to access Electron's IPC modules through the client-side React UI.

Credit goes to Bertrand Boustany for his great instructions here on how to easily integrate Electron with Create React App. .

However, in his instructions, he states this: "If your app needs to access Electron specific features such as IPC you will need to eject the react-scripts and set electron-renderer as your webpack target."

Credit goes to Brandon Bayer for his comment which explains how it is possible to access IPC modules without having to run eject on your create-react-app app .

Also, credit goes to Hamza Surti for his Medium article explaining what Electron's IPC modules are and an example of how to use them.

Last but not least, a great thanks to Christian Sepulveda for originally documenting the idea in this freeCodeCamp article.

Install Yarn if you don't already have it - instructions.

Initialize your project using create-react-app

npx create-react-app my-app
cd my-app
npm start

Install dependencies for Electron

yarn add --dev concurrently electron-packager wait-on electron

Create a main.js file in the root of your repo and copy/paste the contents from this repo's main.js.

In your package.json, add these two lines in the root object to this:

  "homepage": "./",
  "main": "main.js",

The main property tells the electron command line script which file to run when it launches

create-react-app (by default) builds an index.html that uses absolute paths. This will fail when loading it in Electron. Thankfully, there is a config option to change this: set a homepage property in package.json. (source)

In your package.json, change your scripts object to this:

  "scripts": {
    "start": "concurrently 'yarn react-start' 'wait-on http://localhost:3000/ && yarn electron-start'",
    "build": "yarn react-build && yarn electron-build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "react-start": "BROWSER=none react-scripts start",
    "electron-start": "electron .",
    "react-build": "react-scripts build",
    "electron-build": "electron-packager ./ --overwrite"
  }

Feel free to reference this repo's package.json file if these instructions are unclear.

If you wish to update your app to be able to access IPC modules, refer to this repo's src/App.js for example code on how to do it.

The code you copied from this repo's main.js already includes code that will interact with the code in React. Feel free to rip it out of your app if you don't need it.

const ipcMain = require('electron').ipcMain;

// Electron IPC example
ipcMain.on('user-data', function(event, arg) {
  console.log(arg);
  //do child process or other data manipulation and name it manData
  event.sender.send('manipulatedData', 'COOL info!');
});

Your app is now ready to be built!

Run:

yarn build

and wait for the magic to happen. Refer to the console messages to see where the script put your newly built app.

Currently, the script is configured to build the application for your current OS, but you can add additional scripts to target different operating systems. Learn more here.