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

Question

I’ve started learning Flask to develop web applications. What I am realy missing is an automatic Browser refresh after any code change (including static files, templates, etc.). This seems to be a standard feature in almost any Javascript framework. Frontend people have several terms for that: auto reload / refresh, hot reload / refresh (hotreload), live reload / refresh (livereload), …

Here on Stackoverflow most similar questions are related to the auto-reload of the Flask server (–> https://stackoverflow.com/search?q=flask+auto+reload).

J just want a simple browser refresh.

I googled and tried several things – with no luck:

How can I have a smooth developing experience with Flask without having to hit the F5 key 1000 times a day in a browser just to see the results of my changes?

I think the answer is somewhere near to python-livereload from the link above.
So I guess an alternative title of my question could be:

Does somebody have a working example of Flask + python-livereload?

I am to dumb to get it from their documentation 🙂

EDIT: for the sake of completenes here is the Flask app I am using.

# filename: main.py

from flask import Flask, render_template
from livereload import Server



app = Flask(__name__)

@app.route('/')
def index():
    return "INDEX"

@app.route('/bart')
def use_jinja():
    return render_template('basic.html')



if __name__ == '__main__':
    server = Server(app.wsgi_app)
    server.serve(port=5555)

I start the app with

python main.py

Asked By: Wlad

||

Source

Answer 1

This is an interesting question you’ve raised so I built a quick and dirty Flask application which utilizes the livereload library. Listed below are the key steps for getting this to work:

Download and install the livereload library:

pip install livereload
Within your main file which starts up your flask application, run.py in my particular case, wrap the flask application with the Server class provided by livereload.

For example, my run.py file looks like the following:

from app import app
from livereload import Server

if __name__ == '__main__':
    server = Server(app.wsgi_app)
    server.serve()

Start your server again:

python run.py
Navigate to localhost in the browser and your code changes will be auto-refreshed. For me I took the default port of 5500 provided by livereload so my url looks like the following: http://localhost:5500/.

With those steps you should now be able to take advantage of auto-reloads for your python development, similar to what webpack provides for most frontend frameworks.

For completeness the codebase can be found here

Hopefully that helps!

Answered By: Nathan

Answer 2

If on Windows:

set FLASK_ENV=development

Answered By: Alex Pop

Answer 3

I use Guard::LiveReload becose solution with python-livereload don’t work correct with debug (for me).

In first terminal emulator:

$ cd my-flask-project
$ flask run
 * Serving Flask app 'webface' (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:54321/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!

In secondu terminal emulator:

$ cd my-flask-project
$ guard init livereload

Now I edit Guardfile and add/edit watch. Like this:

  watch(%r{.+.py})
  watch(%r{webface/.+.(css|js|html(.j2)?)})

again in second terminal emulator:

$ guard
17:29:25 - INFO - LiveReload is waiting for a browser to connect.
17:29:25 - INFO - Guard is now watching at '/home/marek/my-flask-project'
[1] guard(main)> 17:29:29 - INFO - Browser connected.
17:29:31 - INFO - Reloading browser: webface/templates/base.html.j2
17:45:41 - INFO - Reloading browser: webface/templates/base.html.j2
[1] guard(main)>

Maybe need to click livereload extention button in browser to connect browser to guard.

Answered By: MarrekNožka

Answer 4

Tried this today, and it worked:

app.py:

# use livereload==2.5.1 only
from flask import Flask, render_template
from livereload import Server

app = Flask(__name__)
app.debug = True

@app.get("/")
def index():
    return render_template("index.html")

# don't use flask run, use python3 app.py
server = Server(app.wsgi_app)
server.watch("templates/*.*")  # or what have you
server.serve(port=5000) # if you want the standard Flask port

in templates/index.html, add the following script before </body>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/livereload-js/3.1.0/livereload.min.js"></script>

Then:

python app.py

Answered By: Neil McGuigan

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

Question:

Answers: