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.

CodeManiak · Accepted Answer · 2015-06-06T21:29:45.893

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

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? — chrisber, May 28 '15 at 17:46
Ok, got it. The missing piece was to add `` 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. — chrisber, May 28 '15 at 21:53
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? — Mike M, Aug 09 '19 at 12:01

score 12 · Answer 2 · answered Jul 06 '15 at 15:01

12

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

answered Jul 06 '15 at 15:01

Alex Weber

2,186
2
19
27

score 3 · Answer 3 · answered Jan 15 '16 at 23:59

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>

score 1 · Answer 4 · answered Jun 16 '18 at 15:38

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)

score 1 · Answer 5 · answered Sep 08 '21 at 11:34

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)

Live reload for electron application

5 Answers5

Linked