How to do live reloading / automatic page refresh in elm? - elm

Question

I'm trying to learn elm programing language from here. And it bugs me to manually do page refresh with every little change.
I see that elm-reactor doesn't support live realoading anymore. But what can i do unthil the next release?

Answer 1

I usually use elm-live.
It is very simple and easy to use if you are just compiling Elm to js.

Answer 2

Solved! - gulp magic saves the day!
(this solution works only with Chrome) Here is what I did - based on this: ( Thanks janiczek !! :))
Inside your root directory add a new file named gulpfile.js
Paste this content inside:
gulpfile.js:
evar gulp = require('gulp');
var elm = require('gulp-elm');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = ['*.elm']; // here you adjust the path according with your needs.
// For ex: 'scr/**/*.elm' - maps to every folder and file nested inside the src folder.
gulp.task('elm-init', elm.init);
gulp.task('elm', ['elm-init'], function(){
return gulp.src(path)
.pipe(plumber())
.pipe(elm())
.pipe(concat('elmapp.compiled.js'))
.pipe(gulp.dest('js'))
.pipe(livereload());
});
gulp.task('default',['watch']);
gulp.task('watch', function(){
livereload.listen();
gulp.watch(path,['elm']);
});
You must have gulp installed globally if not run:
npm install gulp -g
Install the gulp dependencies:
npm install gulp-elm gulp-concat gulp-plumber gulp-livereload
Install this extension: (chrome only)
run elm-reactor and open your page in Chrome.
From inside your terminal, at root directory (or wherever your gulpfile.js is) run: gulp
With the elm page tab open, Press LiveReload button on the Chorme Extension. like below and make sure it says:
You are good to go! :)
Elm compiler doesn't like .js files around, so you will still see 2 errors. Ignore them. For me , everything else works as expected.