Detailed process of using Vscode combined with docker for development

Preface

Using Docker and VS Code can optimize the entire local development environment and speed up the project progress. Using the same base image across all environments makes it easier to standardize by providing the same editor tools to all developers.

The team of a large project must first ensure that the development environment, such as installation dependencies and kernel versions, is unified. In order to solve the problem of consistency in the development environment, the conventional traditional approach is to formulate guidelines for developers to follow, but despite this, the actual development process will still encounter various obstacles.

The general method of setting up the environment is shown in the following figure:

Another solution is a development environment pre-configured with all the required libraries and dependencies, which developers can unbundle in containers. Developers can then work in the isolated environment provided by the container. This greatly reduces the time developers spend between cloning a code repository to start working on it.

In addition to providing the same environment for all developers, we can leverage this to automatically install specific extensions that your project requires. This avoids inconsistent use of tools and saves developers the trouble of manual installation.

The following is achieved by using Docker with the Remote — Containers extension for VS Code.

set up

In this article, I'll provide an example of a JavaScript application that runs in a Node environment. Read Developing in Containers for detailed documentation on all technology stacks.

If you don't have Docker and VS Code installed yet, install them first. Install the Remote — Containers extension in VS Code. Make sure Docker is running on your machine.

Go to your project and create a folder called .devcontainer in the root directory. This new folder contains the configuration files needed to develop the container.

Create Dockerfile and devcontainer.json in .devcontainer and add the following configuration.

The Dockerfile file is as follows

# Specify the base image you want your dev container to use.
# You may use the same exact base image your application would use in production for consistancy.
# That could prevent surprises such as "works in local, but not in PROD".

FROM node:14.17.0-alpine

# Additionally you can install other dependencies for the environment while configuring the base image.
# In this example, I am installing Git as the Alpine version of node does not come with one. 

RUN apk update
RUN apk add git

The devcontainer.json file is as follows

{
    "name": "DevContainer ReactApp",

    // Provide the dev container with a Dockerfile that it can use to build an image and run the container.
    "dockerFile": "Dockerfile",

    // Command(s) to run before the container is created.
    // In this case we are installing the node modules.
    "initializeCommand": "yarn install",

    // Starts the development server every time the container starts.
    // This is triggered on reopening the container as well. 
    "postStartCommand": "yarn start",

    // Forward your application's port(s) running in the container to the local machine.
    "forwardPorts": [3000],

    // Required VSC code extensions that you want to automatically install for the developers to use.
    "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "eamodio.gitlens"
    ]

    // Use the devcontainer.json reference to explore all possible configurations.
    // https://code.visualstudio.com/docs/remote/devcontainerjson-reference
}

Once that is done, we need to build the container. To do this, use Open Folder in Container or Reopen in Container from the VS Code Command Palette.

This should initialize the development container. It pulls the docker base image, configures the container, and starts the development server.

Conclusion

Building and configuring a container is a one-time activity that takes time. Subsequent rebuilds will be faster if there are no changes. However, if devcontainer.json or Dockerfile changes, a rebuild is required to apply the changes. If you try to reopen directly you will be prompted to rebuild.

This is the end of this article about using Vscode combined with docker for development. For more relevant Vscode combined with docker development content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!