How it works...

To run the Electron app in development mode (we'll get on to creating an executable file later), we have to do the following:

  1. Run our restful_server_cors server code from Chapter 4, Implementing RESTful Services with Node.
  2. Start the React app, which requires the server to be running.
  3. Wait until it's loaded, and then and only then, move on to the next step.
  4. 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:

Our app, running as an independent executable

The app works as always; as an example, I selected a country, Canada, and correctly got its list of regions:

The app works as before; pick a country, and a call to our RESTful server will get its 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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.234.62