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.

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

Answer 2

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

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>

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)

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)