Live reload for electron application

Question

I want to use a combination of VScode + Gulp + Electron to build an application. A nice feature of the development workflow would be to add an live reload task to my Gulp watch task, to reload the Electron application on every change.

Any Idea how to achieve this?

Your help is highly appreciated.

Gualtiero

Answer 1

I was able to achieve this with the gulp-livereload plugin. Here is the code to livereload CSS ONLY. It's the same for everything else though.

var gulp = require ('gulp'),
run = require('gulp-run'),
livereload = require('gulp-livereload'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
rimraf = require('gulp-rimraf');

var cssSources = [
  'app/components/css/main.css',
];

gulp.task('css', function(){
  gulp.src(cssSources)
  .pipe(concat('main.css'))
  .pipe(autoprefixer({browsers: ['last 2 versions', 'ie 10']}))
  .pipe(gulp.dest('app/public/styles'))
  .pipe(rename({suffix: '.min'}))
  .pipe(minifycss())
  .pipe(gulp.dest('app/public/styles'))
  .pipe(livereload());
})

gulp.task('watch', function(){
  livereload.listen();
  gulp.watch(cssSources, ['css'])
})

gulp.task('run', ['build'], function() {
  return run('electron .').exec();
});

gulp.task('default', ['watch', 'run']);

Livereload in a desktop application is awesome.

Make sure you add

<script src="http://localhost:35729/livereload.js"></script> 

to your index.html

Escapism

Thanks for your input. Did not not got it to work. The gulp live reload task is firing, but the electron app does not respond on it. Do I need to add something in addition? – Gualtiero

Ok, got it. The missing piece was to add <script src="http://localhost:35729/livereload.js"></script> tag. In addition no need to have the gulpfile.js in the directory which contains the electron app. If you are willing to add this information I will flag it as the solution. Thanks for your help. – Gualtiero

As of gulp 4.0, the tasks are not passed in array form but through the function gulp.series(); Being serial, it blocks on watch and never launches electron. Could you please modify your code to account for this? – Mispronounce

Answer 2

Even though this has already been answered/accepted, worth mentioning I've also managed to get it working with electron-connect

Entreat

Answer 3

There is also a way to do this using the gulp-webserver (The reason I ran across this post), and does not require the gulp-livereload. Ignore the react-generator which is a separate task that does my react transforms. Needless to say, this task starts the webserver, watches for changes, runs the generator, and then reloads on those changes.

var gulp    = require('gulp'),
electron    = require('electron-prebuilt'),
webserver   = require('gulp-webserver'),

  gulp.task(
  'run',
  ['react-generator'], // Secondary task, not needed for live-reloading
  function () {
    gulp.watch('./app/react/*.jsx', ['react-generator']);
    gulp.src('app')
      .pipe(webserver({
         port: 8123,
         fallback: "index.html",
         host: "localhost",
         livereload: {
           enable: true,
           filter: function(fileName) {
             if (fileName.match(/.map$/)) {
               return false;
             } else {
               return true;
             }
           }
         },
      }));
});

As noted in the previous answer, you will need to add the following to your index file, or it will act like it doesn't work for Electron, but does for browsers.

<script src="http://localhost:35729/livereload.js"></script>

Mistreat

Answer 4

Not specifically with Gulp, but there is an easy Electron plugin meant just for that (reloading an application after a change has been made): electron-reload

Just add the package:

$ npm install electron-reload --save-dev

And add the following line to the top of the /main.js file:

require('electron-reload')(__dirname)

Abell

Answer 5

The simplest way I've found is using electron-reloader, after installation, just paste the following code at the top of the app entry file (usually named main.js), and you're all set:

const { app } = require('electron')

app.isPackaged || require('electron-reloader')(module)

Lagunas