A simple boilerplate that runs both Electron and React on the same application.
It uses create-react-app to create the basic React structure. Then it runs the Electron, loading the content of the React application (by default is configured to run the content of the http://localhost:3000).
Clone the repo:
git clone https://github.com/lucasfrosty/electron-react-boilerplate
Then, install the dependencies:
yarn
Now, run the script(s). Here you have two options:
yarn react-start
This will run the React application on http://localhost:3000 (you can change the port on the package.json configs)
yarn electron-start
This will run the Electron application consuming the React part being hosted (by the previous script). The order here is important; if you run the Electron first than React, the Electron app will not have the React part running to consume. So make sure to run the scripts in the correct order.
yarn start
This script is a like bit tricky. We'll be running both the react-start
and electron-start
scripts at the same time, but in this case we will using the concurrently and wait-on packages to make sure that the electron-start
script will only run when the react-start
(and the http://localhost:3000) script runs completely.
I am personally not a big fan of the 2nd approach because once you close the Electron application, you will need to restart both the Electron and the React server to run it again. While with the 1st approach, you have the concerns seperated to each script (and instance of terminal). But that's up to you.
This boilerplate also install React and Redux devtools into the Electron application using the electron-devtools-installer package. If you don't want that in your application, make sure to disable this piece of code (line 31...35 on src/electron-starter.js
).
As you can see, i use yarn
to run the scripts. This is a personal preference. If you want to use npm instead of yarn, make sure to convert the yarn scripts to npm, this can help you.