DEV Community

Cover image for Isolate projects using Docker and Dev Containers by VS Code
Ďēv Šhãh 🥑
Ďēv Šhãh 🥑

Posted on

Isolate projects using Docker and Dev Containers by VS Code

Introduction

Whats up everyone? This is Dev. This blogs teaches you the way to isolate project's environment using Docker and Dev Containers which is an extension by VS Code.

Before going to the tutorial, following is how this concept work. For instance, if you want to work on a python project, firstly, you can pull python’s docker image, run the container, start an interactive bash shell and then start developing project from this container. This way, all the dependencies that you download, will stay isolated inside this container. However, the only issue of taking this approach is that you need to code in vim or other terminal based text editor and not everyone is comfortable with these technologies. Nonetheless, there is a way to connect this container’s directory with VS Code using ‘Dev Containers’ extension from VS Code.


Tutorial

Step 1: Run the container

Firstly, based on the project, we need to decide a base image and run the container. I will use a docker-compose.yml file to list all the requirements for the container. For this tutorial, I will demo how to create the environment for a Python project. Hence, we need a container which has a base image of Python. Therefore, following is how the docker-compose.yml file will look.

version: "3"
services:
  test-python-app:
    image: python:3.9-slim
    container_name: test-python-app
    stdin_open: true
    tty: true
    working_dir: /app
    volumes:
      - ./code/:/app
Enter fullscreen mode Exit fullscreen mode

The above file lists a service with the name test-python-app which has base image as discussed before. The name of the service can be the name of the project which is also assigned as the value of the container_name. Next, stdin_open: true and tty: true, allows you to open an interactive terminal session inside the container, enabling you to run commands, interact with processes and get real time output. Moreover, working directory is set to /app as well as there is a volume listed in which the code directory from the local machine is attached with the app directory from the container. The makes sure that any file or directory created under /app will also be stored into the /code directory of the local machine.

Other than these requirements, a port can also be attached from container to the local machine in case there is a requirement to test APIs or check frontend in real time.

Once all the requirements are listed, finally, the container can be started using docker compose up --build -d.

Step 2: Attach VS Code with container

In the next step, now its time to connect the VS Code's window with the /app directory. There are two ways to do this. Nonetheless, before this make sure to have 'Dev Containers' extension installed in the VS Code.

1st Method

Check on the 'Remote Explorer' icon which should be there on the side bar. This gives a list of all the running containers.

Remote Explorer Icon

When you click on the windows icon, which is beside the arrow icon, it open a new VS Code window which will be attached to the working directory of the container.

2nd Method

In case you cannot see 'Remote Explorer' icon on the side bar, click on the 'Open A Remote Window' which should be there on the bottom left corner.

Remote Window Icon

Clicking that button, opens such a dropdown on the screen. From the options, click on 'Attach to running container...'. This opens a new dropdown, listing all the running containers. Clicking on the required container opens a new VS Code window which is connected with the running container.

Dropdown

Finally once the window is open, make sure the pwd of the terminal is /app. Now, from here you can develop the project, install required dependencies or tools. Once you are done for the day or completed the project, you can close this VS Code window. Nonetheless, before closing the running container, we still have one more step left.

Step 3: Commit the project environment

Although we attached the /app directory from the container to /code directory of the local machine which it persist all the directories and files, the dependencies, software or tools installed does not persist once the container is stopped. To persist these installations, in the last step, you need to commit the current state of the container using docker commit [Name of the existing container] [Name of the new image]. In our case, this command will be docker commit test-python-app test-python-app. This commit the current start of the running container and creates a new image. We will keep both the names same. Once the current start of the container is committed, the work is done. Now you can close the container.

However, there is still a last step left before starting the container, to work on the project, for the second time. Nonetheless, you do not need to do this every time you work on the project. Change the name of the image as image: test-python-app in the docker-compose.yml file. The value of image is the same name that we gave to create a new image using the existing container while using docker commit.

Once the value of the image is changed, to work on the project next time, you just need to start the container using docker-compose.yml, attached VS Code's window with the working directory of the container, write code, close the window, commit the existing container and close the containers.


Benefits

Following are the few benefits of isolating environment for developing project.

  • Work on multiple projects simultaneously, each requiring different versions of dependencies, without interfering with the host system or other projects.

  • Host machine stays clean, as all project-specific tools and dependencies are confined to containers.

  • Deleting a container removes all its dependencies and configurations, simplifying cleanup when a project is no longer needed.

  • The Docker container can be shared with team members or moved between systems, ensuring a consistent development environment.

  • Containers provide a consistent environment regardless of the underlying OS.

Although, unused images and stopped containers can accumulate over time, requiring periodic cleanup.


Check out this tutorial, in case you want to get a practical example of this concept.


Final Words

Alright that's a wrap, although such an approach can have a few drawbacks, for some cases, it can be the best option. Let me know your opinion and thank you for reading the blog.

Top comments (0)