Build Angular 8 Desktop Apps using Electron with Eclipse IDE

Introduction 
 
In this article, we will learn about how to build Windows apps using Angular 8 using Electron with the help of Eclipse IDE. Most of all, we use IDE’s like Visual Studio code, Visual Studio, etc. But there are some other tools which are very useful for developing Angular applications. One of the most used IDE is Eclipse. Eclipse is an open-source popular IDE used by many developers around the globe. Eclipse is also a user-friendly IDE especially developed for JAVA developers and comes in a variety of categories such as Eclipse for JAVA developers, Eclipse for C & C++ developers and Eclipse for JavaScript and web developers. You can find more information about Eclipse from the following link. Here we are going to use Eclipse for JavaScript and web developers IDE and you can download the following mentioned IDE from the following link.
 
Compared with Visual Studio code, Eclipse has some slight differences. For example, In VS code we use Angular commands to create a component, class or a service. Here in Eclipse, the way of creating a component, class & as well as creating service is an easy way and we will explore it in the following steps as mentioned below.
 
After downloading the IDE from the following link, we need to install some of the supporting plugins. Download the Angular IDE plugin from the following below link. Open Eclipse->help->install new software and paste the following link in work with the label. By downloading the plugin from this link, the required plugins will be automatically added to Eclipse IDE.
 
http://www.genuitec.com/updates/codemix/ci/
 
You can find my previous article for installing Eclipse IDE plugin from the following link. Before getting started let’s take an overlook at what is Electron framework? Electron is a very famous popular framework, it is easy to build desktop apps for Windows, Linux and as well as Mac-OS. Because of Electron, we can use any kind of front-end JavaScript framework to develop desktop apps.
 

Setting-up

  • Angular CLI
  • Eclipse IDE
  • Electron
  • Electron Package Manager
  • Node
  • Npm
  • Typescript
Step 1
 
The first step is to create a new Angular project, for that select->file->new->project-> Angular project and click -> Next, and select the Angular CLI to version 8.3.12 and select -> next.
 
The Eclipse IDE will automatically execute the necessary process in order to create an Angular project, so click -> finish.
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
The next step is to install bootstrap to our project, which helps in providing a better UI experience, for that use the following command in the terminal. For using the terminal in eclipse use the shortcut key ctrl+alt+T and enter the following command.
 
npm install bootstrap --save
 
After that open index.html and add the following code inside of the head tag as shown below.
  1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">  
  2.   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>  
  3. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>  
  4. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  
Step 2
 
The second step is to install Electron and for installing Electron, switch to terminal again and run the following command:
 
npm install –save-dev electron
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
We can see that the electron has been successfully installed. The next step is to create a new JavaScript file. Follow the mentioned below steps to create a new main.js file.
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
Now open main.js file and place the following code inside of the JavaScript file:
  1.  const { app, BrowserWindow } = require('electron')    
  2. let win      
  3. function createWindow () {    
  4.   win = new BrowserWindow({ width: 800, height: 600 })    
  5.   win.loadFile('dist/electro/index.html')    
  6.   win.webContents.openDevTools()    
  7.   win.on('closed', () => {    
  8.     win = null    
  9.   })    
  10. }    
  11. app.on('ready', createWindow)   
  12. app.on('window-all-closed', () => {    
  13.   if (process.platform !== 'darwin') {    
  14.     app.quit()    
  15.   }    
  16. })    
  17. app.on('activate', () => {    
  18.   if (win === null) {    
  19.     createWindow()    
  20.   }    
  21. })   
and replace the code inside of the index.html file again.
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>electro</title>  
  6.   <base href="./">   
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">  
  9.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">  
  10.   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>  
  11. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>  
  12. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  
  13.   
  14. </head>  
  15. <body>  
  16.   <app-root></app-root>  
  17. </body>  
  18. </html>  
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
Step 3
 
The next step is to open package.json file and add the following reference inside as mentioned below named: 
“main”: “main.js”
 
