Refreshing jhipster page changes

[craigryan]

I can access the BrowserSync console (3001) for my vanilla jhipster running app.. i.e without alteration to gruntfile etc. I'm viewing the app on 3000. I then tried to make a few content changes to the original index.html and main.html just to see the browser update behaviour. The BS console shows activity, and the chrome tab for my app refreshed.

As the page partially loads I see the new text (eg changed 'this is your footer' to 'this is your footer, dude'). I briefly see the new footer text but then the pages fully refreshes with the old page content.

Tried C-F5, opening the app incognito, directly on 8080 etc - same result. Is this a simple fix? Some browser cache setup I need to apply? Would really appreciate some pointers, I'm hoping you guys are familiar with jhipster. Github won't allow attached gruntfile as a .txt so here it is:

// Generated on 2015-09-27 using generator-jhipster 2.19.0
'use strict';
var fs = require('fs');

var parseString = require('xml2js').parseString;
// Returns the second occurence of the version number
var parseVersionFromPomXml = function() {
var version;
var pomXml = fs.readFileSync('pom.xml', "utf8");
parseString(pomXml, function (err, result){
version = result.project.version[0];
});
return version;
};

// usemin custom step
var useminAutoprefixer = {
name: 'autoprefixer',
createConfig: function(context, block) {
if(block.src.length === 0) {
return {};
} else {
return require('grunt-usemin/lib/config/cssmin').createConfig(context, block) // Reuse cssmins createConfig
}
}
};

module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);

