Post
Ask Question

Steps To Build πŸ—οΈ Angular 7 (Beta) Desktop πŸ–₯️ Apps With Electron

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')  
  2.   
  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  
  6.   
  7. function createWindow () {  
  8.   // Create the browser window.  
  9.   win = new BrowserWindow({ width: 800, height: 600 })  
  10.   
  11.   // and load the index.html of the app.  
  12.   win.loadFile('dist/angular7app/index.html')  
  13.   
  14.   // Open the DevTools.  
  15.   win.webContents.openDevTools()  
  16.   
  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. }  
  25.   
  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)  
  30.   
  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. })  
  39.   
  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. })  
  47.   
  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


Similar Articles