Tukukkk

I'm using Angular and Electron for my app.
I'm looking for a way to enable hot reload...
When I run my yarn run electron (scripts : "electron": "ng build --base-href ./ && electron ."), if I save a change, my app isn't reloading.
Here is my main.js file :

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

const path = require("path");

const url = require("url");



let win;



function createWindow() {

  win = new BrowserWindow({ width: 800, height: 600 });



  // load the dist folder from Angular

  win.loadURL(

    url.format({

      pathname: path.join(__dirname, `/dist/index.html`),

      protocol: "file:",

      slashes: true

    })

  );



  // The following is optional and will open the DevTools:

  // win.webContents.openDevTools()



  win.on("closed", () => {

    win = null;

  });

}



app.on("ready", createWindow);



// on macOS, closing the window doesn't quit the app

app.on("window-all-closed", () => {

  if (process.platform !== "darwin") {

    app.quit();

  }

});



// initialize the app's main window

app.on("activate", () => {

  if (win === null) {

    createWindow();

  }

});

I tried to include require('electron-reload')(__dirname); in the main.js file but nothing changed

electron-reload by default only reloads the WebContents of all open BrowserWindows when a file changes. If you want to restart Electron (i.e. if you want changes to the Electron main process file to reload the application), then what you're looking for is a "hard reset".

To do this you'll have to set the electron app path, like so:

require('electron-reload')(__dirname, {

    electron: path.join(__dirname, 'node_modules/.bin/electron.cmd')

});

The documentation says that the path should be to ./node_modules/.bin/electron, but I've only been able to get it to work using ./node_modules/.bin/electron.cmd. This is apparently an issue with Windows machines, and supposedly pointing to the executable works on MacOS. This may also be the case on Linux systems.

The following should be all the files you need for a boilerplate example:

_./main.js

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

const path = require('path')

const url = require('url')



require('electron-reload')(__dirname, {

    electron: path.join(__dirname, 'node_modules/.bin/electron.cmd')

});



let mainWindow = null



function main() {

    mainWindow = new BrowserWindow()



    mainWindow.loadURL(

        url.format({

            pathname: path.join(__dirname, '/dist/index.html'),

            protocol: 'file:',

            slashes: true

        })

    )



    mainWindow.on('closed', () => {

        mainWindow = null

    })

}



app.on('ready', main)



app.on('window-all-closed', () => {

    if (process.platform !== 'darwin') {

        app.quit()

    }

})



app.on('activate', () => {

    if (mainWindow === null)  {

        main()

    }

})

_./index.html

<h1>Hello World!</h1>

_{./package.json}

{

    "name": "electron-hot-reload-boilerplate",

    "version": "1.0.0",

    "description": "An Electron Boilerplate demonstrating hot reloading",

    "main": "main.js",

    "scripts": {

        "start": "electron ."

    },

    "repository": "https://github.com/link/to/your/repo",

    "keywords": ,

    "author": "You",

    "license": "CC-BY-SA-3.0",

    "dependencies": {

        "electron": "^3.0.9",

        "electron-reload": "^1.3.0"

    }

}

Install with:

> npm install

Run with:

> npm start

Isn't app.relaunch() the way to go to perform a "hard reset"?

app.relaunch([options])

• 
  options Object (optional)
  
  
  
  
  • 
    args String
  
  
  • 
    execPath String (optional)
  
  
  
  

Relaunches the app when current instance exits.

By default the new instance will use the same working directory and
command line arguments with current instance. When args is specified,
the args will be passed as command line arguments instead. When
execPath is specified, the execPath will be executed for relaunch
instead of current app.

Note that this method does not quit the app when executed, you have to
call app.quit or app.exit after calling app.relaunch to make the
app restart.

I found this : https://github.com/maximegris/angular-electron
It's an empty project template, using Electron and Angular.
Execute yarn start allow the hot reloading.
It's well written in the README.md !