Framework: Cache busting with Aurelia

[smolinari]

Is there a way to cache bust the dist files and also replace smartly the calls to the files with the proper file names too? I've added gulp-rev to the build.js file, but it also breaks Aurelia, because the framework is looking for "app.js" and not "app-01123c47.js". How can I do cache busting properly with Aurelia?

Thanks for any help in advance.

Scott

[cristimusat]

I also tried gulp-rev with no success. From Aurelia docs I understood that app.js is a convention which can be overwritten but my problem was that views and model-views had different names.
Gulp-rev adds a different hash to the end of each file.
What I can see as a possible solution would be something like gulp-rev to add version number to the files. This I didn't found yet.

[Aaike]

Systemjs can be used for cache busting
it requires you to create an extension for systemjs , but an example is provided.

[smolinari]

Since I am a bit of a noob, would it be too much to ask for an example extension written for Aurelia? This must be something standard everyone needs to deploy changes, isn't it?

Scott

[Aaike]

@smolinari
change your index.html to add the extension right before you import the aurelia-bootstrapper

<script>
      var systemLocate = System.locate;
      System.locate = function(load) {
        var System = this;
        return Promise.resolve(systemLocate.call(this, load)).then(function(address) {
          if(address.lastIndexOf("html.js") > -1) return address;
          return address + System.cacheBust;
        });
      };
      System.cacheBust = '?bust=' + Date.now();

      System.import('aurelia-bootstrapper');
</script>

[cristimusat]

@smolinari
you need to add also

if(address.lastIndexOf("css.js") > -1) return address;

[smolinari]

Thanks for that and I obviously have a lot to learn, because this is what just happened to me.

https://www.youtube.com/watch?v=wCy8MpT45gk

Scott

[kristianmandrup]

Should be added to documentation somewhere ;)

[t3hmrman]

+1
Just ran into this -- modified app.html wasn't being picked up by Aurelia/SystemJS, which was causing lots of confusion for me. At first I thought it was Flask (which it partially was), and then I ran into this issue thread. Would be nice if I could turn caching off with an option somewhere.

For now I'll be copy-pasting @Aaike 's suggestion. Maybe it's my fault for not knowing enough about SystemJS, and not realizing SystemJS was doing the caching earlier, and realizing how "easy" it is to write an extension. But I kind of think it sucks that SystemJS is forcing me to dive into writing an extension just to get such basic dev-required functionality.

I'd expect to have to deal with/straighten up my caching/bundling strategy when I'm ready to deploy, not 5 mins into regular development.

[Aaike]

i'd like to note though that it's not SystemJS that is doing the caching, it is the browser. Every loader out there needs to implement an anti-cache strategy for this reason.

That said it would indeed be nice if this could be a simple configuration option in systemjs, you could ask for it to be added in their repo, however an issue for this has been opened in the past i think. I'm not sure what their thought is on making a simple option for it.

[t3hmrman]

Correct me if I'm wrong, but I was setting cache headers on my files (through Flask) -- I wasn't even seeing a request for app.html/app.js at all, which is what lead me to think that SystemJS was optimizing away the loads somewhere. That's what led me to think it was SystemJS and not just browser-level caching (which I should have been able to control with file-sent headers)

Just checked again -- with the busting enabled, I DO see a request for app.html (and lots of other things of course) where as before with only changing the cache headers, I didn't see the request at all

[VagyokC4]

@cristimusat @Aaike Why must you exclude files ending in 'html.js' and 'css.js' from cache busting?

https://github.com/aurelia/framework/issues/94#issuecomment-100272659
https://github.com/aurelia/framework/issues/94#issuecomment-100270135

[shaunluttin]

The following script renames the dist directory with the current version.

build/build-number.txt

build/tasks/cache-bust.js

var gulp = require('gulp');
var replace = require('gulp-replace');
var fs = require("fs");

var buildNumberFile = 'build/build-number.txt';

var filesToChange = [
    'build/bundles.js',
    'build/paths.js',
    'config.js',
    'package.json'
];

gulp.task('cache-bust', function () {

    // get the current build number
    var contents = fs.readFileSync(buildNumberFile, 'utf8');
    version = parseInt(contents);

    // bump the current build number
    version = version + 1;
    fs.writeFile(buildNumberFile, version);

    // 
    // matches "dist
    // matches 'dist
    // matches "dist1
    // matches 'dist12
    // 
    var outputDirectoryRegex = /([\"|\']dist)([0-9]*)/g;

    // replace the build number in appropriate files
    gulp.src(filesToChange, { base: './' })
        .pipe(replace(outputDirectoryRegex, '$1' + version))
        .pipe(gulp.dest('.'));
});

Usuage

gulp cache-bust
gulp bundle OR gulp build

[httpJunkie]

I like to put my cache busting js code into it's own file and then use SystemJs to bring it in:

    //Remove the follwoing line for production (use cacheBuster)
    //unComment the follwoing line for development(do not use cacheBuster)
    System.import("cacheBuster");

[manyrootsofallevil]

I tried @Aaike's suggestion but the application is now severely broken

In short this is the error i get:

Error loading http://localhost:49850/dist/app.html?bust=1491418021855!http://localhost:49850/jspm_packages/github/systemjs/[email protected]

The bundled application file has this

a("app.html!github:systemjs/[email protected]", ....

so perhaps unsurprisingly, it can't find it

Any ideas?

[manyrootsofallevil]

this seems to be working for me

 <script>
        var systemLocate = System.locate;
        System.locate = function (load) {
            var System = this;
            return Promise.resolve(systemLocate.call(this, load)).then(function (address) {
                if (address.lastIndexOf(".html") > -1) return address;
                if (address.lastIndexOf(".css") > -1) return address;


                return address + System.cacheBust;
            });
        };
        System.cacheBust = '?bust=' + Date.now();       
        System.import('aurelia-bootstrapper');
    </script>

Using ASP.NET Core

[jamesond]

@manyrootsofallevil I have implemented your solution awhile ago but I still am having some caching issues with my html files it seems. Are you still using the above code?