“electron”: “ng build && electron”
  1. {  
  2.   "name""electro",  
  3.   "version""0.0.0",  
  4.   "main""main.js",  
  5.   "scripts": {  
  6.     "ng""ng",  
  7.     "start""ng serve",  
  8.     "build""ng build",  
  9.     "test""ng test",  
  10.     "lint""ng lint",  
  11.     "e2e""ng e2e",  
  12.     "electron""ng build && electron",  
  13.     "pack""electron-packager."  
  14.   },  
  15.   "private"true,  
  16.   "dependencies": {  
  17.     "@angular/animations""~8.2.11",  
  18.     "@angular/common""~8.2.11",  
  19.     "@angular/compiler""~8.2.11",  
  20.     "@angular/core""~8.2.11",  
  21.     "@angular/forms""~8.2.11",  
  22.     "@angular/platform-browser""~8.2.11",  
  23.     "@angular/platform-browser-dynamic""~8.2.11",  
  24.     "@angular/router""~8.2.11",  
  25.     "bootstrap""^4.4.1",  
  26.     "rxjs""~6.4.0",  
  27.     "tslib""^1.10.0",  
  28.     "zone.js""~0.9.1"  
  29.   },  
  30.   "devDependencies": {  
  31.     "@angular-devkit/build-angular""~0.803.12",  
  32.     "@angular/cli""~8.3.12",  
  33.     "@angular/compiler-cli""~8.2.11",  
  34.     "@angular/language-service""~8.2.11",  
  35.     "@types/jasmine""~3.3.8",  
  36.     "@types/jasminewd2""~2.0.3",  
  37.     "@types/node""~8.9.4",  
  38.     "codelyzer""^5.0.0",  
  39.     "electron""^7.1.2",  
  40.     "electron-packager""^14.1.1",  
  41.     "jasmine-core""~3.4.0",  
  42.     "jasmine-spec-reporter""~4.2.1",  
  43.     "karma""~4.1.0",  
  44.     "karma-chrome-launcher""~2.2.0",  
  45.     "karma-coverage-istanbul-reporter""~2.0.1",  
  46.     "karma-jasmine""~2.0.1",  
  47.     "karma-jasmine-html-reporter""^1.4.0",  
  48.     "protractor""~5.4.0",  
  49.     "ts-node""~7.0.0",  
  50.     "tslint""~5.15.0",  
  51.     "typescript""~3.5.3"  
  52.   }  
  53. }   
Step 4
 
Open app.component.html file and replace the following code inside of it and switch to terminal again and run the following code inside of it.
  1. <div class="container-fluid">  
  2. <form>  
  3.   
  4.   <div class="form-group">  
  5.     <label for="exampleInputEmail1">Email address</label>  
  6.     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">  
  7.     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>  
  8.   </div>  
  9.   <div class="form-group">  
  10.     <label for="exampleInputPassword1">Password</label>  
  11.     <input type="password" class="form-control" id="exampleInputPassword1">  
  12.   </div>  
  13.   <div class="form-group form-check">  
  14.     <input type="checkbox" class="form-check-input" id="exampleCheck1">  
  15.     <label class="form-check-label" for="exampleCheck1">Check me out</label>  
  16.   </div>  
  17.   <button type="submit" class="btn btn-primary">Submit</button>  
  18. </form>  
  19. </div>    
npm run electron
 
We can see the output of our Angular application by executing the following command:
 
ng serve -open
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
Step 5
 
Now here comes the main part of the application, we need to deploy windows desktop applications using the electron package manager. For that execute the following command in terminal
 
npm install electron-packager—save-dev
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
What happens here is if we execute the above command is the Electron packager will package the Electron app into OS-specific bundles by using JavaScript. The Electron Packager is a command-line tool and Node.JS library bundles the source code into executable and supporting files.
 
After installing the Electron packager open package.json file and add the pack name inside of it.
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
Open a new terminal and execute the following command:
 
npm run pack
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 
Now switch to the directory of the deployed app and we can see the windows app in .exe format and by that, we can drag, drop and use wherever we want to use it.
 
Build Angular 8 Desktop Apps Using Electron With Eclipse IDE
 

Summary

 
In this article, we have explored building Angular 8 desktop apps with Electron using Eclipse IDE. I hope this article will be useful for you. Thanks for reading.