If you have read the Building an Electron application with Angular section, the process of setting up conditional loading is going to be familiar to you.

In this section, we are going to focus on running the web server with the application in the way that Create React App does. Then, we will render our locally running application from within the Electron shell when developing, debugging, and testing on the local machine. For production mode, however, the application is going to use production output.

Let's configure the package scripts so that we don't have to use as many parameters during the development and testing phase:

1. Update the scripts section in the package.json file according to the following code:

{
  "scripts": {
    "serve": "react-scripts start",
    "start": "DEBUG=true electron .",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

For Windows users, the start script should be as follows:

{
  "start": "SET DEBUG=true && electron ."
}

2. The format of the call is simple: depending on the value, you either use a web server on port 3000 or load the precompiled index.html file:

if (process.env.DEBUG) {
  // load from running server on port 3000
} else {
  // load production build from the "build" folder
}

3. Now, update the main.js file and make the following changes to the createWindow function:

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

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

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

Note that, traditionally, Angular CLI applications run on port 4200; the Create React App tool prefers port 3000.

4. Now, it's time to test how things work. Run the following two commands in separate Terminal windows:

npm run serve
npm start

Since we are running the application with the DEBUG parameter, the Electron shell is going to display content from http://localhost:3000 with live reloading support.

Now, let's move on to the user interface and integrate the Blueprint component library.