Gulp livereload with django-gulp and Docker

[rkpatel33]

I'm having a little trouble getting gulp-livereload to work with gulp and django-gulp in of a Docker container. I can get my gulp tasks working with django-gulp and can see my files being recompiled, but the browser does not trigger a refresh.

I know it's possible to get it set up this way bc I've seen it done (I just can't ask the person anymore). Does anyone have any suggestions? I am not clear on how livereload works under the hood and haven't been able to get a clear answer on it. Thanks in advance.

My setup is as follows:

• I have a Docker image running my Django server usign the following command:

COMPOSE_HTTP_TIMEOUT=360000 docker-compose run --rm web

where web is the docker service defined in this docker-compose file (other services are excluded). The docker-machine VM running the container has IP = 192.168.99.100.

version: '2'
services:
    web:
        # Location of Dockerfile
        build: .
        # Default command to run on docker-compose up
        command: python manage.py runserver 0.0.0.0:8000
        # See timeout issue, used in line time out command in docker/up.sh (https://github.com/docker/compose/issues/3750)
        tty: true
        hostname: web
        env_file: environment.env
        # Volume to mount from [host]:[container]
        extra_hosts:
            - "mac_host_ip:10.0.2.2"
        # Set alias for IP of the host computer (OSX), called a loopback address
        volumes:
            - $ALBERT_ROOT:/albert
            - $ALBERT_ROOT/node_modules_docker:/albert/node_modules
        ports:
            - "8000:8000"
            - "8001:8001"
            - "8002:8002"
            - "8003:8003"
            - "35729:35729"
            - "9999:9999"
        depends_on:
            - rabbitmq
            - celery_worker

...

(other services)

I also have django-gulp installed and the gulp.js file watching my sass and html template files:

var gulp = require('gulp');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');

// Source and destinaton paths
var paths = {
  sass: ['./lyfe/static/css/sass/**/.scss'],
  css: './lyfe/static/css/',
  html: './web/templates/reporting/**/*.html'
};


// HTML watch (do nothing really but pipe to livereload)
gulp.task('html:watch', function() {
    gulp.src(paths.html)
        .pipe(livereload());
});

// Sass compilation task
gulp.task('styles:compile', function() {
    gulp.src(paths.sass)
        // .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        // .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.css))
        .pipe(livereload());
});

// Watch task (with subtasks to run on livereload)
gulp.task('watch', function() {
    livereload.listen({
        host: '0.0.0.0',
        port: 8003
        // port: 35729
    });
    gulp.watch(paths.sass, ['styles:compile']);
    gulp.watch(paths.html, ['html:watch']);
});

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