Debugging Electron App

Launching Electron

Now that we have exposed Electron inside our Aurelia app it would be nice to be able to modify our source and have all the same debugging features available that Aurelia affords us.

Lets start by modifying the Aurelia run script so that we can launch Electron from the Aurelia CLI.

1. Open the run.js file located in the aurelia_project\tasks folder
2. Add the following reference
   
   
   import * as childProcess from 'child_process';
3. Now add the following code to launch Electron
   
   
   let elect = gulp.series(
       build,
       done => {
         childProcess
           .exec('npm start')
           .on("close", () => {
             // User closed the app. Kill the host process.
             process.exit();
           })
     
         done();
       }
   );
4. Next we modify the run code to use the electron launcher
   
   
   let job;
   
   
   if (CLIOptions.hasFlag('electron')) {
       job = elect
   } else {
       job = serve
   }
   
   
   let run = gulp.series(
     job,
     done => { watch(reload); done(); }
   );
5. The file should now look like this
   
   
   
6. Now we can launch Electron by including our new --electron flag to the CLI command
7. Run command 'nvm use 10.14.0'
8. Run command 'au run --watch --server --electron'

This should launch our project in an electron window

You can open the dev tools and carry on developing just like we do when using Chrome.

Refreshing Electron App

One of the really nice features of developing in Chrome is the use of BrowserSync to keep the Chrome window refreshed automatically with changes we make in source.

There is an electron reload package that we can add that watches files for changes and re-loads the electron window ... perfect ... well almost. Since our solution is getting fairly complex we are monitoring and copying a lot of files every time the Aurelia watcher detects a change. Unfortunately watching our app directory causes multiple reloads of the electron app for every change we make. This isn't ideal. The good news is we can manipulate the reloader by adding a single file to our copy command and then watching the single file for a change.

1. Create a new file in the \root folder called reload ... It doesn't need an extension because it is just a dummy file used to trigger the reloader.
   
   
2. Next we want to include the dummy reload file in our push files script that copies files to the electron app directory when a change is triggered.
3. Open the aurelia.json file in the aurelia_project folder
4. Add "reload": "" to the end of the sources node in the pushFiles node as shown below
   
   
5. Now we need to add the electron-reload package to our project
6. Open a command prompt in the /root folder of our project.
7. Run command 'nvm use 10.14.0'
8. Run command 'npm install electron-reload --save-dev'
9. Next we need to load the package at run time.
10. Open the file main.js located in the /app directory
11. Add the following code
    
    
    // load the electron reloader
    try {
        const path = require('path');
        //watch the reload file for changes
        require('electron-reload')(path.join(__dirname,'reload'), {
            electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
        });
    } catch(e) {}
12. The file should now look like this
    
    
       

That's it! Save all your work and re-launch the au run command line with the electron switch. Make some changes in source and voila ... the electron window will refresh and you should see your changes!