0

I have just started learning how to build small Web apps with Python and Flask but am having some issues with the workflow. The way I am currently developing is:

  1. Make a change to the app (HTML, CSS, JS, Python Flask code etc)
  2. Stop the server
  3. Clear the browser cache to remove the old static assets
  4. Start the server
  5. Reload my app in the browser

This is becoming a complete chore. I have come from developing with Node/Express and React where I have been using nodemon (https://www.npmjs.com/package/nodemon) to monitor any application changes. The server restarts automatically as soon as you save your app, with any changes detected immediately being reflected in the browser.

Is there something like this for Flask?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
PumpkinBreath
  • 831
  • 1
  • 9
  • 22
  • Have you tried enabling Flask's own reload and debugging, per https://flask.palletsprojects.com/en/1.1.x/api/#flask.cli.run_command – jonrsharpe Dec 29 '20 at 10:20
  • Hi Jon. Thanks that works great for Python code and HTML, but not for CSS changes. Do you have any advice on how to reload css files with changes in? – PumpkinBreath Dec 29 '20 at 10:21
  • well before running your flask app using **flask run** export the flask env as development **export FLASK_ENV=development** which will restart your app automatically when it detects the change in your app(app.py or \ __ init \__.py)file depending on your naming convention. not sure but this probably doesn't clear your cache and something you have to look into. – Azaria Gebremichael Dec 29 '20 at 10:26
  • Hi Azaria, yeah its the cache that is causing a lot of the headaches. I haven't experienced this problem with JS frameworks. I'll look around more to find a solution. Thanks – PumpkinBreath Dec 29 '20 at 10:29
  • If working with static assets you may wish to set `app.config['SEND_FILE_MAX_AGE_DEFAULT'] = -1` in your dev config, to prevent having to clear the browser cache after each change. You'll probably need to clear the cache one more time once set. – v25 Dec 29 '20 at 11:48
  • Depending on how your app works you could also look into *cache busting*, including a hash of the file content as part of the file name. That way when the index file is reloaded, any CSS (or JS or whatever) files that have changed have new names so don't hit the cache. – jonrsharpe Dec 29 '20 at 12:24

1 Answers1

1

From the answers given in the comments above, the solution is to run the Flask development server using the Flask CLI like so:

export FLASK_ENV=development
flask run

This runs the Flask reloader so changes to the Flask application and any HTML are updated when the page reloads.

To fix the problem of the browser caching css files which have to be cleared to see any changes, I referred to this Flask css not updating SO question and the comment by @Aylen.

Simply reload the Web page for your app using

Ctrl+shift+R

This reloads the page and clears the cache at the same time.

PumpkinBreath
  • 831
  • 1
  • 9
  • 22