1. Building Desktop Apps with Node.js and Electron
Microsoft Virtual Academy
Header
Mastering Node.js, Part 7
Building Desktop Apps with Node.js and Electron
Eric W. Greene
Produced by

2. Course Overview Getting Started with Electron
Configuring Development Environment
Using React with Electron and TypeScript
Using CSS Modules with Electron
Configuring the Menu Bar
Debugging Electron Applications

3. Getting Started with Electron
The course assumes some basic knowledge of Node.js and the JavaScript programming language
To run the examples on your machine, you will need Node.js installed
Node.js can be downloaded from here:
Install version 6 or later
If you do not understand the basics of these technologies, then watch the WintellectNOW courses, Introduction to Node.js, Node.js Modules & Node.js Packages

4. Getting Started with Electron
Electron is Desktop Application framework built upon Node.js and Chromium (the open source version of Google's Chrome Browser)
Because Node.js and Google Chrome is cross platform, Electron applications run on Windows, Mac and Linux
Electron was created by GitHub as the application framework for its Atom Editor
It was expanded to serve as a general purpose framework used by many produces including Atom, Visual Studio Code, and Hive

5. Getting Started with Electron
Electron programming is a mix of Node.js JavaScript programming, and browser based HTML, CSS and JavaScript
Popular UI frameworks and libraries such as React, Angular 1 & 2, and many others can be used

6. Getting Started with Electron

7. Getting Started with Electron
Getting up and running with Electron is easy
A full sample project is available via NPM and is easy to download and fire up
Run the following commands from a terminal window

8. Creating a Hello World Electron Application

9. Configuring Development Environment
TypeScript and Type Definitions
Application Libraries: Bootstrap, Moment, CSS Modules and React
package.json Configuration
TypeScript React Code Editor

10. Configuring Development Environment
NPM Development Dependencies
electron-prebuilt – included with the starter project, contains the compiled electron framework
typescript – added to provide strong typing, and ES2015 modules
typings – adds strong typing libraries for various JavaScript libraries

11. Configuring Development Environment
TypeScript command line tool is tsc
Can compile one time, or watch for changes to files, and compile again
-w flag turns on watch mode
tsconfig.json file to configure JSX, module format and ES version target
Non-JSX files should be named with a .ts extension
JSX files should be named with a .tsx extension
Visual Studio Code provides great syntax support for .ts and .tsx files

12. Configuring Development Environment
Typings Dependencies
Global Definitions – places definitions in global namespace
electron
moment & moment-node
node
Module Definitions – wraps definitions
react
react-dom

13. Configuring Development Environment
NPM Application Dependencies
bootstrap
react
react-dom
moment
css-modules-require-hook

14. Configuring Development Environment
The package.json file can be configure to run commands at start
npm start – runs the electron program
npm run tsc – performs a one-time compile of the TypeScript files
npm run tsc:w – performs a compile of the TypeScript files, and watches to compile future file changes
.ts and .tsx files are transpiled into .js and .map.js files
After installing packages with npm install, the postinstall task is executed installing the TypeScript typings

15. Configuring the Development Environment

16. Using React with Electron and TypeScript
React and React DOM work the same way in Electron as they do in traditional web applications
Using TypeScript with React allows for component properties and state to be strongly typed
Also, the ES2015 module syntax can be used to organize component files
TypeScript fully supports JSX

17. Using React with Electron and TypeScript

18. Using CSS Modules with Electron
With the rise in component driven development, not just HTML and JavaScript is componentized, but the CSS as well
Bundlers such as Webpack allow CSS to be "required" into the JavaScript portion of the application which allows CSS to be loaded for each individual component
With Electron, we will not be using Webpack, but we can use the NPM package css-modules-require-hook to extend the capabilities of require to allow CSS files to be imported

19. Using CSS Modules with Electron
The hook does two things
Provides unique class name which is scope to the component
Loads the styles associated with the scoped class name into a style tag in the header of the main document
The component CSS files should be stored in the same folder as their corresponding component JS file
SASS or Less could be easily configured to transpile CSS as well

20. Using CSS Modules with Electron

21. Configuring the Menu Bar
The starter Electron application comes complete with a starter menu, featuring many common application commands
The starter menu can be replaced with a custom menu specifically tailored for the application
Commands and submenu can be configured to perform whatever operations are needed in the application
Accelerators can be registered to provide hotkey support

22. Menu API Overview
The API provides a Menu and MenuItem classes for creating new menus and menu items
Five Kinds of Menu Items are supported: normal, separator, submenu, checkbox, and radio
Accelerators can be configured for hot key support
The Menu object supports two useful static function properties
buildFromTemplate – builds a menu from an object literal template
setApplicationMenu - sets the application menu, replacing the default

23. Communicating from the Menu to the Window
Communicating from the menu to the web page requires ipcRenderer to asynchronous communicate from the main process to the render process
IPC stands for Inter-process communication
The web page registers an event handler to listen for IPC events
The main process then sends events to the web page
In the demonstration application, the start-timer and stop-timer events are registered in the TimerApp's component did mount, and unregister in the component will unmount lifecycle event handlers

24. Electron Processes The main process is the electron application itself
Each window is a separate renderer process, and is accessible via IPC from the main process
Renderer processes may communicate with the main process via IPC as well
The main menu runs in the main process, and communicates via IPC to the renderer processes
Because JavaScript is single threaded, each instance (main plus renderers) must run as its own process

25. Configuring the Menu Bar

26. Debugging Electron Applications
Electron applications have two parts which can be debugged, the main process and the renderer processes
The main process is a Node.js application, and can be debugged using Node Inspector
The renderer processes are web pages, and can be debugged using the usual Chrome Developer Tools

27. Debugging the Main Process
Debugging main process requires recompiling Electron to support debugging
This requires the installation of the node-gyp package, this package requires certain build tools
C++ Compiler & Tools (Visual Studio for Windows, XCode for Mac, GCC & Make for Linux)
Python (version 2.7 series)
Alternate configurations and other details are available here:

28. Debugging the Main Process
Once the build tools are installed, node-gyp and node-inspector can be installed locally
Electron needs to be rebuilt, and then Node Inspector needs to be launched
Debugging with Node Inspector is done through the Chrome Development Tool, open the following URL to access the debugging environment
Finally, run the Electron application with the debug flag
electron --debug-brk=5858 .

29. Debugging the Main Process
Most of the common Chrome Developer Tools are available through Node Inspector
Be careful to not inspect the process object, there are reported issues with application crashing when doing this
Source maps will work, so breakpoints can be set directly in the TypeScript code

30. Debugging a Renderer Process
Open the Developer Tools for the desired window
Menu Item => someWindowObject.webContents.openDevTools();
All of the usual developer tools for traditional web applications are available
Chrome Extensions for UI frameworks/libraries such as React, Angular, and such can be used as well
Electron does not support all Chrome extensions, please check the Electron documentation to see a full list

31. Debugging a Renderer Process
To use extensions, the application's ready event must have already fired
Extensions must be loaded manually
Can be loaded via the BrowserWindow.addDevToolsExtension function
Can be loaded using the electron-devtools-installer package
The addDevToolsExtension function requires extension to be installed in Chrome ahead of time, and the path to the extension must be specified
The installer package downloads and loads the extension developer tools
At this time, requires Electron version or later for the React DevTools

32. Debugging Electron Applications

33. Conclusion
Electron is a cross-platform, desktop application framework built on Node.js and Chromium
Electron runs on Windows, Mac and Linux
Applications are built with HTML, CSS and JavaScript
Applications have access to local system resources, and can tie into the operating system UI system
Applications can be distributed through popular distribution channels