Today I wasted a whole bunch of hours struggling with caching at the front-end and backend of an application that I am developing — so I figured I would put what I ran into here to help other lost souls.

What I’m developing is an Aurelia based app, with a Flask backend.

After getting my Flask application set up to serve static files (which was surprisingly hard to discovery, mostly because flask prefers to have static files served from somewhere else, like NGINX), I was failing to see instant changes to my app.html as I would expect once gulp finished building.

After some digging, it came down to two things:

• Python level caching, controlled by app.config["SEND_FILE_MAX_AGE_DEFAULT"]
• SystemJS level caching, controlled by SystemJS config

To fix the python-level caching (obviously, you don’t want this value for production):

app.config["SEND_FILE_MAX_AGE_DEFAULT"] = 0 # or some sufficiently low value

The SystemJS caching issues were a little bit harder to find a solution for, as SystemJS/JSPM/Aurelia (that’s dependency order), don’t seem to have any documentation anywhere about it. I have no idea how others are making this work. I suspect they found the same github threads as I did:

Aurelia discussion on Cache Busting (most useful)

SystemJS discussion on Cache Busting (kind of useful, but seemingly unanswered yet closed)

To fix the SystemJS level caching issues, I borrowed code from the first link (reproduced here, it should go in your index.html):

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;
          if(address.lastIndexOf("css.js") > -1) return address;
          return address + System.cacheBust;
        });
      };
      System.cacheBust = '?bust=' + Date.now();

      System.import('aurelia-bootstrapper');

This code works by extending SystemJS to do the cache busting for you by inserting a DateTime.

A little disappointed at the dip in productivity from having to deal with this, but this will probably be a good lesson for the future, given that I’m actually quite excited about both JSPM (and by extension SystemJS) and Aurelia.