How to make an executable for a React + Node JS using Electron
This tutorial, like many others, was inspired by the lack of a well-documented, step-by-step method for developing an executable program using ReactJS for the frontend and NodeJS for the backend.
To proceed with this guide, I’ll assume you’ve previously created the Backend and Frontend. If you haven’t, you can do so now and return to this instruction later.
The fundamental goal behind developing an executable application is to eliminate the need for the user to launch the frontend and the backend of the program separately in order to utilize it. In order to bundle these assets with the backend, we will use static build files for the frontend and an electron packager. The executable that results from this can be used to run our bundled program using Electron.
Let’s start hacking…
Building your ReactJS software into static files is the best first step. Make sure to include the following in your Frontend’s package.json:
{
"homepage": ".",
...
"scripts": {
"start": "react-scripts start"
"build": "react-scripts build"
}
...
}The “homepage” will append relative paths (./js/…) to the files generated. Then run:
