Run Flask/Dash App with VSCode Debugger not working

Question

When I run my Dash app from the command line using

export PYTHONPATH=./src/ && python ./src/pdv/app.py

it runs properly, however, when I try to run it with the debugger (using the following configuration in my launch.json

       {
           "name": "Python: Current File",
           "type": "python",
           "request": "launch",
           "program": "${file}",
           "console": "integratedTerminal",
           "env": { "PYTHONPATH": "${workspaceRoot}/src/"}
        },

I get the following error:

Dash is running on http://127.0.0.1:8050/

 * Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
No module named app

Any ideas what's wrong with my debug configuration?

Answer 1

The file you are referring to is the launch.json, if the content of that file is contained within the settings.json file it cannot work.

I leave you an example of how the settings.json and launch.json files should be configured to debug a python application in visual studio code:

settings.json

{
    "python.defaultInterpreterPath": "<YOUR_PYTHON_EXE_IN_VIRTUALENV_PATH>",
    "python.analysis.extraPaths": [
        "src"
    ]
}

launch.json

{
    "version": "0.2.0",
    "configurations" : [
        {
            "name": "local",
            "type": "python",
            "stopOnEntry": false,
            "request": "launch",
            "program": "${workspaceFolder}/src/app.py",
            "console": "integratedTerminal",
            "justMyCode": false,
            "cwd": "${workspaceFolder}/src"
        }
    ]
}

At the following link you can find the documentation on how to set the debugger in visual studio code for a flask application

Answer 2

the code snippet in your article should belong to launch.json, paste it into setting.json will cause this error.You could create a new launch.json in the debug tab.

Answer 3

For anyone with same issue, I ended up just using the native Flask server instead of the Dash wrapper, by adding the following to my launch.json

        {
            "name": "Debug pdv plots",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "PYTHONPATH": "${workspaceRoot}/src/",
                "FLASK_APP": "${workspaceRoot}/src/pdv/app",
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "1"
            },
            "args": [
                "run",
            ],
        }