This video is intended to give a quick
overview of the features in the VS Code
Docker Extension.
I'm going to start with a very simple
NodeJS Express app
and I'm going to add a Docker file to
this application.
Using the VS Code Docker extension, I'll
go ahead and bring up the command
palette
and we'll type in Docker add, and you'll
see we have a choice there to add Docker
files to the workspace.
I'll go ahead and select that, and now
I'm asked to select my application,
platform, or basically
my language, and any stack I may be using.
So, I'll go ahead and choose Node.JS and
then I'm asked do I want to include
Compose files.
If you're not familiar, Compose is
typically used if you want to start up
more than one
container, at the same time using the
Compose Up command,
we're not going to use that we're going
to go with a single container so I'll
choose No
or now, and I'll choose the default port
3000.
All right. And with that you'll see a
Docker file has been generated for us.
you'll notice a couple nice things, some
nice colorization here
of the keywords in a Docker file, as well
as if I hover,
you'll see I get help text for that
keyword as well as I can go right to the
online documentation to read even more.
The other thing I get is if I do a new
command like let's say I need to copy
something else,
I get IntelliSense which tells me, hey
you need a source and a destination.
I can tab and then fill in my source and
destination.
So the extension provides you some real
nice Docker file editing capabilities.
Let's go ahead and keep what we had, and
then now that I have a Docker file,
I want to build it, the extension helps
you with that too. I can just come here
and do a right-click
and say build image, and you'll notice we
put out the can...
We output the command that we're
actually running. I'll scroll back up
there real quick to show that...
So that you can see the command that
we're running and then
the build occurs and that happened
really quick so
we should have an image created for us.
So we can go look at that image real
easily
by clicking over here on the Docker
whale.
That shows up after you install the
extension and here you see we have a
couple of images.
We have the node image that was pulled
down as part of our base image in our
Docker file,
and then we have the image that we just
created a few seconds ago;
which was the My Express app. Now let's
run that image.
And when you run an image, it spins up a
container, and we'll see that container
show up here in the containers panel.
I could go to the command line and type
in the Docker run command with the
various flags,
or I can just go here and use the
extension to help me run this and just
do a right-click run.
And you'll see the command that we
actually generate is the Docker run
command
using that latest Express app image that
we just built
and we include a couple flags so that
the ports get mapped appropriately.
Now you'll see our container is running
and in fact,
I can do other things with that
container. I can right-click there and I
can view the logs of that running
container.
So, I right-click View Logs; nothing
interesting yet.
Let's actually open a browser and see
our app in action.
I can do that by opening the browser
manually or take advantage of the
extension again and just do a
right-click Open in Browser.
That's going to open up our browser.
You'll see our express app; it's nothing
fancy. Very simple.
But it's up and running you'll also see
the logs down below.
As I refresh this page, we're actually
tailing those logs - because I did the
right-click,
View Logs command; so that's really -
that's really handy.
Um, another handy command is, I can right
click on that
container, and maybe do Attach Shell; this
is a common thing if you want to
actually
attach a shell into that running
container.
You'll see, I'm now in that container. I
can do a simple command; like
maybe list all the files and folders.
Maybe I want to cat
what that package.JSON looks like.
Um didn't quite spell that right; we'll
fix that.
And I can show what's inside any of
those files - which is very handy. Maybe
when you're looking
through logs or something through like
application logs that are on the disk in
the running container.
So again, you can right-click on
containers, do a number of things. I can
start, stop, remove this.
There's a number of things you can also
do with an image;
such as push an image up into a
repository.
We help you with that, and here, you'll
see the Registries
Panel. I can connect up to a registry. I
can choose to connect to Azure, or to
Docker hub,
or many other Docker registries that
support the v2 API.
In this case, I'll go ahead and connect
to Docker hub.
I'll give it my Docker hub id,
and I'll give it a quick password,
and you'll see Docker hub now shows up
as a connected registry.
In the extension, I can expand this and
you'll see that I have
one repo called Big Morty and I have a
number of
images that i've pushed in the past.
Let's go ahead and expand these.
These are these panels are expandable, uh,
they're also...
You can move them, you can choose to put
them where you want - so that's something
to be aware of.
All right, so now we're ready to push
that image. Let's just go here do a
right-click
push. We'll choose that Big Morty
repo. You'll notice that the extension
has noticed
that that image is not tagged
appropriately and it's going to
prompt you to tag that. Let's go ahead
and change this to 1.0.
We'll go ahead and tag that image, and
then you'll see down below,
we're logging into Docker hub, and we're
pushing that image.
That image will get pushed into Docker
hub and then it would be
available to deploy to a cloud or
on-prem, or wherever you need to deploy
that.
Okay. Our image is pushed, I can go over
here to the registries and
refresh that, and we should see - there we
go. We see our Express
App that we just pushed up a few seconds
ago.
You'll notice, there's other panels like
networks volumes and contexts
we will maybe cover those in some future
videos.
The extension also supports debugging
your application.
That's something I'd like to cover in a
future video as well.
Well, I hope this video was helpful.
Thanks for watching it, and have a great
day.