grunt.initConfig({
    yeoman: {
        // configurable paths
        app: require('./bower.json').appPath || 'app',
        dist: 'src/main/webapp/dist'
    },
    watch: {
        bower: {
            files: ['bower.json'],
            tasks: ['wiredep']
        },
        ngconstant: {
            files: ['Gruntfile.js', 'pom.xml'],
            tasks: ['ngconstant:dev']
        }
    },
    autoprefixer: {
        // src and dest is configured in a subtask called "generated" by usemin
    },
    wiredep: {
        app: {
            src: ['src/main/webapp/index.html'],
            exclude: [
                /angular-i18n/  // localizations are loaded dynamically
            ]
        },
        test: {
            src: 'src/test/javascript/karma.conf.js',
            exclude: [/angular-i18n/, /angular-scenario/],
            ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected javascripts
            devDependencies: true,
            fileTypes: {
                js: {
                    block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
                    detect: {
                        js: /'(.*\.js)'/gi
                    },
                    replace: {
                        js: '\'{{filePath}}\','
                    }
                }
            }
        }
    },
    browserSync: {
        dev: {
            bsFiles: {
                src : [
                    'src/main/webapp/**/*.html',
                    'src/main/webapp/**/*.json',
                    'src/main/webapp/assets/styles/**/*.css',
                    'src/main/webapp/scripts/**/*.js',
                    'src/main/webapp/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}',
                    'tmp/**/*.{css,js}'
                ]
            }
        },
        options: {
            watchTask: true,
            proxy: "localhost:8080"
        }
    },
    clean: {
        dist: {
            files: [{
                dot: true,
                src: [
                    '.tmp',
                    '<%= yeoman.dist %>/*',
                    '!<%= yeoman.dist %>/.git*'
                ]
            }]
        },
        server: '.tmp'
    },
    jshint: {
        options: {
            jshintrc: '.jshintrc'
        },
        all: [
            'Gruntfile.js',
            'src/main/webapp/scripts/app.js',
            'src/main/webapp/scripts/app/**/*.js',
            'src/main/webapp/scripts/components/**/*.js'
        ]
    },
    concat: {
        // src and dest is configured in a subtask called "generated" by usemin
    },
    uglifyjs: {
        // src and dest is configured in a subtask called "generated" by usemin
    },
    rev: {
        dist: {
            files: {
                src: [
                    '<%= yeoman.dist %>/scripts/**/*.js',
                    '<%= yeoman.dist %>/assets/styles/**/*.css',
                    '<%= yeoman.dist %>/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}',
                    '<%= yeoman.dist %>/assets/fonts/*'
                ]
            }
        }
    },
    useminPrepare: {
        html: 'src/main/webapp/**/*.html',
        options: {
            dest: '<%= yeoman.dist %>',
            flow: {
                html: {
                    steps: {
                        js: ['concat', 'uglifyjs'],
                        css: ['cssmin', useminAutoprefixer] // Let cssmin concat files so it corrects relative paths to fonts and images
                    },
                        post: {}
                    }
                }
        }
    },
    usemin: {
        html: ['<%= yeoman.dist %>/**/*.html'],
        css: ['<%= yeoman.dist %>/assets/styles/**/*.css'],
        js: ['<%= yeoman.dist %>/scripts/**/*.js'],
        options: {
            assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/assets/styles', '<%= yeoman.dist %>/assets/images', '<%= yeoman.dist %>/assets/fonts'],
            patterns: {
                js: [
                    [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
                ]
            },
            dirs: ['<%= yeoman.dist %>']
        }
    },
    imagemin: {
        dist: {
            files: [{
                expand: true,
                cwd: 'src/main/webapp/assets/images',
                src: '**/*.{jpg,jpeg}', // we don't optimize PNG files as it doesn't work on Linux. If you are not on Linux, feel free to use '**/*.{png,jpg,jpeg}'
                dest: '<%= yeoman.dist %>/assets/images'
            }]
        }
    },
    svgmin: {
        dist: {
            files: [{
                expand: true,
                cwd: 'src/main/webapp/assets/images',
                src: '**/*.svg',
                dest: '<%= yeoman.dist %>/assets/images'
            }]
        }
    },
    cssmin: {
        // src and dest is configured in a subtask called "generated" by usemin
    },
    ngtemplates:    {
        dist: {
            cwd: 'src/main/webapp',
            src: ['scripts/app/**/*.html', 'scripts/components/**/*.html',],
            dest: '.tmp/templates/templates.js',
            options: {
                module: 'storeApp',
                usemin: 'scripts/app.js',
                htmlmin: '<%= htmlmin.dist.options %>'
            }
        }
    },
    htmlmin: {
        dist: {
            options: {
                removeCommentsFromCDATA: true,
                // https://github.com/yeoman/grunt-usemin/issues/44
                collapseWhitespace: true,
                collapseBooleanAttributes: true,
                conservativeCollapse: true,
                removeAttributeQuotes: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                keepClosingSlash: true
            },
            files: [{
                expand: true,
                cwd: '<%= yeoman.dist %>',
                src: ['*.html'],
                dest: '<%= yeoman.dist %>'
            }]
        }
    },
    // Put files not handled in other tasks here
    copy: {
        fonts: {
            files: [{
                expand: true,
                dot: true,
                flatten: true,
                cwd: 'src/main/webapp',
                dest: '<%= yeoman.dist %>/assets/fonts',
                src: [
                  'bower_components/bootstrap/fonts/*.*'
                ]
            }]
        },
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: 'src/main/webapp',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.html',
                    'scripts/**/*.html',
                    'assets/images/**/*.{png,gif,webp,jpg,jpeg,svg}',
                    'assets/fonts/*'
                ]
            }, {
                expand: true,
                cwd: '.tmp/assets/images',
                dest: '<%= yeoman.dist %>/assets/images',
                src: [
                    'generated/*'
                ]
            }]
        },
        generateOpenshiftDirectory: {
                expand: true,
                dest: 'deploy/openshift',
                src: [
                    'pom.xml',
                    'src/main/**'
            ]
        }
    },
    karma: {
        unit: {
            configFile: 'src/test/javascript/karma.conf.js',
            singleRun: true
        }
    },
    ngAnnotate: {
        dist: {
            files: [{
                expand: true,
                cwd: '.tmp/concat/scripts',
                src: '*.js',
                dest: '.tmp/concat/scripts'
            }]
        }
    },
    buildcontrol: {
        options: {
            commit: true,
            push: false,
            connectCommits: false,
            message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
        },
        openshift: {
            options: {
                dir: 'deploy/openshift',
                remote: 'openshift',
                branch: 'master'
            }
        }
    },
    ngconstant: {
        options: {
            name: 'storeApp',
            deps: false,
            wrap: '"use strict";\n// DO NOT EDIT THIS FILE, EDIT THE GRUNT TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n{%= __ngModule %}'
        },
        dev: {
            options: {
                dest: 'src/main/webapp/scripts/app/app.constants.js'
            },
            constants: {
                ENV: 'dev',
                VERSION: parseVersionFromPomXml()
            }
        },
        prod: {
            options: {
                dest: '.tmp/scripts/app/app.constants.js'
            },
            constants: {
                ENV: 'prod',
                VERSION: parseVersionFromPomXml()
            }
        }
    }
});

