make desktop apps with ng and electronjs

Hey there.

my first article/story here..

anyway, let's get started.

If you're a hardcore fan of ng, electron and TypeScript like myself, perhaps you have already told yourself how great would it be to develop desktop apps with these wonderful tools; besides, as developer during your career you may be asked for developing desktop apps and.. how wonderful would it be to do it with frameworks you're already skilled with? with these in mind, you probably know that you will face some difficulties like packages incompatibilities and tones of errors which TSC will throw in your face if you begin to combine ng with electron ... and I hope this article approves them and helps you create wonderful desktop apps easily. :)
the first idea of this article came from AngularFirebase and all i did was binding some of my own experience regarding working with node in ng to it :)

Step 1) let's create a project with our beloved ng :

ng new my-desktop-app

then, cd to the project and add electron to your packages :)

cd my-desktop-app
npm i electron --save

Stop 2)

Since it's a desktop app, we need to make a tiny change in base href of our angular app, in order to do so, navigate to src folder of your angular app and open index.html in your desired IDE and add a dot right before of the slash of base heref :)

<base href="./">

Step 3)

Now navigate back to root folder of your just created project and create a file called main.js with following codes. this is the code which lunches electron for us :

const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 600,
    height: 600,
    backgroundColor: '#ffffff',
    icon: 'file://'+__dirname+'/dist/my-desktop-app/assets/logo.png'
  })


  win.loadURL('file://'+__dirname+'/dist/my-desktop-app/index.html')

  //// uncomment below to open the DevTools.
  win.webContents.openDevTools()

  // Event when the window is closed.
  win.on('closed', function () {
    win = null
  })
}

// Create window on electron intialization
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {
    createWindow()
  }
})

Okay, now let's make few changes in our package.json.

Step 4)

here, we will define some custom commands for our projects in order to debug,build and test our project as easy as our regular ng projects. To do so, open your package.json and define :

1- main.js as main script of your project, so electron will be able to run the project for you.

2 - custome commands for build , run and dist the project :)

here is a sample of package.json for such simple project without build and dist command - in a later article i will describe how to build desktop apps for both Linux ( <3 ) and windows desktops on Linux . UPDATE : it's here!

{
  "name": "my-desktop-app",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron-test": "ng build --prod --base-href && electron ."
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "electron-builder": "^20.39.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.3",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "electron": "^4.1.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

now run the following command and see the magic :) :

npm run electron-test

Step 5)

Well, the most fun part of using electron is access to node and chrome in our app, which we already don't! if you try to use regular libs of nodejs you will face with Angry errors of TSC telling you not finding definitions and such. even if you install @types/node modules in your project, TSC won't leave you alone. for this case simply use file-system modules which have most of the things you may need like file-system and many other ones you can fins on our lovely paradise npm

npm i file-system --save

and then, whenever you need to work with something like.... fs? you can do sth like:

import * as FileSys from 'file-system';

FileSys.mkdirSync('thel0ner','777',(error) => {
  console.log('found a error : ');
  console.log(error);
});

thank you for reading :)

yours..

@thel0ner