Introduction

Hello all you fellow code junkies!

I am a seasoned software developer / contractor / consultant (some call me an old goat) with over 30 years of experience under my belt. I literally have "been there, done that, got the t-shirt". You can find me on linkedin or visit my website.

As a contractor I have a variety of clients with differing requirements. Most of my work had evolved into building what we were calling “internet or web enabled applications”. I found myself writing a lot of the framework code over and over for each new project. I realized the need for a simple yet powerful framework for building Single Page Applications. I also wanted a common framework that could be used to build a website (web application) or be deployed to a mobile device or be installed as a desktop app.

Please follow along my journey here to build a simple yet powerful collection of libraries to achieve the proverbial "One Code Base - Deploy Anywhere" solution.

• Background
• Theory and Design
• Source Control
• Development Environment
• JavaScript Framework - Aurelia
• Client / Server Modification
• Mobile Support - Cordova
• Merge Cordova => Aurelia
• Push Aurelia => Cordova
• Mobile Resources
• Desktop Support - Electron
• Merge Aurelia => Electron
• Notarize IOS Apps
• Exposing Electron inside Aurelia App
• Debugging Electron App

Note: I have recently updated the SmokeHouse/Applewood project on GitHub to the latest code version that  I am referencing in this blog. Please update your local repositories.

As I complete future modules I will add links here. Please check back often to see my new posts and follow my progress.

Note: This project has been complete and in use for over a year. I have decided to update the core project with newer libraries and document my journey here so others may benefit.

Cheers,
Daryl

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!