Skip to content

Update docs for new Container Tools extension #8289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 23 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
14cdd61
Update docs outside of `docs\containers`
bwateratmsft Feb 5, 2025
fc2e8a4
Update docs with new Container Tools extension
bwateratmsft Feb 5, 2025
edbf5be
One more doc
bwateratmsft Feb 5, 2025
f4ef7e3
Finish the docs/containers files
bwateratmsft Feb 6, 2025
fdc4b7e
A few missed things
bwateratmsft Feb 6, 2025
0faf3d0
Replace images/app-service images and cleanup
bwateratmsft Feb 6, 2025
0cefc0f
Replace images/devenv images
bwateratmsft Feb 6, 2025
c496fbf
Merge branch 'main' into bmw/containers
bwateratmsft Feb 6, 2025
a5e1b81
Replace images/compose images and clean up
bwateratmsft Feb 6, 2025
499a5f6
Replace (mostly) images/overview images
bwateratmsft Feb 6, 2025
d62febf
Replace images/quickstarts
bwateratmsft Feb 6, 2025
260ad72
Replace some external images
bwateratmsft Feb 6, 2025
9c8238a
Replace images/registries images
bwateratmsft Feb 6, 2025
3afbbe1
Merge branch 'main' into bmw/containers
bwateratmsft Feb 7, 2025
167d66c
Replace images in devcontainers\images\containers
bwateratmsft Feb 7, 2025
b2ed464
Replace images in api\working-witih-extensions\images\publishing-exte…
bwateratmsft Feb 7, 2025
5cae07e
Replace images in images\overview (temporary)
bwateratmsft Feb 7, 2025
620f5ab
Merge branch 'main' into bmw/containers
bwateratmsft Feb 10, 2025
c05b83c
Merge branch 'main' into bmw/containers
bwateratmsft Feb 20, 2025
22e4144
Merge branch 'main' into bmw/containers
bwateratmsft Mar 10, 2025
b988a2a
Merge branch 'main' into bmw/containers
bwateratmsft Mar 18, 2025
6402d94
Merge branch 'main' into bmw/containers
bwateratmsft Apr 7, 2025
95a9ea6
Merge branch 'main' into bmw/containers
bwateratmsft Apr 17, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion api/working-with-extensions/publishing-extension.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ To create a publisher:
- **ID**: the **unique** identifier for your publisher in Marketplace that will be used in your extension URLs. ID cannot be changed once created.
- **Name**: the **unique** name of your publisher that will be displayed in Marketplace with your extensions. This can be your company or brand name.

Below is an example of publisher identifier and name for the Docker extension:
Below is an example of publisher identifier and name for the Python extension:

![Example of publisher identifier and name](images/publishing-extension/publisher-id-and-name.png)

Expand Down
12 changes: 12 additions & 0 deletions docs/azure/containers.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
Order: 4
Area: azure
TOCTitle: Containers
ContentId: 42F8B9F8-BD03-4159-9479-17C5BDE30531
PageTitle: Working with containers in Visual Studio Code
DateApproved: 02/1/2024
MetaDescription: Working with containers in Visual Studio Code.
---
# Working with Containers

This page is redirected to /docs/containers/overview.md and only exists to keep the "Containers" TOC item.
12 changes: 0 additions & 12 deletions docs/azure/docker.md

This file was deleted.

