Setting up conditional loading

Let's review the application startup process:

  1. If you switch to the package.json file, the start script will looks as follows:
      "start": "electron ."

As you already know, Node.js provides us with access to environment variables so that the application can perform different behaviors, depending on external parameters.

  1. Supporting the DEBUG parameter is a standard practice:
      {
"start": "DEBUG=true electron ."
}

For Windows users, the start script should be slightly different:

      {
"start": "SET DEBUG=true && electron ."
}
  1. In this case, our set of scripts will look similar to the following:
      {
"scripts": {
"ng": "ng",
"serve": "ng serve",
"start": "DEBUG=true electron .",
"build": "ng build",
"build.prod": "ng build --prod --baseHref=./",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
}
  1. In the main.js file, you can now check the process.env object, which contains the DEBUG value, and perform conditional loading.
  2. Here, we need to run this from http://localhost:4200 for development mode and use dist/index.html when in production:
      if (process.env.DEBUG) {
// load from running server on port 4200
} else {
// load production build from the "dist" folder
}
  1. Update the main.js file and make the corresponding changes to the createWindow function:
      function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });

if (process.env.DEBUG) {
win.loadURL(`http://localhost:4200`);
} else {
win.loadURL(`file://${__dirname}/dist/integrate-angular
/index.html`);
}

win.on('closed', () => {
win = null;
});
}
  1. Now, we are all set. Run npm run serve in one Terminal window, wait until the server starts, and then run npm start in another window:
      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:4200 with live reloading support. This is what we should expect when we're working on the application locally.

Now, it's time to learn how to use the UI toolkit with our Angular project.

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

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