Skip to content

Commit d75f3db

Browse files
committed
feat: adding install extension point and image
1 parent 51c5636 commit d75f3db

File tree

2 files changed

+16
-9
lines changed

2 files changed

+16
-9
lines changed

content/get-started/introduction/build-and-push-first-image.md

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -144,32 +144,39 @@ Now that you have a repository, you are ready to build and push your image. An i
144144
{{< /tab >}}
145145
{{< tab name="VS Code" >}}
146146

147-
1. Open Visual Studio Code. In the **File** menu, select **Open Folder**. Choose **Clone Git Repository** and paste this URL: [https://github.com/docker/getting-started-todo-app](https://github.com/docker/getting-started-todo-app)
147+
1. Ensure you have the **Docker extension for VS Code** installed.
148+
- Open Visual Studio Code.
149+
- Go to the **Extensions Marketplace** (Ctrl+Shift+X or Cmd+Shift+X on Mac).
150+
- Search for `Docker` and install the extension by Microsoft.
151+
152+
![Screenshot of VS code showing how to clone a repository](images/install-docker-extension.png)
153+
154+
2. Open Visual Studio Code. In the **File** menu, select **Open Folder**. Choose **Clone Git Repository** and paste this URL: [https://github.com/docker/getting-started-todo-app](https://github.com/docker/getting-started-todo-app)
148155

149156
![Screenshot of VS code showing how to clone a repository](images/clone-the-repo.webp?border=true)
150157

151158

152159

153-
2. Right-click the `Dockerfile` and select the **Build Image...** menu item.
160+
3. Right-click the `Dockerfile` and select the **Build Image...** menu item.
154161

155162

156163
![Screenshot of VS Code showing the right-click menu and "Build Image" menu item](images/build-vscode-menu-item.webp?border=true)
157164

158-
3. In the dialog that appears, enter a name of `DOCKER_USERNAME/getting-started-todo-app`, replacing `DOCKER_USERNAME` with your Docker username.
165+
4. In the dialog that appears, enter a name of `DOCKER_USERNAME/getting-started-todo-app`, replacing `DOCKER_USERNAME` with your Docker username.
159166

160-
4. After pressing **Enter**, you'll see a terminal appear where the build will occur. Once it's completed, feel free to close the terminal.
167+
5. After pressing **Enter**, you'll see a terminal appear where the build will occur. Once it's completed, feel free to close the terminal.
161168

162-
5. Open the Docker Extension for VS Code by selecting the Docker logo in the left nav menu.
169+
6. Open the Docker Extension for VS Code by selecting the Docker logo in the left nav menu.
163170

164-
6. Find the image you created. It'll have a name of `docker.io/DOCKER_USERNAME/getting-started-todo-app`.
171+
7. Find the image you created. It'll have a name of `docker.io/DOCKER_USERNAME/getting-started-todo-app`.
165172

166-
7. Expand the image to view the tags (or different versions) of the image. You should see a tag named `latest`, which is the default tag given to an image.
173+
8. Expand the image to view the tags (or different versions) of the image. You should see a tag named `latest`, which is the default tag given to an image.
167174

168-
8. Right-click on the **latest** item and select the **Push...** option.
175+
9. Right-click on the **latest** item and select the **Push...** option.
169176

170177
![Screenshot of the Docker Extension and the right-click menu to push an image](images/build-vscode-push-image.webp)
171178

172-
9. Press **Enter** to confirm and then watch as your image is pushed to Docker Hub. Depending on your upload speeds, it might take a moment to push the image.
179+
10. Press **Enter** to confirm and then watch as your image is pushed to Docker Hub. Depending on your upload speeds, it might take a moment to push the image.
173180

174181
Once the upload is finished, feel free to close the terminal.
175182

798 KB
Loading

0 commit comments

Comments
 (0)