How to convert angular 4 application to desktop application using electron?

Utilizing web technologies like JavaScript, HTML, and CSS, you can create cross-platform desktop applications using the popular framework Electron. This article will guide you through converting an Angular 4 application into a desktop application using Electron.

Prerequisites

Before starting, ensure you have:

• Node.js installed on your system

• An existing Angular 4 application (built and ready)

• Basic knowledge of Angular and Node.js

Setting Up Electron

Follow these steps to set up Electron for your Angular application:

Step 1: Install Electron

Navigate to your Angular project directory and install Electron as a development dependency:

npm install electron --save-dev

Step 2: Create Main Electron File

Create a main.js file in your project root directory. This file serves as the entry point for your Electron application:

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // Load the Angular app
  mainWindow.loadFile('dist/index.html');

  // Open DevTools in development
  // mainWindow.webContents.openDevTools();

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

Step 3: Update package.json

Add the main entry point and Electron start script to your package.json:

{
  "main": "main.js",
  "scripts": {
    "electron": "electron .",
    "electron-dev": "ng build && electron .",
    "electron-pack": "ng build --prod && electron ."
  }
}

Building and Running

Step 1: Build Angular Application

First, build your Angular application for production:

ng build --prod

Step 2: Start Electron Application

Run your desktop application:

npm run electron

Creating Executable Files

To distribute your application, install electron-builder for packaging:

npm install electron-builder --save-dev

Add build configuration to your package.json:

{
  "build": {
    "appId": "com.yourapp.desktop",
    "productName": "Your App Name",
    "directories": {
      "output": "release"
    },
    "files": [
      "dist/**/*",
      "main.js",
      "package.json"
    ],
    "mac": {
      "category": "public.app-category.productivity"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": "AppImage"
    }
  },
  "scripts": {
    "dist": "ng build --prod && electron-builder"
  }
}

Example Project Structure

Your project structure should look like this:

my-angular-electron-app/
??? src/                 (Angular source files)
??? dist/               (Built Angular app)
??? main.js             (Electron main process)
??? package.json        (Project configuration)
??? node_modules/       (Dependencies)

Key Considerations

• Security: Disable Node integration in production for security

• Performance: Electron apps have larger memory footprint than web apps

• Updates: Consider using electron-updater for automatic updates

• Native Features: Access system APIs like notifications, file system, etc.

Conclusion

Converting an Angular 4 application to a desktop application with Electron involves setting up the Electron framework, creating a main process file, and packaging the application. This approach enables you to leverage web technologies to create cross-platform desktop applications with native-like capabilities.