Getting Started with Electron in Angular 5

Getting Started with Electron in Angular 5: Electron helps you to build Desktop applications, this does not mean that you have to code in different languages and learn more about electron. Whatever coding you are doing in angular(Electron uses web pages as its GUI) that is enough.

Using Electron in the Angular 5

All we need is one file to launch our desktop application and make our project compatible with electron. This will be called main.js. We will add it to the root of the project directory.

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

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800, 
    height: 600,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/assets/img/logo.png`
  })


  win.loadURL(`file://${__dirname}/dist/index.html`)
  //win.openDevTools();
  win.setMenu(null);

  //// 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()
  }
})

As you can see in the code function createWindow creates the window of our application with specified given properties like height, width icon(logo of our window).

win.loadURL loads all the built files into the window after launching the Electron app.

Getting Started with Electron in Angular 5

To make it work we need to install electron globally

Install Electron Globally

npm install -g electron

Update your package.json file with the following code

I am just putting part of the package.json here

{
  "name": "Electron-App",
  "version": "1.0.0",
  "license": "MIT",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build --prod && electron ."
    },
  },

As you can see we included main telling it to use main.js file(This is the entry point and launching of our application when we run electron)

Build and Run Electron

In the above package.json in the scripts we created 2 CLI commands which helps us to launch our electron App.
If you do

npm run electron .

It will simply launch your electron application without building your project.

If you do

npm run electron-build

First it will build your entire project then launches your electron application.

That’s it you are now good to go with electron

Happy Coding!