Introduction

In this article, we will learn how to build Windows apps from non-Windows platforms using Angular 7 with Electron.
Prerequisites
  • Node
  • Npm
  • Angular CLI
  • TypeScript
  • Visual Studio Code
  • Electron
  • Electron Packager

Description

We can create desktop applications with JavaScript by providing a Node.js runtime with native operating system APIs with the help of Electron. Electron implements web pages as its GUI which is controlled by JavaScript. Electron application is a Node.js application.
Note
Before going through this session, please visit my previous sessions related to Angular 7 application.
These are the steps to be followed for setting up Electron and then to create an Angular 7 desktop app with Electron Packager.
Step 1
We should install Electron. The recommended way to install it is as a development dependency in your app, which allows us to implement on various apps with different Electron versions. To do so, run the following command from your app's directory.
npm install --save-dev electron
Then, after successful installation of Electron, we can see the Electron version, as shown below.
Step 2
Then, let us create a JavaScript file called "main.js" file, as shown below.
Next, we should put some code here to create a Windows app and handle all the system events of your application. We can see the code described in the comments.
  1. const { app, BrowserWindow } = require('electron')
  3. // Keep a global reference of the window object, if you don't, the window will
  4. // be closed automatically when the JavaScript object is garbage collected.
  5. let win
  7. function createWindow () {
  8. // Create the browser window.
  9. win = new BrowserWindow({ width: 800, height: 600 })
  11. // and load the index.html of the app.
  12. win.loadFile('dist/angular7app/index.html')
  14. // Open the DevTools.
  15. win.webContents.openDevTools()
  17. // Emitted when the window is closed.
  18. win.on('closed', () => {
  19. // Dereference the window object, usually you would store windows
  20. // in an array if your app supports multi windows, this is the time
  21. // when you should delete the corresponding element.
  22. win = null
  23. })
  24. }
  26. // This method will be called when Electron has finished
  27. // initialization and is ready to create browser windows.
  28. // Some APIs can only be used after this event occurs.
  29. app.on('ready', createWindow)
  31. // Quit when all windows are closed.
  32. app.on('window-all-closed', () => {
  33. // On macOS it is common for applications and their menu bar
  34. // to stay active until the user quits explicitly with Cmd + Q
  35. if (process.platform !== 'darwin') {
  36. app.quit()
  37. }
  38. })
  40. app.on('activate', () => {
  41. // On macOS it's common to re-create a window in the app when the
  42. // dock icon is clicked and there are no other windows open.
  43. if (win === null) {
  44. createWindow()
  45. }
  46. })
  48. // In this file, you can include the rest of your app's specific main process
  49. // code. You can also put them in separate files and require them here.
Then, modify the code in the href section of index.html file.
  1. <meta charset="utf-8">
  2. <title>Satyaprakash-Angular Developer</title>
  3. <base href="./">

Step 3

Open the package.json file and add below file reference as mentioned below.
  1. main.js
  2. electron (inside scripts section)
Then, we need to run the following command from our app's directory to show the output of the desktop app. Here, "ng build && electron ." means build the app, then run Electron.
We can run the Angular app as a native desktop app with the following command.
npm run electron
OUTPUT
Here, the Windows desktop app is shown below.
Step 4
Deploying Windows desktop applications using Electron Packager
Electron Packager will package your Electron app into OS-specific bundles via JavaScript or the command line. Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution. It is is an open source project.
It supports the below platforms to run,
  1. Windows (32/64 bit)
  2. OS X (also known as macOS)
  3. Linux (x86/x86_64)
Then, we run the following command from our app's directory to install Electron Packager.
npm install electron-packager --save-dev
I have added the following command with pack name in the package.json file.
electron-packager
Then, we need to run the following command from our app's directory to deploy our desktop app in the given directory.
npm run pack
OUTPUT
Visit the directory as mentioned in the above image file.
Click on the app icon and see the output. You can drag and put this app (.exe) anywhere you want.

Summary

In this write-up, we have learned:
  • Introduction to Electron and Electron Packager
  • How to set up Electron and Electron Packager
  • How to run a desktop app using Electron
  • How to deploy desktop app (.exe) using Electron Packager