>> I'm super excited to be here today to talk
about remote development with VS Code.
Eric gave a great introduction to
remote development for folks who may not be familiar with it,
but just to touch on some of the motivations again,
we are really in an increasingly remote world.
There are huge mono repos a lot of folks are working on and, with
more machine learning, and data science,
and the development of the Windows subsystem for Linux,
there's a lot of opportunities to work in
isolated or remote environments.
With this in mind, we really wanted to provide
an optimal remote development experience.
This included making sure that folks had access to
their source code and avoiding having to
duplicate any settings or setup, and
making sure that it really was a seamless feel in
accessing everything in the VS Code
that you already know and love.
With this in mind,
we actually have four remote development experiences.
Without spending too much time on slides,
I'd love to just go ahead and to get into some demos.
Let's get things started.
I'm going to go over to my desktop here,
and we're going to start off with the Windows subsystem for Linux.
WSL is awesome because it gives you
a full Linux distro on a Windows machine.
So I have access to Linux tools and
commands even though I'm developing on Windows.
Right now, I'd love to develop a Python Django app.
I actually have Python installed in WSL.
You can see I have Python 3 installed,
and I actually have it installed in Windows.
You can see I already have
an isolated environment installed in my Windows environment.
Let's go ahead and launch this in VS Code.
I'm in my Ubuntu terminal,
and I can just launch this with a code dot.
Immediately with this code dot,
I am brought into VS Code.
We can see in the lower left here I'm brought
into my Ubuntu environment.
With this here, I have a few awesome features.
We can see here it pretty much looks identical to
a local development experience.
I have the same syntax highlighting and completions.
I could do breakpoints,
I have a breakpoint here.
If I hover over the path to my files,
they're actually true Linux paths, which is great.
If I type in uname here, it actually says Linux, so
VS Code truly thinks I'm developing on Linux.
If I go over to the extensions view,
I can even install extensions on the Linux side so I can get
a true Python development experience
within this isolated Linux environment on my Windows machine.
Let's go ahead and just try running this app.
Again, just running a Django app on WSL.
I have a breakpoint set so we're really going to test
to see how this development experience looks.
It says that it's running at port 8,000.
Let's go ahead and see how that looks here.
I have that movement of duplication.
Awesome, so they're able to run our app.
Let's see if the breakpoint hits.
It's supposed to happen if we go to this page.
I can see VS Code is flashing and our breakpoint was hit.
You can see indeed we have
the full development experience that we would expect and hope
for locally while developing
in this isolated or remote environment.
Now that we've started off with WSL,
let's say that we don't want to necessarily
have to worry about installing a tech stack,
either locally on our machine or even in this WSL distro.
Let's say that we would like to just go ahead and work in
a containerized environment where we could go ahead and share
that setup between other projects or between other teammates.
Well, that's where our next demo or
our next remote extension is going to come into play.
That is known as remote containers.
I'm going to go ahead and exit out of here,
which I can do clicking over
here and just say close remote connection.
I'm interested in trying out Rust.
I don't really know much about Rust,
but I know remote containers has an awesome way for me just to
spin up a really quick environment for a variety of languages.
I can do, this is the remote indicator.
It's like our hub for different remote commands,
gets installed automatically when we
have any of the remote extensions.
I can say remote containers,
I'm going to say try a sample.
We have a variety of languages here that we could try out.
I'm going to say Rust.
Now when we try this here,
it's actually going to spin up
this isolated Rust environment on my machine.
It's going to set up all of
the Rust dependencies that I need while keeping
my local computer free and clear
of any extra downloads or dependencies.
Now, I'm actually developing in this Rust environment,
but I didn't contaminate my computer with anything else.
In any dev container that I'm using with remote containers,
it's going to add this .devcontainer folder.
I won't get too much into it,
but it essentially tells VS Code how to
spin up your dev container and connect to it.
If you want to learn more about that,
I definitely recommend checking out Johann session,
which is going to be directly after mine.
We're just going to dive into the awesome world
of dev containers even more.
Again, if I say uname,
it says Linux because we are in a Linux container environment.
Now I'm just going to do an F5
again to try running this Rust app really quickly.
Let's see what happens, and there we go.
Hello VS Code remote containers,
and that is the output we were hoping for. That's super cool.
I was able to spin up a Rust environment
just like a matter of seconds there,
and I didn't have to worry
about downloading anything else on my computer.
I could go ahead and share this setup with
other teammates or between
other projects too. It's super convenient.
Let's say by working in this dev container,
now I've gotten this so excited about Rust that I've decided,
I would actually like to go ahead and
contribute to the Rust source code or language itself.
Maybe I come up with
some awesome feature while I'm working in my dev container.
But I know from some friends that actually
building the Rust source code is going to be a lengthy process.
While I have a decent local computer,
I think it would be a little bit too
much of a task for my local machine to handle.
That's where our next remote exemption is going to come into play,
where I would actually like to harness
the power of an external machine.
With WSL and dev containers,
we were working in these isolated environments on our own machine,
but with the power of remote SSH,
which is the next extension we're going to take a look at,
that let's us harness the power of connecting to
a virtual machine or
a separate desktop machine or something like that.
What I'm going to do here is I'm going to
close out my remote connection.
Now going ahead again to the remote indicator,
I'm going to do Remote-SSH Connect to Host.
Here I've a variety of SSH hosts I've already set up.
I could add a new host if I wanted to,
but this is the VM I would like to attach to,
because I know this is the VM where I
have Rust already set up for me.
We could see in the bottom left to you now, I'm
connected to my Rust VM.
If I go over here to the Explorer,
it says Connected to remote,
and if I say Open folder,
these are actually folders and files on my VM,
so now I'm able to navigate on the remote file system,
which is super convenient.
I'm going to select Rust, and here
I've actually already done a git clone of
the Rust source code on this VM,
so that's already set up for me, just super convenient.
Yeah, so we can see here I have the README open,
the Rust programming language.
Close out these notifications for now.
Just by looking at this,
I can see it has quite a few dependencies required,
and I'd really like to keep
my local computer free of all these dependencies.
Again, I think this would take
probably at least two or three hours to build on my local machine.
But this VM is super powerful,
I think I chose on with 64 or 72 core, something like that.
Let's go ahead, and try building
this, and see how many cores it has.
I'm going to go ahead and choose the
[inaudible] here to build and install.
While that goes, it's going to open
up a split terminal here and do htop,
which is nice command we can do to go ahead and
look at core and CPU utilization.
This is just cool. We can go ahead
and see that I definitely have way more
course available on this remote VM
that I would have available locally.
It's just a neat thing to be able to take a look
at and see how all those scores are being utilized.
They're definitely being lit up way more utilized.
This is a really convenient tool,
remote SSH site where I can access source code and
libraries and way more powerful machine
that I have available locally to me.
This would take some time, but I'll
let this go ahead and just run.
Now, finally, like Eric mentioned also at the end of his keynote,
we have GitHub Codespaces,
which is another awesome tool that really takes care of a lot of
the setup and containerized development environment for you.
It has great integration with GitHub and
pull requests and committing to your repos.
If we wanted to, we could go ahead and connect to
a Codespace directly in our desktop VS Code client.
I could go over here to the Remote Explorer.
If I click on the drop-down,
I can choose a variety of targets, so
I could connect to a Codespace on with
any other containers or SSH targets or even WSL distros.
But we can also connect to Codespaces in the browser.
Let's go ahead and see what that looks like in the browser.
I'm going to go over to the browser, and here,
I have a nice app,
our repo in the browser and click
the drop-down menu here, and say Open with Codespaces.
We have a Codespace here.
We're going to open it and see what it looks like.
Once it loads, we're going to see that it looks
pretty similar to our local VS Code.
It's going to be the environment we already
know and love, which is super nice.
We're going to see we have a terminal available.
We have a lot of the same options here like
running, and source control, and even extensions.
We're also going to have the ability to
debug and syntax highlighting and completions,
which is super nice.
Let's go ahead and just try running this app.
You click that, you do npm runs server,
and then start our app.
Here we go,
starting things up there.
Should be available at port 3,000.
If I go over here,
we can see our ports.
Let's open it up, and there we go.
Our app is successfully running in the browser.
You can see we have an awesome experience in the browser
with Codespaces just like we would want locally.
I know that was a whirlwind of demos and
information, all about Remote Development with VS Code.
Here I have a final slide with some resources,
including some docs and some ways that you can reach us.
But I'll kick it back to you, Brian.
Thank you so much everyone and happy coding.
>> Excellent. That was awesome, Brigit.
Stick around for just a few moments. We're going to do some Q&A.
Folks, if you've watched the session,
you enjoyed it, and you have some questions for Brigit,
feel free to drop them in the chat room, and
we'll do our best to get them asked over here.
First off, Brigit, that was awesome.
It's amazing to see how powerful dev containers can
be and just make things simpler for us,
in terms of developers, to spin up something and tinker a
bit without having to modify things on our local machine.
One question for you, right off the bat, is
there's been a mention of Codespaces.
I think Eric mentioned it, you mentioned it a little bit.
Can I use a dev container in a Codespace?
Is there a possibility of doing that?
>> That's a great question.
You absolutely can use a dev container in a Codespace.
You can actually use the same dev container setup in
both the remote containers extension and in a Codespace.
Once you get familiar with that .devcontainer folder,
that includes the dev container .json,
and the docker file,
you can use that same setup
between both extensions or both experiences,
which is really nice because
then you can move between both of them
and your repos can really move between both experiences nicely.
>> Awesome. As a follow-up to that,
can I use that same dev container, both
with use of remote containers extension
and VS Code and in Codespaces?
>> Yes, absolutely.
Then we actually have the ability in both experiences.
There's a command to add
development container configuration files,
and that's going to go ahead and pull from the same repo to
add the same development container configuration files.
You're going to have a consistent setup and
a consistent container configuration,
so that way you know that your projects are
going to have the same tool sets.
You and your teammates can have
a really consistent and smooth setup experience.
>> I should have known that there was a command.
When in doubt, there is a command in VS Code that can help you out.
The command palette is the gateway to everything in VS code.
Excellent. That's awesome to hear.
I don't see any questions from the chat just yet,
but another question for you.
What's the platforms that
is capable of doing remote development like this?
Is there any limitations there, or
what are our options as developers?
>> That's another great question.
Remote development, it's cross platform,
just like VS Code is.
You can do it from any platform,
Windows, Mac, or Linux.
You can also remote into any platform.
The containers that we are using are Linux-based.
That's something to be aware of.
So you can do it from cross-platform environments.
>> Excellent. That's good to hear.
A question in chat,
we may not know the answer to this,
but when can other other folks start
signing up and using Codespaces in these dev containers in there?
>> You can definitely start signing up for Codespaces now.
The link is available to sign up now.
I'm not sure where the exact access state or anything like that,
but the link for the data is
available now if you go to that GitHub Codespaces link.
>> Cool. One last question for you.
A little bit of a personal one,
but what's your favorite part of the remote development in VS Code?
>> That's another really good question.
I really love a lot of parts of it,
but one of my favorite parts is that, now,
I think we're really not restricted by
the hardware that we personally have.
As developers or really from any background, including students,
we have way more capabilities to execute
more powerful programs, and to
really achieve more, and be even more productive.
I think that's a really awesome ability we have now.
>> Fantastic. Well, thank you so much, Brigit.
It was a great session, and I learned a lot.
>> Thank you.
>> Awesome.