Live reload for an electron application


#1

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.


#2

I am not sure of a livereload way to do this, but I achieve a similar beahaviour by listening on keydown even of document and if it’s an F5, or CTRL + ALT + R, then do location.reload()


#3

Thanks for your answer, in addition I found a nicer solution to do it. Please have a look at this post and also the comments.


  1. https://github.com/vohof/gulp-livereload

<!-- gulp.js-->
var gulp = require('gulp');
var run = require('gulp-run');
var livereload = require('gulp-livereload');

gulp.task('copy-html', function() {
    gulp.src('src/**/*.html')
    // Perform minification tasks, etc here
    .pipe(gulp.dest('dist/'))
    .pipe(livereload());
});

gulp.task('run', function() {
  return run('../dep/electron dist/ ').exec();
});

gulp.task('watch', function () {
    livereload.listen();
    gulp.watch('src/**/*.html',['copy-html']);
});

gulp.task('default', ['watch', 'run']);
<!-- index.html -->
<html>
  <head>
    <title>Angular 2 Quickstart</title>
  </head>
  <body> 
    <script src="http://localhost:35729/livereload.js"></script>
  </body>
</html>

#4

Thanks for sharing! Please fix the typo in

gulp.watch('src/**/*.*',['copy-html']);

and maybe a cleaner matching to src/**/*.html


#5

thanks, its done.


#6

electron-connect works like a charm: https://github.com/Quramy/electron-connect

It provides the following features:

  • start(and restart) Electron process in your Node.js script
  • reload renderer process in your Node.js script