Skip to content

VS Code with devcontainers


VS Code with Devcontainers is the recommended development setup


You must build the base Docker image benefits_client:latest before running the devcontainer. See Local Setup

Install the Remote - Containers extension

VS Code can be used together with Docker via the Remote - Containers extension to enable a container-based development environment. This repository includes a .devcontainer.json file that configures remote container development and debugging.

Open the repository with VS Code

With the Remote - Containers extension enabled, open the folder containing this repository inside Visual Studio Code.

You should receive a prompt in the Visual Studio Code window; click Reopen in Container to run the development environment inside a container.

If you do not receive a prompt, or when you feel like starting from a fresh environment:

  1. Ctrl/Cmd + Shift + P to bring up the command palette in Visual Studio Code
  2. Type Remote-Containers to filter the commands
  3. Select Rebuild and Reopen in Container to completely rebuild the devcontainer
  4. Select Reopen in Container to reopen the most recent devcontainer build

Attach a debugger

Once running inside a container, press F5 to attach a debugger to the client, running on http://localhost at a port dynamically assigned by Docker. See Docker dynamic ports for more information.

Add breakpoints in the code and browse the local site to trigger a pause. Press F5 to continue execution from the breakpoint.

Changing launch configuration

By default, the application is launched with DJANGO_DEBUG=True, causing Django to provide additional logging and error output and to relax certain security settings.

Alternatively, you may attach to an instance launched with DJANGO_DEBUG=False, to allow debugging the app in a state more similar to production.

In VS Code, press Ctrl/Cmd + Shift + D to open the Run and Debug pane, where you can select between the various configurations (disregard the duplicate entry, selecting either will work):

Screenshot of the VSCode Run and Debug pane, showing selection of the launch configuration

The environment can also be overridden for the debug session by editing the configuration in .vscode/launch.json, where any of the supported environment variables may be specified in the env block. For example, to test the app with reCAPTCHA environment variables:

    "name": "Django: Benefits Client",
    "type": "python",
    "request": "launch",
    "program": "${workspaceFolder}/",
    "args": ["runserver", "--insecure", ""],
    "django": true,
    "env": {
        // existing field...
        "DJANGO_DEBUG": "true",
        // add these 2 entries with the values for reCAPTCHA

See #1071 for more examples and context.

Exiting devcontainers

To close out of the container and re-open the directory locally in Visual Studio Code:

  1. Ctrl/Cmd + Shift + P to bring up the command palette in Visual Studio Code
  2. Type Remote-Containers to filter the commands
  3. Select Reopen Locally