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

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

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: https://nodejs.org 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

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

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

Getting Started with Electron http://electron.atom.io

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

Creating a Hello World Electron Application

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

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

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

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

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

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

Configuring the Development Environment

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

Using React with Electron and TypeScript

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

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

Using CSS Modules with Electron

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

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

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

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

Configuring the Menu Bar

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

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: https://github.com/nodejs/node-gyp

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 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 Finally, run the Electron application with the debug flag electron --debug-brk=5858 .

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

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 http://electron.atom.io/docs/tutorial/devtools-extension/

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 1.2.1 or later for the React DevTools

Debugging Electron Applications

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