We conditionally open the Chrome dev tools depending on the environment (because we only want them to open automatically in development).

We use the electron-is-dev package to conditionally point Electron to either our local development server or a bundled production version of our React app (and we use Node's path module to help with this).

The code above has been adapted from a starter example in the Electron docs, but with a few notable changes: You can also put them in separate files and require them here. Let's begin by creating the new React app:Ĭonst path = require ( ' path ' ) const ) // In this file you can include the rest of your app's specific main process // code. We'll take care of the first two steps in this section and then configure our project with Electron Forge in the next section.

Import the project into the Electron Forge workflow so that it can easily be packaged up for distribution.

Add a file to start up an Electron app with the React app running inside of it.

Scaffold a new React app using the CRA CLI tool.

The approach we'll take to set up our app will involve a few steps: TL DR: You can find the complete code from this demo here. In this post, I'll share with you what steps I followed to make this happen and how I reconciled the code generated by the CRA and Electron Forge CLIs to run no-fuss builds with a single command. I recently found myself needing to do this on a project and found that I had to do a bit of experimentation before setting on how to best approach generating, developing, and packaging an Electron app with code scaffolded from Create React App under the hood. But what happens when you're ready to package up that app in distributable formats so users can install it on their systems? If you ever need to wrap a React app in Electron, you'll surely find there's no shortage of tutorials that explain how to set up your project in your local development environment.

Npm create electron app