Creating a Web IDE for a Python Project with Docker and Docker Compose

Philippe CharrièrePhilippe Charrière
7 min read

Table of contents

I love doing everything in Docker containers, for many reasons, but especially for the portability and reproducibility of my development environments (and it's so convenient for quick experimentation).

In this guide, I'll show you how to manually initialize a workspace for a Python project (you can easily adapt it to other languages) with a web IDE based on OpenVSCode Server, using Docker and Docker Compose.

Step 1: Create the directory structure

mkdir -p all-my-web-ides/demo-python-ide/workspace

  • all-my-web-ides is the folder where I'll create my projects.

  • demo-python-ide is the name of the web IDE project I'll create (meaning: you can create multiple).

  • workspace is the folder that serves as the main workspace where all your development projects and files will be stored.

Step 2: Create the .bashrc file

The .bashrc file is used to configure the shell environment for the workspace. It allows you to define environment variables and customize the command prompt.

Create the file all-my-web-ides/demo-python-ide/workspace/.bashrc with the following content:

cat > "all-my-web-ides/demo-python-ide/workspace/.bashrc" << 'EOF'
sudo chmod 666 /var/run/docker.sock

parse_git_branch() {
    git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}

# Prompt with color and git branch
export PS1='\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[01;31m\]$(parse_git_branch)\[\033[00m\]\$ '
EOF

Step 3: Define environment variables for Git & GitHub support

Define the environment variables directly in the shell:

export SSH_PUBLIC_KEY="$(cat $HOME/.ssh/github_perso.pub)"
export SSH_PRIVATE_KEY="$(cat $HOME/.ssh/github_perso | base64 -w 0)"
export GIT_USER_EMAIL="your.name@gmail.com"
export GIT_USER_NAME="@k33g"
export GIT_HOST="github.com"

To find the name of your SSH key, you can execute the command ls $HOME/.ssh to list the existing key files in the .ssh directory.

Step 4: Create the keys directory

We'll create a directory to store SSH keys and Git configuration. This directory will contain private and public keys, as well as SSH configuration.

mkdir -p all-my-web-ides/demo-python-ide/keys

Step 5: Configure Git

5.1 Create the .gitconfig file

The .gitconfig file is used to configure Git settings for the workspace. It allows you to define the email and username, as well as other configuration options.

echo "[user]" > all-my-web-ides/demo-python-ide/workspace/.gitconfig
echo "    email = $GIT_USER_EMAIL" >> all-my-web-ides/demo-python-ide/workspace/.gitconfig
echo "    name = $GIT_USER_NAME" >> all-my-web-ides/demo-python-ide/workspace/.gitconfig
echo "[safe]" >> all-my-web-ides/demo-python-ide/workspace/.gitconfig
echo "[http]" >> all-my-web-ides/demo-python-ide/workspace/.gitconfig
echo "    postBuffer = 524288000" >> all-my-web-ides/demo-python-ide/workspace/.gitconfig
echo "    lowSpeedLimit = 1000" >> all-my-web-ides/demo-python-ide/workspace/.gitconfig
echo "    lowSpeedTime = 300" >> all-my-web-ides/demo-python-ide/workspace/.gitconfig
echo "[init]" >> all-my-web-ides/demo-python-ide/workspace/.gitconfig
echo "    defaultBranch = main" >> all-my-web-ides/demo-python-ide/workspace/.gitconfig

chmod 644 all-my-web-ides/demo-python-ide/workspace/.gitconfig

5.2 Create SSH configuration

echo "Host $GIT_HOST" > all-my-web-ides/demo-python-ide/keys/config
echo "    HostName $GIT_HOST" >> all-my-web-ides/demo-python-ide/keys/config
echo "    User git" >> all-my-web-ides/demo-python-ide/keys/config
echo "    IdentityFile ~/.ssh/git_repository_key" >> all-my-web-ides/demo-python-ide/keys/config
echo "    StrictHostKeyChecking no" >> all-my-web-ides/demo-python-ide/keys/config

chmod 600 all-my-web-ides/demo-python-ide/keys/config

5.3 Copy SSH keys

# Copy the public key
echo $SSH_PUBLIC_KEY > all-my-web-ides/demo-python-ide/keys/git_repository_key.pub

# Copy the private key (base64 decoding)
echo $SSH_PRIVATE_KEY | base64 -d > all-my-web-ides/demo-python-ide/keys/git_repository_key
chmod 600 all-my-web-ides/demo-python-ide/keys/git_repository_key

Step 6: Initialize a development project

mkdir -p all-my-web-ides/demo-python-ide/workspace/hello-world

Final structure

After all these steps, you should have the following structure:

.
├── all-my-web-ides
│   └── demo-python-ide
│       ├── compose.yml
│       ├── Dockerfile
│       ├── keys
│       │   ├── config
│       │   ├── git_repository_key
│       │   └── git_repository_key.pub
│       └── workspace
│           └── hello-world

Step 7: Dockerfile and Compose file

Dockerfile

This Dockerfile will create a web IDE development environment based on OpenVSCode Server with:

  • Base: gitpod/openvscode-server image

  • Tools: SSH, Git, curl, ...

  • Python 3.9: Complete installation with pip and virtual environments

  • Docker: Integrated Docker client for containerized development

  • Permissions: User configuration for Docker access

The container will allow you to develop in Python with VS Code in your browser, while having access to Docker from inside the container.

In all-my-web-ides/demo-python-ide, create a Dockerfile with the following content:

FROM --platform=$BUILDPLATFORM gitpod/openvscode-server:latest

LABEL maintainer="@k33g_org"

ARG TARGETOS
ARG TARGETARCH

ARG USER_NAME=openvscode-server

USER root

# ------------------------------------
# Install Tools
# ------------------------------------
RUN <<EOF
apt-get update
apt-get install -y openssh-client curl wget git fonts-powerline
EOF

# ------------------------------------
# Install Python
# ------------------------------------
RUN <<EOF
apt-get update
apt-get install -y software-properties-common
add-apt-repository -y ppa:deadsnakes/ppa
apt-get update
apt-get install -y python3.9 python3.9-distutils python3.9-dev python3.9-venv
curl -sS https://bootstrap.pypa.io/get-pip.py | python3.9
# Create symlinks
ln -sf /usr/bin/python3.9 /usr/bin/python3
ln -sf /usr/bin/python3.9 /usr/bin/python
ln -sf /usr/local/bin/pip3.9 /usr/local/bin/pip3
ln -sf /usr/local/bin/pip3.9 /usr/local/bin/pip
EOF

# ------------------------------------
# Install Docker
# ------------------------------------
RUN <<EOF
# Add Docker's official GPG key:
apt-get update
apt-get install -y ca-certificates curl gnupg
install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg
chmod a+r /etc/apt/keyrings/docker.gpg

# Add the repository to Apt sources:
echo \
    "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
    $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
    tee /etc/apt/sources.list.d/docker.list > /dev/null
apt-get update
apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
EOF

RUN <<EOF
groupadd docker
usermod -aG docker ${USER_NAME}
newgrp docker
EOF

RUN adduser ${USER_NAME} docker

# Switch to the specified user
USER ${USER_NAME}

Compose file

Docker Compose will be our Web IDE launcher. It will configure the necessary services to run the IDE in a Docker container, mapping ports and volumes for data persistence.

In all-my-web-ides/demo-python-ide, create a compose.yml file with the following content:

services:

  web-ide:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - ./workspace:/home/workspace:cached
      - ./keys:/home/openvscode-server/.ssh
      - type: bind
        source: /var/run/docker.sock
        target: /var/run/docker.sock
    init: true
    restart: unless-stopped

Note: Make sure port 3000 is available on your machine to access the IDE, or modify the port in the compose.yml file if necessary (for example: 3999:3000).

Step 8: Launch the web IDE

To launch the web IDE, execute the following command in the all-my-web-ides/demo-python-ide directory:

cd all-my-web-ides/demo-python-ide
docker compose up -d
# or: docker compose up -d --build

Wait while the container(s) build and start.

The first build can take time, as it downloads the necessary Docker images and installs dependencies.

Then the necessary folders will be created in the workspace directory, and you can start developing your Python projects

.
├── compose.yml
├── Dockerfile
├── keys
│   ├── config
│   ├── git_repository_key
│   └── git_repository_key.pub
└── workspace
    ├── .bashrc
    ├── .cache
    │   └── Microsoft
    │       └── DeveloperTools
    │           └── deviceid
    ├── .gitconfig
    ├── .openvscode-server
    │   ├── data
    │   │   ├── logs
    │   │   │   └── 20250818T131437
    │   │   │       └── remoteagent.log
    │   │   ├── Machine
    │   │   └── User
    │   │       ├── globalStorage
    │   │       └── History
    │   └── extensions
    │       └── extensions.json
    └── hello-world

Once finished, you should be able to access the IDE by opening your browser at http://localhost:3000 (or the port you configured in the compose.yml file).

Step 9: Using the web IDE

.

You'll arrive at the IDE welcome screen. Click on "Open Folder" to open the working directory you created earlier.

Select the hello-world folder you created in the workspace directory and click "OK".

And there you are, finally in your workspace:

You can create a .vscode folder in the hello-world directory to add IDE-specific configurations, like editor settings, recommended extensions, etc. And change the theme for example:

You can also install extensions to improve your development experience. For example, you can install the Python extension to benefit from syntax highlighting, autocompletion, etc.

And save your extension configurations in the extensions.json file in the .vscode folder so these extensions are automatically installed when opening the project.

Install your favorite icon theme, for example "Material Icon Theme" to have beautiful icons in the IDE.

Of course, every good project must have a README.md file:

And since we're working with Python, let's create a virtual environment to manage our project's dependencies. In the IDE terminal, execute the following commands to create a virtual environment and install necessary dependencies:

```bash
python -m venv venv
source venv/bin/activate
pip install --upgrade pip

And start coding in python:

If you take a look at your hard drive, in the workspace/hello-world directory, you'll see that everything has been persisted:

.
├── .vscode
│   ├── extensions.json
│   └── settings.json
├── hello.py
├── README.md
└── venv

From now on, you can directly access your project via this URL: http://localhost:3000/?folder=/home/workspace/hello-world

To stop the web IDE, execute the following command in the all-my-web-ides/demo-python-ide directory:

docker compose down

This will stop all containers associated with this project.

And to restart the web IDE, simply execute:

docker compose up -d

Or if you've made modifications to the Dockerfile, you can rebuild the containers with:

docker compose up -d --build

And you'll find your development environment just as you left it.

From now on, you can continue developing your Python project in this integrated development environment, using the tools and configurations you've set up. And if you need more, you can add new services in the compose.yml file to extend your IDE's functionalities, like a database, web server, LLM, etc.

And last but not least, I've created a "little" gist with a script that does all this automatically. You can find it here: initialize-workspace.sh.

Happy coding! 🚀

1
Subscribe to my newsletter

Read articles from Philippe Charrière directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Docker Web IDE -vscodePythonDocker compose

Written by

Philippe Charrière
Philippe Charrière