Instead of stopping and restarting the application each time you need to verify a code change, you can enable the live reloading feature and have the browser or Electron window automatically refresh as you save the changes.

When you start the application with the npm run serve script (or npm start by default), you will see the following output:

You can now view integrate-react in the browser.

  Local: http://localhost:3000/
  On Your Network: http://192.168.0.10:3000/

Note that you need to use port 3000 in this case. Let's update the createWindow function accordingly:

1. Open the main.js file and update the createWindow function according to the following code:

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  // win.loadURL(`file://${__dirname}/build/index.html`);
  win.loadURL(`http://localhost:3000`);

  win.on('closed', () => {
    win = null;
  });
}

To verify the application, you are going to need two Terminal windows.

2. In the first Terminal window, run the serve command, as follows:

npm run serve

3. Give the web server a few seconds to start and run the following command in the second Terminal:

npm start

You should see an Electron window showing the React home page.

4. Now, go to the src/App.js file and edit its content to see the live reload feature in action. For instance, insert the React Electron label:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1>React Electron</h1>
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Please note that a typical React application requires a single element tag so that it can wrap the rest of the components, similar to the following structure:

class App extends Component {
  render() {
    return (
      <div>...</div>
    );
  }
}

All the examples in this chapter assume that you have a root element in the App component.

5. Switch to the Electron window and notice how it updates on the fly with the new text:

You have successfully configured live reloading for your Electron application. This should help you develop and test your project fast as you'll be able to see changes almost instantly.

When development is over and you need to distribute the application, live reloading is not needed. Instead, you need to have a production build output with all the static assets for the application. This is what we are going to address in the next section.