>> Hey everyone, I'm Bridget.
Welcome back to our series on
Using remote containers in Visual Studio Code.
In this episode, we're going to take a look at doing
port forwarding using our remote container.
You may be wondering what is port forwarding.
Our containers are isolated environments
and in order to access a server,
a service or really any resource within that isolated environment,
you're going to need to forward the port to your local machine,
which is also known as the host.
In order to understand that better,
let's dive into VS Code and take
a look at port forwarding in action.
Here I am in my application
and we can see that I'm in my Dev Container
because the lower left remote indicator
mentions that I am in my Dev Container,
it's my Python 3 Dev Container.
Let's go ahead and run it.
I'm going to open up my terminal here.
That seems like a pretty good size.
I'm going to say python app.py.
Immediately we can see that we are notified that
our service is running on port 5,000.
That's pretty neat, it was done automatically for us.
I'm curious so I'm going to say see all forwarded ports.
We can see over here in the remote explorer view let.
VS Code is going to tell us all the ports that are forwarded
and if I expand this here so I can get a bit of a better view,
we can see that 5,000 is
the port that our service within our container is using,
so 5,000 is the port that our application,
our Python app is running on.
Then that was forwarded to
this location on our host or on our local computer,
so we're going to be able to actually access
our Python app at this address.
If I click this globe icon,
I was also able to interact with
that notification before that had popped up,
I'll be able to go ahead and view our application.
I'm going to go ahead and say open in browser.
Now that we can see that our app successfully loaded and it was
forwarded to this location on our host machine.
We can see that all our data was properly
loaded and it's as you would expect.
We can see here that the numbers actually match between the ports.
The port of the application that's running within our container is
5,000 and that was forwarded to port 5,000 on our local machine,
but that doesn't always have to be the case.
We could actually forward to a different port if we wanted to,
or if port 5,000 was currently
occupied on a local machine by a different service,
then we would forward to a different port,
so maybe to 5,001 or to a completely different number.
If we wanted to change that,
what we could do is go ahead and
right-click here and we can see we have
a few different options and we can say change local port.
For instance, new local port,
we could say 5,001,
and we can see now that
the port in the container is still going to be 5,000.
But now if we go into our browser,
we would instead access our application
at port 5,001 on our host machine.
Now in the browser, actually if I refresh here,
port 5,000 on my local machine is no longer being used.
But if I update it to port 5,001,
we can see that's where my application is now being forwarded.
Now, when we're done running the application we want to make
sure that all the ports stop being occupied.
What we can do is in our terminal we're going to say Control C and
then our app is no longer running and we can see
that in the ports view over in the remote explorer,
the port is no longer being
occupied so it's no longer being forwarded,
and we're again told that we could
forward a port if we would like to.
You can also access all the ports
beyond just the notification that we
had pop up earlier and beyond
just this port scheme and then we explore.
If I open up the command palette
with Control Shift P or Command Shift P,
I can say forward a port and that will also allow me
to work with my forwarded ports
or go ahead and forward a port with my application.
Thanks for joining me today to learn about
port forwarding with Dev Containers in Visual Studio Code.
In the next video, we're going to check out
customizing your editor and project settings,
so be sure to check it out.
[MUSIC]