2 changes: 1 addition & 1 deletion docs/azure/kubernetes.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ To install the Kubernetes extension, open the Extensions view (`kb(workbench.vie

## Containerize and publish the application

You can follow the [Working with Docker](/docs/azure/docker.md) tutorial to build your project, generate a Docker image, and push it to a public or private container registry through the Microsoft [Docker Extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker).
You can follow the [Working with Docker](/docs/azure/docker.md) tutorial to build your project, generate a Docker image, and push it to a public or private container registry through the Microsoft [Container Tools Extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-containers).

## Create and config a Kubernetes cluster

Expand Down
6 changes: 3 additions & 3 deletions docs/configure/profiles.md
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ VS Code comes with a predefined set of profile templates that you can use to cus
The Python profile is a good starting point for Python development. It comes with Python specific snippets and has the following extensions:

* [autoDocstring](https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring) - Generate Python docstrings automatically.
* [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) - Create, manage, and debug containerized applications.
* [Container Tools](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-containers) - Create, manage, and debug containerized applications.
* [Even Better TOML](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml) - Fully-featured TOML support for e.g. `pyproject.toml` files.
* [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python) - IntelliSense, environment management, debugging, refactoring.
* [Python Environments](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-python-envs) - Manage Python environments and packages using your preferred environment manager.
Expand Down Expand Up @@ -285,11 +285,11 @@ This profile also sets the following settings:

The Node.js profile is a good starting point for all Node.js work. It comes with the following extensions:

* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Integrates ESLint JavaScript into VS Code.
* [Container Tools](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-containers) - Create, manage, and debug containerized applications.
* [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) - Create custom development environments inside a Docker container.
* [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) - Create, manage, and debug containerized applications.
* [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - Support for dotenv file syntax.
* [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - EditorConfig Support for Visual Studio Code.
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Integrates ESLint JavaScript into VS Code.
* [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) - Code snippets for JavaScript in ES6 syntax.
* [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) - Use Facebook's [jest](https://jestjs.io) testing framework.
* [Microsoft Edge Tools for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools) - Use the Microsoft Edge Tools from within VS Code.
Expand Down
22 changes: 11 additions & 11 deletions docs/containers/app-service.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ In this guide you will learn how to:
## Prerequisites

- An Azure subscription.
- [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) and [Azure App Service](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice) extensions must be installed.
- A [**web** application](https://learn.microsoft.com/azure/app-service/tutorial-custom-container) that produces a docker image. You could also follow [Create a sample ASP .NET Core application](/docs/containers/quickstart-aspnet-core.md) to create such application.
- The [Container Tools](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-containers) and [Azure App Service](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice) extensions must be installed.
- A [**web** application](https://learn.microsoft.com/azure/app-service/tutorial-custom-container) that produces a container image. You could also follow [Create a sample ASP .NET Core application](/docs/containers/quickstart-aspnet-core.md) to create such application.
- You need a [Docker Hub](https://hub.docker.com/) account or an instance of [Azure Container Registry (ACR)](https://learn.microsoft.com/azure/container-registry/container-registry-get-started-portal).

## Create the application image
Expand All @@ -28,35 +28,35 @@ If you already have an image, skip this step and proceed to [Push the image to a

1. Open the application folder in VS Code.

2. Open Command Palette (`kb(workbench.action.showCommands)`) and use **Docker Images: Build Image...** command to build the image.
2. Open Command Palette (`kb(workbench.action.showCommands)`) and use **Container Images: Build Image...** command to build the image.

![Build container image](images/app-service/command-build-image.png)

You can find the image name in the output of the Build Image command, the same can be found in the Images pane of the Docker Explorer.
You can find the image name in the output of the Build Image command, the same can be found in the Images pane of the Container Explorer.

![Build image output](images/app-service/terminal-output-build-image.png)

## Push the image to a container registry

Before deploying the image to an App Service or a Container App, the image must be uploaded to a container registry. The image can be uploaded to either [Azure Container Registry (ACR)](https://learn.microsoft.com/azure/container-registry/container-registry-get-started-portal) or [Docker Hub](https://hub.docker.com/).

1. Open the Docker Explorer and select **Connect Registry...** icon under **Registries** group and follow the prompt. Choose the provider (Azure or Docker Hub) and provide the credential to connect to the registry.
1. Open the Container Explorer and select **Connect Registry...** icon under **Registries** group and follow the prompt. Choose the provider (Azure or Docker Hub) and provide the credential to connect to the registry.

![Connect to Registry](images/app-service/explorer-connect-registry.png)

2. Now the registry will be visible under Registries.

![Registries](images/app-service/explorer-registries.png)

3. Optionally, tag the image. In order to upload an image to a registry, the image needs to be tagged with registry name so that the docker push will upload it to the right registry.
- To create a registry in Azure ACR, open the **Registries** section of the Docker view, sign in to Azure if not already signed in, and then right-click on the subscription you want to use, and choose **Create Registry**.
- The image built in previous section will appear in the Docker Explorer under Images section. Right-click and choose **Tag...**.
3. Optionally, tag the image. In order to upload an image to a registry, the image needs to be tagged with registry name so that the `docker push` command will upload it to the right registry.
- To create a registry in Azure ACR, open the **Registries** section of the Container Explorer, sign in to Azure if not already signed in, and then right-click on the subscription you want to use, and choose **Create Registry**.
- The image built in previous section will appear in the Container Explorer under Images section. Right-click and choose **Tag...**.

![Tag image](images/app-service/explorer-tag-image.png)
- Specify the new name `<your registry or username>/<image name>:<tag>` and complete the
tag action. For example, new image name for ACR named WebApp6 would be 'webapp6.azurecr.io/webapp6:latest' and for Docker Hub it would be 'myusername/webapp6:latest'.

4. The image will show up in the Docker Explorer under the registry that the image tag points to. Select this image and choose **Push**. If the image has not yet been tagged, you will be prompted to choose a registry to push to, and the image will be tagged based on the selection.
4. The image will show up in the Container Explorer under the registry that the image tag points to. Select this image and choose **Push**. If the image has not yet been tagged, you will be prompted to choose a registry to push to, and the image will be tagged based on the selection.

![Push image](images/app-service/explorer-push-image.png)

Expand All @@ -68,7 +68,7 @@ Before deploying the image to an App Service or a Container App, the image must

In the previous section, the image is pushed to a remote container registry. Now deploy this image to Azure App Service or Azure Container Apps.

1. In Docker Explorer, navigate to your image under Registries, right-click on the tag, and select **Deploy Image To Azure App Service...** or **Deploy Image to Azure Container Apps...**.
1. In Container Explorer, navigate to your image under Registries, right-click on the tag, and select **Deploy Image To Azure App Service...** or **Deploy Image to Azure Container Apps...**.

![Deploy to Azure App Service](images/app-service/explorer-deploy-to-app-service.png)

Expand All @@ -81,7 +81,7 @@ In the previous section, the image is pushed to a remote container registry. Now

![Deployment complete notification](images/app-service/notification-appservice-deployment.png)

4. You can also see the results in the Output panel of Visual Studio Code, in the Docker section.
4. You can also see the results in the Output panel of Visual Studio Code, in the Container Tools section.

![Deployment complete output](images/app-service/output-appservice-deployment.png)

Expand Down
12 changes: 6 additions & 6 deletions docs/containers/choosing-dev-environment.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ The second important choice is whether to debug your service running as an ordin

1. Debugging your service running in a container is possible, but brings additional complexity. Use normal debugging by default, and debugging in the container when you need it.

> The Docker extension natively supports container debugging for .NET-, Node.js-, and Python-based services.
> The Container Tools extension natively supports container debugging for .NET-, Node.js-, and Python-based services.

## Enabling Docker CLI inside a remote development environment

Expand Down Expand Up @@ -86,11 +86,11 @@ After Docker is installed and working on the remote machine, you can use VS Code

1. A new VS Code window opens, running in the context of the target machine. If you're using password authentication, the password will be prompted here. We strongly recommend that you set up [SSH key authentication](https://www.ssh.com/ssh/public-key-authentication), for ease of use.

1. In the Extensions view, install the Docker extension (on the remote host) (a reload may be required after this step):
1. In the Extensions view, install the Container Tools extension (on the remote host) (a reload may be required after this step):

![Screenshot - Installing the Docker extension](images/devenv/install-in-ssh.png)
![Screenshot - Installing the Container Tools extension](images/devenv/install-in-ssh.png)

>**Note**: If you are using the Docker extension to build Docker images and have source code, the approach above probably means you have your source enlistment on the remote host, rather than on your developer workstation. If you are just using the Docker extension for the Docker Explorer features, then you can disregard this.
>**Note**: If you are using the Container Tools extension to build container images and have source code, the approach above probably means you have your source enlistment on the remote host, rather than on your developer workstation. If you are just using the Container Tools extension for the Container Explorer features, then you can disregard this.

### Local Linux VM

Expand All @@ -100,7 +100,7 @@ Alternatively, you can install just the Docker CLI inside your development envir

## Debugging in a container

The Docker extension supports debugging .NET and Node.js-based services running inside a container. Other programming languages are not supported at this time.
The Container Tools extension supports debugging .NET and Node.js-based services running inside a container. Other programming languages are not supported at this time.

Debugging in a container may be harder to set up than regular debugging because a container is a stronger isolation mechanism than a process. In particular:

Expand All @@ -109,7 +109,7 @@ Debugging in a container may be harder to set up than regular debugging because

Because of the concerns above, it is generally recommended to use regular debugging, and employ debugging in a container when necessary.

For more information about how to set up debugging inside a container see [ASP.NET Core quickstart](/docs/containers/quickstart-aspnet-core.md), [Node.js quickstart](/docs/containers/quickstart-node.md), and [Docker extension task properties](/docs/containers/reference.md) (`docker-build` and `docker-run` tasks).
For more information about how to set up debugging inside a container see [ASP.NET Core quickstart](/docs/containers/quickstart-aspnet-core.md), [Node.js quickstart](/docs/containers/quickstart-node.md), and [Container Tools extension task properties](/docs/containers/reference.md) (`docker-build` and `docker-run` tasks).

## Next steps

Expand Down
Loading