Electron dev environment with PM2

readme.md

Electron dev environment with PM2

Config for PM2 to automatically restart Electron on save. I'm using angular in examples. You can use any other framework.

Set up

Instal dependencies

• Install pm2 globally npm i -g pm2
• Install typescript and Node types as dev dependency npm i -D typescript @types/node

Setup typescript

Create tsconfig.electron.json file. In my case, I'm extending angular's tsconfig to preserve the feature set. Add entries:

{
    ...
   "compilerOptions": {
    "outDir": "./dist/electron",
    "target": "ES5",
    "module": "CommonJS"
  },
  "include": [
    "src/electron/**/*.d.ts",
    "src/electron/**/*.ts"
  ],
  "lib": [
    "ES2022"
  ],
  ...
}

Setup your framework

Set output directory to ./dist/{your_framework_name}

package.json

Put in scripts section new entries:

"scripts": {
    ...
    "start": "pm2 start watcher.config.js",
    "watch:electron": "npx tsc --project tsconfig.electron.json --watch",
    "watch:framework": "ng build --watch --configuration development",
    ...
  },

Angular used as an example.

The showrunners

Create folder runners. Put file runner.js inside. For each script create a file, with a name like example.runner.js. Put inside the startup script.

const Runner = require('./runner.js')

const runner = new Runner('script_you_want_to_launch') 
// For example: 
// const runner = new Runner('npm run watch:framework')
process.on('exit', () => runner.stop())

PM2 config file

Copy file watcher.config.js to your project root.

Start the show

Type in your terminal of love npm start And wait. It can restart a few times during compilation.

Logging

You can read logs by going to ~/.pm2/logs. I'm using Notepad++ to read them in watch mode.

Also, you can use it in the terminal with pm2 logs {id_of_process} or pm2 monit

Or in case you want to look total badass use pm2 monitor and view your logs with the cloud! (Use pm2-webui for an opensource alternative)

runner.js

'use strict'
const os = require('os');
const child = require('child_process');

module.exports = class Runner {

  isWin = os.platform() === 'win32'

  /**
   * Spawns new process runner
   *@param {string} script
   */
  constructor(script) {
    const command = (this.isWin ? '@' : '') + script
    const options = {
      shell: true,
    }
    if (this.isWin) Object.assign(options, {windowsHide: true})

    this.runner = child.spawn(command, [], options)
    this.runner.stdout.on('data', (data) => console.log(data.toString()))
    this.runner.stderr.on('data', (data) => console.error(data.toString()))
    this.runner.on("close", () => console.log('Closing Angular compiler'))
    this.runner.on('error', (err) => console.error('Failed to start subprocess.'))
  }

  /**
   * Stop and kill child process
   */
  stop() {
    this.runner.kill()
  }
}

tsconfig.electron.json

{
  "compilerOptions": {
    "outDir": "./dist/electron",
    "target": "ES5",
    "module": "CommonJS"
  },
  "include": [
    "src/electron/**/*.d.ts",
    "src/electron/**/*.ts"
  ],
  "lib": [
    "ES2022"
  ],
}

watcher.config.js

module.exports = {
  apps: [
    {
      name: "Electron auto launcher",
      script: "runners/electron.runner.js",
      watch: ["dist"],
      watch_delay: 3000,
      ignore_watch: ["node_modules", "\\.git", "*.log"],
      time: true,
    },
    {
      name: "Framework compiler",
      time: true,
      watch: false,
      script: "runners/framework.runner.js",
    },
    {
      name: "Electron compiler",
      time: true,
      watch: false,
      script: "runners/electron-compiler.runner.js",
    },
  ],
};