Trying out devcontainers in vscode

1 Devcontainers

STOPPED USING IT HERE (due to slowliness) - https://github.com/azegas/quotes/commit/9477b9062be2e9ac0aa2b7158cfdebabac6a4f54

1.1 Notes

1.1.1 Why devcontainers

Kind of nice to have this practice. People use it at work also. Linux environment… what could go wrong.

To run a project on windows, you need to install:

python
have virtual environments
install packages

Then to edit the code, you need to install vscode and it's packages:

linting
black

Then to run the program, you again need some packages

from the virtual environmnent
from the vscode

Dev containers allow us to have one Dockerfile in which we describe what the project needs. Then it also allows us to describe how the developer environment should look like, which VSCode packages should be installed for the developer that is opening this project and so on (jinja, pylance, w/e else).

1.2 The setup

1.2.1 How to set up devcontainers

Steps:

install `remote-development` extension in VsCode (contains devcontainers)
Have Docker running
have `.devcontainer` folder in your project
Re-open the project in the container with `re-open in container` command
check if the nice zsh terminal is included.

Keep in mind that you don't have to copy any files from one environment to the dev container, like you usually need with Docker images. With Devcontainers, the files are used from your local machine, but opened in a separate VsCode environment, with fresh plate, no extensions, nothing, only what you have specified.

1.2.2 .devcontainers folder

Create .devcontainers folder in your project's root directory.

1.2.3 Dockerfile

Inside of the .devcontainers folder, create a Dockerfile file with the content below:

# inspiration taken from here - https://github.com/devcontainers/images/blob/main/src/python/.devcontainer/Dockerfile

FROM mcr.microsoft.com/devcontainers/python:1-3.12

RUN apt-get update \
    && DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends \
        git \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# Install Python dependencies from requirements
COPY requirements.txt ./
RUN python3 -m pip install --upgrade pip \
    && pip3 install -r requirements.txt \
    && rm -rf requirements.txt

1.2.4 devcontainer.json

Alongisde the Dockerfile, create a `devcontainer.json` file with this content:

// inspiration from here - https://github.com/devcontainers/images/blob/main/src/python/.devcontainer/devcontainer.json

{
    "name": "Quotes Container",

    // Build configuration
    "build": {
        "dockerfile": "./Dockerfile",
        "context": "." // ".." would allows to reach files outside of the .dockerfile folder
    },

    // Features to be installed in the container
    "features": {
        "ghcr.io/devcontainers/features/common-utils:2":{
            "installZsh": "true",
            "username": "vscode",
            "userUid": "1000",
            "userGid": "1000",
            "upgradePackages": "true"
        },
        "ghcr.io/devcontainers/features/python:1": "none",
        "ghcr.io/devcontainers/features/node:1": "none",
        "ghcr.io/devcontainers/features/git:1": {
            "version": "latest",
            "ppa": "false"
        }
    },

  // Customizations for VS Code
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      // Add the IDs of extensions you want installed when the container is created.
      "extensions": [
        "ms-python.black-formatter",
        "VisualStudioExptTeam.vscodeintellicode",
        "ms-python.isort",
        "ms-python.pylint",
        "streetsidesoftware.code-spell-checker",
        "batisteo.vscode-django",
        "ms-azuretools.vscode-docker",
        "eamodio.gitlens",
        "yzhang.markdown-all-in-one",
        "GitHub.github-vscode-theme"
      ],
      // Set *default* container specific settings.json values on container create.
      "settings": {
        "workbench.sideBar.location": "right",
        "workbench.colorTheme": "GitHub Dark Default",
        "editor.minimap.enabled": false,
        "editor.smoothScrolling": true,
        "editor.formatOnType": true,
        "files.trimTrailingWhitespace": true,
        "python.defaultInterpreterPath": "/usr/local/bin/python",
        "python.formatting.provider":"black",
        "[python]": {
          "editor.formatOnSave": true
        },
        "emmet.includeLanguages": {
          "django-html": "html" // allow html tag completion in django html mode https://github.com/vscode-django/vscode-django/issues/125
        }
    }
  },
  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],

  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "python --version",

  // Set `remoteUser` to `root` to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
  "remoteUser": "vscode"
  }}