Noseratio's version of electron-quick-start

This is a fork of Minimal Electron Application to which I added some minimal IPC between Main and Renderer processes, as well as some debugging support based on the Electron Debugging (Main and Renderer Process) VSCode recipe.

It uses promises and async/await extensively throughout the Main and Renderer initialization scripts. This provides some nice pseudo-synchronous, pseudo-linear code flow, which facilitates error handling and is easy to step through and debug.

There's some logic to delay the execution of the scripts inside the Renderer process, to give Chrome Debugger some extra time to initialize and attach to the Renderer. Without it, I was unable to hit some breakpoints I set inside the Renderer. Apparently, I am not the only one experiencing this issue, e.g., here's a similar question on SO.

How to run it

To clone and run this repository you'll need Git and Node.js (which comes with npm) installed on your computer. I tested this project under Windows, where I usually install everything with Chocolatey from admin PowerShell, e.g.:

choco install nodejs

Then from your shell command line:

# Clone this repository
git clone https://github.com/noseratio/electron-quick-start.git
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

How to debug it with Visual Studio Code (both Main and Renderer):

• First, install VSCode:
  choco install vscode
  You may need to restart the shell for the PATH environment changes to be picked up.
• Go to the project folder and run:
  code electron-quick-start.code-workspace
• In VSCode, make sure Debugger for Chrome extension is installed. Go to Extensions (Ctrl+Shift+X) and type Debugger for Chrome, then install it:
  
• Set breakpoints in master.js and renderer.js as desired with F9.
  Don't hit F5 just yet!
• Go to Commands (Ctrl+Shift+P or F1) and type Select and Start Debugging:
  
• Choose Electron: All:
  
• That should start a debugging session for both Main and Renderer processes. You should be able to hit all breakpoints inside main() functions inside main.js and renderer.js. The selected configuration is remembered, so next time you could just hit F5.

License

CC0 1.0 (Public Domain)