@lyrod/electron-angular-cli v1.3.2

CLI for electron and @angular/cli

A solution to package a ready for distribution Electron app built with @angular/cli and in TypeScript as a monorepo. Currently supports Windows (.exe, nsis), MacOS (.app, .dmg), Linux (.deb, .rpm), Archives (.zip, .7z, .tar.gz), more platforms will follows.

Installation

yarn add --dev @lyrod/electron-angular-cli

If you want to create a new project using the cli

yarn global add @lyrod/electron-angular-cli
electron-angular-cli create my-app # will create a my-app directory

Setup

A complete example repo will come later.

1. Specify the electron-angular-cli configuration in the package.json as follows:

   {
     "electron-angular-cli": {
       "config": {
         "directories": {
           "angularApp": "./packages/angular",
           "electronApp": "./packages/electron",
           "resources": "./out/resources",
           "make": "./out/make/installer",
           "packaged": "./out/make/package"
         },
         "assets": {
           "./packages/electron/package.json": "./package.json",
           "./yarn.lock": "./yarn.lock"
         },
         "win32": {
           "icon": "./packages/electron/app.ico",
           "requestedExecutionLevel": "requireAdministrator"
         },
         "linux": {
           "icon": "./packages/electron/app.png"
         },
         "mac": {
           "icon": "./packages/electron/app.icns",
           "darkMode": false,
           "minimumSystemVersion": "10.9",
           "dmg": {
             "background": "",
             "backgroundColor": "#fff",
             "icon": "./packages/electron/app.icns",
             "iconSize": 80,
             "iconTextSize": 12,
             "title": "My App"
           },
           "identity": false
         },
         "guid": "com.mycompany.my-app",
         "appId": "com.mycompany.my-app",
         "productName": "My App"
       }
     }
   }

2. Create a .ico/.icns file as your app icon.

3. Add the scripts key to the monorepo package.json:

   {
     "scripts": {
       "package": "electron-angular-cli package"
     }
   }

4. Add the scripts key to your electron's package.json:

   {
     "scripts": {
       "build": "tsc"
     }
   }

Commands

electron-angular-cli --help

Package the application

Usage

electron-angular-cli package --help

--no-clean: Removes the clean process where output folders is cleaned before build

--no-package: Removes the package process into a electron package

--no-build: Removes the build process

--make: Activate the installer process

--platform: Specify the platform to package (linux, win32 or darwin). Default current platform.

--target: Specify the target to build (dmg, nsis, deb, rpm, 7z, zip, tar.gz).

--arch: Specify the arch (x64 or ia32).

Configuration

directories

angularApp, string: path relative to your monorepo package.json where the @angular/cli project is located

electronApp, string: path relative to your monorepo package.json where your electron app is located

resources, string: output path of the build process

make, string: output path of the installer

packaged, string: output path of the electron package

assets

key-value object containing all files that needs to be added into the output resources folder.

The key, string must be the path of the file relative to your monorepo package.json.

The value, string must be the path where the file will go, relative to the output resources folder.

win32

icon, string: Path, relative to your monorepo package.json, of your .ico file

requestedExecutionLevel, 'requireAdministrator' | 'asInvoker' | 'highestAvailable', optional: .exe required elevation.

guid, string - appId, string

The application id. Used as Application User Model ID for Windows.

productName, string

The name of the app. Will be used to name the executable file

Example: "productName": "My App" will produces My App.exe

linux

icon, string: Path, relative to your monorepo package.json, or your .png file

mac

icon, string: path to the .app icon relative to package.json monorepo

darkMode, boolean: if your app supports mojave's dark mode

minimumSystemVersion, string: Minimum MacOSX version

identity, false | string: false to disable signing process, string KeyChain Developer ID Application: Identity name

mac.dmg

background, string: Path of .png relative to package.json monorepo. Don't use it with backgroundColor

backgroundColor, string: CSS color of the dmg. Don't use it with background

icon, string: path to the .dmg icon relative to package.json monorepo

iconSize, number: Size of all the icons inside the dmg

iconTextSize, number: Size of all the icon texts inside the dmg

title, string: The title of the produced dmg, which will be shown when mounted (volume name).