The following article describes how to create dev containers using vscode and publish it to docker hub .

1. Install Prerequisites

• Docker: Install Docker Desktop from here.
• VS Code: Install Visual Studio Code from here.
• Remote – Containers Extension: Install the Remote – Containers extension in VS Code. You can find it in the Extensions view in VS Code .

2. Create a Dev Container Configuration

1. Open your project in VS Code.
2. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open the Command Palette.
3. Type and select Remote-Containers: Add Development Container Configuration Files.
4. Choose a predefined container configuration that suits your project’s needs or customize your own.

This will create a .devcontainer folder with a devcontainer.json file in your project.

3. Customize devcontainer.json

Edit the devcontainer.json file to include any specific tools, extensions, or settings your project requires. Here’s an example:

4. Build and Open the Dev Container

1. Reopen the Command Palette and select Remote-Containers: Reopen in Container.
2. VS Code will rebuild the container and reopen your project inside it.

we could see the vs code opening the code in dev container

you can see that that the container has loaded and i am able to run the code from within the container

5. Push the Container to Docker Hub

we need to first make sure that we are authenticated successfully in the docker hub .so
First, log in to Docker Hub from your terminal using:

Then here i will use dev container CLI to build and publish images .

1. Install DevContainer CLI using Node JS package manager npm as follows :
   

2. Build and Push the Container

devcontainer build --workspace-folder <path_to_your_workspace> --push true --image-name <your_dockerhub_username>/<your_image_name>:<version>

Replace <path_to_your_workspace>, <your_dockerhub_username>, <your_image_name>, and <version> with your actual values.
Note : This command need to be execute in the host file system not inside container

Here’s a breakdown of that command:

• devcontainer build: This is the main command for building a development container. It’s part of the Dev Containers specification, which allows you to define your development environment as code.
• --workspace-folder <my_repo>: This flag specifies the root folder of your workspace. Replace <my_repo> with the path to your repository. For example, if your repository is in a folder named project, you would use --workspace-folder project.
• --push true: This flag indicates whether the built image should be pushed to a container registry. By setting it to true, the image will be pushed after the build.
• --image-name <your_dockerhub_username>/<my_image_name>:<optional_image_version>: This flag specifies the name (and optionally the version) of the image. Replace <your_dockerhub_username> with the docker user name which you can find it once you login to docker.com under the profile .
  Replace <my_image_name> with the desired name for your image. You can also include an optional version tag by replacing <optional_image_version>. For example, myapp:latest.

for example , refer the above command
i am executing the devcontainer command from the root directory of my repo that contains .devcontainer folder which makes it easy . Hence you will see that i ve indicated a “.” (dot) after the –workspace-folder parameter switch .

Once i execute command , since you have already authenticated docker earlier it will push your image to the docker hub and if it is successful , you will get the following :