Getting Livereload + Flask to trigger hard refresh

Question

After exposure to Svelte/Rollup in the JavaScript world I was impressed that it could refresh the browser automatically when changes were made to the source code. Seeking a similar behaviour in Python I found the package livereload that supports integration with Flask (pretty sure using the same tech). I want the result of the refresh to reflect ALL changes to the source code.

I am using WSL with livereload v2.5.1 and viewing via Chrome. I can successfully get the page to refresh on a detected source code change but the refresh doesn't re-download the new files and just displays the cached files. The page does refresh but I need to hit Ctrl + click refresh to see the actual changes. Using developer mode and turning off caching works as desired. Using Svelte/Rollup doesn't require disabling caching to see source changes.

Most of my changes are to *.css or *.js files served from the 'static' folder in a standard Flask project template and rendered using the 'render_template' function of Flask.

I'm launching my Flask server as follows:

app = create_app()
app.debug = True
app.config['TEMPLATES_AUTO_RELOAD'] = True

server = Server(app.wsgi_app)
server.watch(filepath='static/*', ignore=lambda *_: False)
server.serve(liveport=35729, host='127.0.0.1', port=80)

I would like to not have to disable the cache so that the refresh triggered by livereload actually reflects the changes in the source. Is there a setting in Flask or livereload I can use to achieve this or is this a feature request for the livereload package?

Related Question:

How to automate browser refresh when developing an Flask app with Python?

UPDATE EDIT: Further testing has shown that this is specifically an issue with Chrome, with Firefox it works as expected out of the box. Digging into the underlying livereload.js library it seems there is a parameter of 'isChromeExtension' which I have tried to force set to True but had no effect.

score 0 · Answer 1 · answered Aug 08 '20 at 01:30

I came across the same issue and here is what I did to solve the issue. As you mentioned this is a browser caching problem. So we want invalidate the cached css/js files. We can achieve this by setting a version on the static file. We want the version to change each time you make changes to the css file. What I did feels a bit hacky but you'll get the idea.

Here is what I have for my html template

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <link href="{{ url_for('static', filename='main.css', version=time)}}" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1 class="hello-color">
    {{ message }}
  </h1>
</body>

</html>

You can see version=time I am passing the template the current time with the following.

from flask import Flask, render_template
from time import time
app = Flask(__name__)


@app.route("/")
def hello():
    return render_template('hello.html', message="Hello World!", time=time())

from time import time and time=time()

And finally my main python file

from app import app

from livereload import Server

if __name__ == '__main__':
    server = Server(app.wsgi_app)
    server.serve(port=2200, host='0.0.0.0')

Hopefully this helps you or anyone else running to this issue.

Getting Livereload + Flask to trigger hard refresh

1 Answers1