a quick warning for some of you what
you're about to see is going to totally
change the way you write code with this
tool you're going to be able to develop
on a variety of platforms with different
software versions all at once on the one
computer without ever having to run a VM
each editor window is going to be a door
into its own little world and the best
part you don't even really need to know
how to use Docker so far in this series
we've learned a bit about what Docker is
creating a Docker file and running a
container but when we want to develop
inside a container we need to mount the
local directory into the Container edit
those files on our host and then run
them inside the container this works but
it's pretty clunky you've got to map all
the right things across and you'll lose
a lot of your IDE support because it
doesn't know what libraries and so on
are inside and outside the container
it's tempting to jump through a bunch of
Hoops to actually run your IDE from
inside the container or just go back to
using virtual machines but there's a
better solution enter Dev containers
they make it so simple to get started
we're going to start by seeing how to
use them if you don't already have a
Docker file for your project and then
how you can upgrade an existing Docker
based project we'll also see a few tips
and tricks along the way also thanks to
PCB way the sponsors of this video
before we start we need to have vs code
installed with the dev containers
extension so I'm going to search Dev
containers I personally like to install
the remote development pack it includes
a whole bunch of other extensions uh
which are also really useful But it
includes the dev containers so we'll
wait a minute for that to install we're
also going to need Docker install which
I've mentioned in previous videos
although the dev containers extension
can actually help you do that which is
really neat I tried it on Windows for
the first time recently and it worked
great now I'm going to open a simple
project this is nothing special uh it's
just a plain old directory on my
computer it's pretending to be a Ross
workspace but it could be any other
folder full of code now I'm I am running
auntu
22.041 but let's say instead that I want
to be developing on auntu focal so
that's 2004 using Ross foxy I don't want
to set up a VM I don't want to muck
around with Docker build run blah blah
blah I just want my code to run all I
have to do and this is going to be quick
don't look away all I have to do is
Click these little arrows in the bottom
left hand corner click reopen in
container now there's a whole list of
containers here I'm going to type
Ross go show all definitions sorry then
type Ross now you can see this container
is provided by the developer IG neck
that's Kenji bremel he's a top bloke
shout out to Kenji uh so we'll go Ross
and we'll go foxy desktop we can install
some other things but we're going to
click okay to skip all that
now you can see uh it's doing some
things here you can see this bottom left
has change to opening remote this says
starting Dev container we can click this
to watch what it's doing if we want in
the background this is going to be
downloading a base Docker image if you
don't have it already and then building
some extra stuff on top of that so you
just got to wait a little while once
it's done the little icon gets bigger
and tells us which container we're in in
this case foxy desktop and we can
confirm we're in the container by
opening a new terminal and typing LSB
release so 2004 and Echo
Ross drro and we see that we're on foxy
so now any commands that we type inside
the
terminal will be running inside the
container and any vs code extensions
that we're using for development will
also be referencing the container it's
like a whole other machine is living
inside this editor window so what did it
do a a few things but it was pretty
simple firstly it added thisd container
directory with two files so one is a
Docker file and this just takes the osrf
uh Docker image and it adds a few of its
own lines if you take a look through
you'll see a lot of them are very
similar to things we've covered in
previous videos and the other is this
Dev container. Json file this contains
some of the parameters that it needs to
feed to the docker run command in order
to work properly then it pretty much
just runs Docker build with the docker
file and Docker run with the Json file
and voila it's done from here we can
either customize the docker file to put
other things into the image or the Json
to change the runtime
arguments there's a few things here we
can play with so let's change the name
to my Dev uh and we could Mount another
directory so let's Mount our
desktop when we hit save uh it'll
usually prompt us here to rebuild the uh
container but otherwise if it doesn't we
can always click this little icon here
and click rebuild container so now we
see my Dev there and if we type
LS desktop there's the stuff from my
real desktop there are loads more
parameters we can put in the Json to
control environment variables port
forwarding and more the other thing to
note is we can see that the workspace so
the code that we're actually working on
that was living on our host is always
going to get mounted into the Container
it's easy to see how Dev containers can
help streamline the software side of the
development process but what about
Hardware well that's where we need PCB
way the sponsor of this video as the
name suggests PCB way starts by filling
all of your PCB needs so that means
rigid flexible multi-layer single layer
whatever it is they can also help source
the components for you and even assemble
the PCB but it doesn't stop there PCB
way can also help with injection molding
3D printing CNC Machining and Sheet
Metal Fabrication there's so much you
can do covering all aspects of your
Hardware development so if you're
looking to work faster and get better
results make sure you head down to the
link in the description and check out
PCB way I'm now going to run through a
few quick tips on interacting with Dev
containers and then we'll finish by
taking a look at Graphics so firstly if
we close vs code and then reopen it
we'll see there's actually two different
versions of it in the history so we've
got this one which is the one that is
just the local directory on our host
machine but if we click this one it'll
reopen it right where we left off inside
the container now it'll actually reuse
the same Docker container so if you
install things in it they will stick
around but be careful with this same as
normal Docker whenever you rebuild
you'll lose it so it's best practice to
keep things inside the docker file in
this case I'm going I'm going to click
to open it locally now pretty much every
setting that you need is going to be
available inside the little button down
here but if not you can also click on
the remote Explorer make sure that
you've got Dev containers selected up
the top rather than remotes and from
here you can see any Dev containers
you've got as well as any other Docker
containers on your computer uh from
there you can click on these and inspect
them so you can see stuff that's going
on you can click show details to see
details down here and you'll also see
some other settings in here once you're
inside the container if you go into that
menu now you remember that last time
don't save last time we created our Dev
container by clicking reopen in
container if we already know we're going
to want to modify the template before we
first open the container I'm just going
to delete this so instead of selecting
reopening container we can select add
Dev container configuration files and
we'll just do the same
thing Ross foxy desktop okay you can see
it says adding Dev container
configuration files and then this gives
us an opportunity to modify these things
before we then click reopening container
once we do that it's exactly the same as
before what if your project already has
a Docker file like this one when you
select reopen in
container it's going to pick up that
there's already a Docker file here and
let me click on that and then we click
okay and then it's just going to add the
dev container. Json if that doesn't work
you can also create the Json file
yourself manually specify the path to
the docker file hit open and everything
should work the quickest way to access
all of these commands rather than
clicking on the button down here or
going through the remote Explorer is
through the command pallet so you just
do contrl shift p to open that and then
you type what you want for example
reopen
in
container and sure enough it does it
when we look at the extensions menu from
inside the container it actually tells
us which extensions are installed on the
host and what is installed in the
container we often want to install
things like themes on the host but
extensions that process code like
language support inside the container
for example you can see here I have the
C C++ extension pack installed on my
host but it can't do anything there so
it's recommending that I click install
it inside the dev container we give that
a minute and now I have everything I
need to develop C++ programs inside this
container you can see it says this
extension is enabled in the remote
extension host because it prefers to run
there you can even use the configure
recommended extensions option in the
command pallet to add particular
extensions to a list now if you want to
share your development environment with
your colleagues all they need is the
repo and when they open it it'll get the
prompt to firstly reopen in a container
then install the recommended extensions
and they'll be right on their way one
thing you might want to have working is
guey programs and there are a couple of
ways we can do this you can try both and
decide what works best for you the first
way is the same as what we've done in
previous videos now to do it properly we
should Mount the X domain socket and set
display and so on but I think in this
case vs code must be forwarding the
display environment and we're using
network host the only thing we're
missing is the X Authority I'll be
honest I mucked around with this for a
while and I got pretty confused it's
hard to tell exactly what was necessary
to trigger the change in the container
rerunning rebuilding or so on so I'm
going to try running Arvis right now
apparently at this point I just stopped
talking but you can see Arvis clearly
isn't opening correctly so I opened
another terminal and set xhost plus
local to enable local users to access X
and then I went in I I rebuilt and
reopen the container in vs
code so you can see after setting xhost
local I can run Arvis from inside my vs
code window and this is running inside
the container the other approach is that
vs code gives us a really easy way to
add a remote desktop to our Dev
container the main trick is to add the
desktop light feature to our Json
with and then we're also going to need
to forward a couple of ports we can do
this using the ports tab but instead I'm
going to add the following block to the
Json
file so we're adding the desktop light
feature we're forwarding the ports uh
with these little names it says we got
to rebuild the other thing I want to do
is get rid of network host because I
found that uh that prevents this from
starting its own X server so so that's
something you're going to have to deal
with there uh there's probably a way
around it but I haven't really dug into
it so I've lost my little button to
rebuild there but that's fine I'll just
go down here rebuild container all right
once it's going we can hit the ports tab
we can see there's a VNC and a web Port
that are forwarded so I'm going to open
a new web browser
window and go to Local Host Port
6080
we click connect and the default
password is vs
code and what we'll see here is we've
actually got a little desktop window so
if I want to launch say we open a new
terminal and run Arvis we might think
where did it go but it's actually
launched on this little virtual desktop
here and we can even open up a terminal
in here now by default this is using the
dash terminal which gets a bit confusing
so if we first do bash we can now Ros to
topic list you know do whatever we want
and we're now living inside this little
virtual remote desktop that it's created
what a fantastic tool we've just added
to our belt we can create this
completely customized packaged
development environments for whatever
platform we need regardless of what
computer we're running it on and all
that configuration can be saved and
shared so that anyone can quickly get up
and running to work on the code this can
even form the basis for completely
cloud-based development Solutions which
we might look at in a future video how
cool is that if you haven't used it
before you should also check out vs code
over SSH a very similar feature that
lets you develop on remote machines
rather than in a container I made a
brief video about it a while back but
you'll see the options for it in that
same remote development menu thanks to
PCB way make sure you go over and check
them out and thanks to Anonymous weekly
robotics Joshua craft
and all the other patrons who support
this channel if you'd like to join in
the discussion thread for this video or
support the channel you find links to
both of those things down in the
description I'll see you next
[Music]
time