To run the Electron app in development mode (we'll get on to creating an executable file later), we have to do the following:
- Run our restful_server_cors server code from Chapter 4, Implementing RESTful Services with Node.
- Start the React app, which requires the server to be running.
- Wait until it's loaded, and then and only then, move on to the next step.
- Start Electron.
So, basically, you'll have to run the two following commands, but you'll need to do so in separate terminals, and you'll also have to wait for the React app to show up in the browser before starting Electron:
// in the directory for our restful server:
node out/restful_server_cors.js
// in the React app directory:
npm start
// and after the React app is running, in other terminal:
npm run electron
After starting Electron, a screen quickly comes up, and we again find our countries and regions app, now running independently of a browser. See the following screenshot—note that I resized the window from its 1024 × 768 size:
The app works as always; as an example, I selected a country, Canada, and correctly got its list of regions:
We are done! You can see that everything is interconnected, as before, in the sense that if you make any changes to the React source code, they will be instantly reflected in the Electron app.
So far, we have seen that we can make an executable out of a web page; let's now see how to make it more powerful.