grunt.registerTask('serve', [
    'clean:server',
    'wiredep',
    'ngconstant:dev',
    'browserSync',
    'watch'
]);

grunt.registerTask('server', function (target) {
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
    grunt.task.run([target ? ('serve:' + target) : 'serve']);
});

grunt.registerTask('test', [
    'clean:server',
    'wiredep:test',
    'ngconstant:dev',
    'karma'
]);

grunt.registerTask('build', [
    'clean:dist',
    'wiredep:app',
    'ngconstant:prod',
    'useminPrepare',
    'ngtemplates',
    'imagemin',
    'svgmin',
    'concat',
    'copy:fonts',
    'copy:dist',
    'ngAnnotate',
    'cssmin',
    'autoprefixer',
    'uglify',
    'rev',
    'usemin',
    'htmlmin'
]);

grunt.registerTask('appendSkipBower', 'Force skip of bower for Gradle', function () {

    if (!grunt.file.exists(filepath)) {
        // Assume this is a maven project
        return true;
    }

    var fileContent = grunt.file.read(filepath);
    var skipBowerIndex = fileContent.indexOf("skipBower=true");

    if (skipBowerIndex != -1) {
        return true;
    }

    grunt.file.write(filepath, fileContent + "\nskipBower=true\n");
});

grunt.registerTask('buildOpenshift', [
    'test',
    'build',
    'copy:generateOpenshiftDirectory',
]);

grunt.registerTask('deployOpenshift', [
    'test',
    'build',
    'copy:generateOpenshiftDirectory',
    'buildcontrol:openshift'
]);

grunt.registerTask('default', [
    'test',
    'build'
]);

};

[craigryan]

I've since tried as suggested here:

http://jhipster.github.io/development.html

under 'tips' with Chrome dev tools open I disable cache, tried reloading and also Reset All from BS console and still seeing the old cached versions.

[shakyShane]

@craigryan Can you try simply running window.location.reload(true) in your browser console and see if that even works?

[craigryan]

Shane, tried window.location.reload(true) and refreshes but with old content.
Even stranger - Network -> Response when I choose the main.html loaded shows the new content though the old is still displayed. Disable cache is definitely checked.

Checked Console finally, a few errors:

Opening Web Socket...
sockjs.js:1213 WebSocket connection to 'ws://localhost:3000/websocket/tracker/306/z22jhepa/websocket' failed: Connection closed before receiving a handshake response
sockjs.js:807 POST http://localhost:3000/websocket/tracker/306/e3klf5ma/xhr_streaming 403 (Forbidden)AbstractXHRObject._start @ sockjs.js:807(anonymous function) @ sockjs.js:834
sockjs.js:807 POST http://localhost:3000/websocket/tracker/306/fqcvjeat/xhr 403 (Forbidden)AbstractXHRObject._start @ sockjs.js:807(anonymous function) @ sockjs.js:834
stomp.min.js:8 Whoops! Lost connection to undefined