Skip to content
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

Adding in VSCode alternate branch #376

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
13 changes: 6 additions & 7 deletions docs/tutorial/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,19 @@ You'll notice a few flags being used. Here's some more info on them:
docker run -dp 80:80 docker/getting-started
```

## The Docker Dashboard

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

docker run

## The VSCode Extension

Before going too far, we want to highlight the Docker Dashboard, which gives
Before going too far, we want to highlight the Docker VSCode Extension, which gives
cbarney813 marked this conversation as resolved.
Show resolved Hide resolved
you a quick view of the containers running on your machine. It gives you quick
access to container logs, lets you get a shell inside the container, and lets you
easily manage container lifecycle (stop, remove, etc.).

To access the dashboard, follow the instructions for either
[Mac](https://docs.docker.com/docker-for-mac/dashboard/) or
[Windows](https://docs.docker.com/docker-for-windows/dashboard/). If you open the dashboard
now, you will see this tutorial running! The container name (`jolly_bouman` below) is a
To access the extension, follow the instructions
[here](https://code.visualstudio.com/docs/containers/overview). If you open the extension
now, you will see this tutorial running! The container name (`angry_taussig` below) is a
randomly created name. So, you'll most likely have a different name.

![Tutorial container running in Docker Dashboard](tutorial-in-dashboard.png)
![Tutorial container running in Docker Extension](vs-tutorial-in-extension.png)


## What is a container?
Expand Down
4 changes: 2 additions & 2 deletions docs/tutorial/multi-container-apps/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -216,10 +216,10 @@ With all of that explained, let's start our dev-ready container!

Obviously, your table will look different because it has your items. But, you should see them stored there!

If you take a quick look at the Docker Dashboard, you'll see that we have two app containers running. But, there's
If you take a quick look at the Docker extension, you'll see that we have two app containers running. But, there's
no real indication that they are grouped together in a single app. We'll see how to make that better shortly!

![Docker Dashboard showing two ungrouped app containers](dashboard-multi-container-app.png)
![Docker Dashboard showing two ungrouped app containers](vs-multi-container-app.png)

## Recap

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions docs/tutorial/our-application/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,10 @@ command (remember that from earlier?).
At this point, you should have a running todo list manager with a few items, all built by you!
Now, let's make a few changes and learn about managing our containers.

If you take a quick look at the Docker Dashboard, you should see your two containers running now
If you take a quick look at the VSCode extension, you should see your two containers running now
(this tutorial and your freshly launched app container)!

![Docker Dashboard with tutorial and app containers running](dashboard-two-containers.png)
![Docker Dashboard with tutorial and app containers running](vs-two-containers.png)


## Recap
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 4 additions & 5 deletions docs/tutorial/updating-our-app/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,16 @@ ways that we can remove the old container. Feel free to choose the path that you

### Removing a container using the Docker Dashboard

If you open the Docker dashboard, you can remove a container with two clicks! It's certainly
If you open the VSCode Extension, you can remove a container with two clicks! It's certainly
much easier than having to look up the container ID and remove it.

1. With the dashboard opened, hover over the app container and you'll see a collection of action
buttons appear on the right.
1. With the extension opened, navigate to the container and right click.

1. Click on the trash can icon to delete the container.
1. Click on the remove container option

1. Confirm the removal and you're done!

![Docker Dashboard - removing a container](dashboard-removing-container.png)
![Docker Dashboard - removing a container](vs-removing-container.png)


### Starting our updated app container
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 5 additions & 9 deletions docs/tutorial/using-docker-compose/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -293,19 +293,15 @@ Now that we have our `docker-compose.yml` file, we can start it up!

1. At this point, you should be able to open your app and see it running. And hey! We're down to a single command!

## Seeing our App Stack in Docker Dashboard
## Seeing our App Stack in the Docker Extension

If we look at the Docker Dashboard, we'll see that there is a group named **app**. This is the "project name" from Docker
Compose and used to group the containers together. By default, the project name is simply the name of the directory that the
`docker-compose.yml` was located in.
If we look at the Docker Extension, we can changing our grouping options using the 'cog' and 'group by'. In this instance we want to see containers sharing a network.

![Docker Dashboard with app project](dashboard-app-project-collapsed.png)
![VS Extension with network](vs-app-project-collapsed.png)

If you twirl down the app, you will see the two containers we defined in the compose file. The names are also a little
more descriptive, as they follow the pattern of `<project-name>_<service-name>_<replica-number>`. So, it's very easy to
quickly see what container is our app and which container is the mysql database.
If you twirl down the network, you will see the two containers we defined in the compose file.

![Docker Dashboard with app project expanded](dashboard-app-project-expanded.png)
![VS Extension with app network expanded](vs-app-project-expanded.png)


## Tearing it All Down
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/tutorial/vs-tutorial-in-extension.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.