Skip to content

#33: Activate Auto-Reload for Flask in VS Code

The default launch configuration in VS Code for Flask is a great help. However, there is one little optimisation that massively improves your development experience.

Activate auto-reload

When you are writing your code, you make changes and want to see them in the browser. VS Code allows you to change your code while you run the debugger, but the default launch configuration requires you to stop and start the debugger before you can see your change. We can get rid of this extra step with 2 changes in the launch.json file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "hello.py",
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "1"
            },
            "args": [
                "run",
                "--no-debugger"
            ],
            "jinja": true
        }
    ]
}

On line 15 we activated FLASK_DEBUG by switching the value from 0 to 1. In the args dictionary we need to remove the option "--no-reload" (that is in the original launch.json file in line 20).

If we now make a change and save our file, Flask will detect the change and automatically restart the server:

1
2
3
 * Detected change in 'D:\\_Flask_Demo\\hello.py', reloading
 * Restarting with stat
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

All we need to do is to hit reload in our browser.

Conclusion

With this little change we can develop without constantly restarting the web server. This will help us a lot when we add more features to our application.