Hot Reloading for FastAPI Docker Debugger

[kasperschnack]

Hi there!

I really love being able to use the vs code debugger when running my containerized FastAPI app <3! It's super awesome!
However I cannot get hot reloading to work which would really make the whole thing complete IMO.

I've tried both setting --reload in Dockerfile and in tasks.json but it doesn't seem to work :/.

Am I doing it wrong or is it still not implemented?

Thanks!

[bwateratmsft]

Changing this over to a Discussion.

There's one important additional step required aside from adding --reload. By default, the Dockerfile will cause the app code to be copied into the container--modifying it on the source will not modify it in the container until the image is rebuilt. You can override this by adding the following to the docker-run task in tasks.json, in addition to the --reload argument:

"dockerRun": {
    "volumes": [
        {
            "containerPath": "/app",
            "localPath": "${workspaceFolder}"
        }
    ]
}

Here's my full tasks.json file:

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "docker-build",
            "label": "docker-build",
            "platform": "python",
            "dockerBuild": {
                "tag": "fastapi:latest",
                "dockerfile": "${workspaceFolder}/Dockerfile",
                "context": "${workspaceFolder}",
                "pull": true
            }
        },
        {
            "type": "docker-run",
            "label": "docker-run: debug",
            "dependsOn": [
                "docker-build"
            ],
            "python": {
                "args": [
                    "main:app",
                    "--reload", // This is added
                    "--host",
                    "0.0.0.0",
                    "--port",
                    "8000"
                ],
                "module": "uvicorn"
            },
            "dockerRun": { // This is added
                "volumes": [
                    {
                        "containerPath": "/app",
                        "localPath": "${workspaceFolder}"
                    }
                ]
            }
        }
    ]
}

I did notice that the browser launched to the app page before the app was completely ready, yielding an error page, but manually F5'ing to reload fixed it.

[kasperschnack]

This is so awesome!! Thank you 🙏

[kasperschnack]

Would it be possible to bring this into a docker-compose setting somehow?

[bwateratmsft]

It should be, yes. As part of adding Dockerfiles, we prompt if you additionally want to add compose files (if you already did this and need compose files, you can do "Docker: Add Docker Compose Files to Workspace..." in the command palette).

In the docker-compose.debug.yml compose file, you would need to add the volume mapping and --reload flag:

docker-compose.debug.yml

version: '3.4'

services:
  fastapi:
    image: fastapi
    build:
      context: .
      dockerfile: ./Dockerfile
    command: ["sh", "-c", "pip install debugpy -t /tmp && python /tmp/debugpy --wait-for-client --listen 0.0.0.0:5678 -m uvicorn main:app --reload --host 0.0.0.0 --port 8000"] # `--reload` added to this line
    ports:
      - 8000:8000
      - 5678:5678
    volumes: # This section is added
      - .:/app:ro

In addition, you'll need a "Python: Remote Attach" launch configuration:

launch.json

{
    "configurations": [
        {
            "name": "Python: Remote Attach", // This section is added
            "type": "python",
            "request": "attach",
            "connect": {
                "host": "localhost",
                "port": 5678
            },
            "pathMappings": [
                {
                    "localRoot": "${workspaceFolder}",
                    "remoteRoot": "."
                }
            ]
        },
        {
            "name": "Docker: Python - Fastapi",
            "type": "docker",
            "request": "launch",
            "preLaunchTask": "docker-run: debug",
            "python": {
                "pathMappings": [
                    {
                        "localRoot": "${workspaceFolder}",
                        "remoteRoot": "/app"
                    }
                ],
                "projectType": "fastapi"
            }
        }
    ]
}

The debugging process requires a few more steps in this setup.

1. Right click the docker-compose.debug.yml file, and do "Compose Up".
2. With the "Python: Remote Attach" launch configuration selected, hit F5.
3. The browser window won't be opened automatically. You can leave one open and just refresh, or easily reach it by going to the Docker explorer view, right-clicking the container, and doing "Open in Browser":
   
4. When you're finished debugging you can shut it down with "Compose Down" on the docker-compose.debug.yml file, or in the Docker explorer, right click the group heading (not the container) and do the same: