Hey everyone, in this talk I'll be covering GitHub Codespaces for C++. I'll do an intro to what
GitHub Codespaces are and then show a quick little demo using a CMake project that's targeting Linux.
My name is Nick Uhnelhuth and I'm a program manager on the Microsoft Visual Studio C++ team and this
video is part of a series of videos that we're releasing before the Pure Virtual C++
conference on May 3rd. So before I go into the demo here is the overview that I promised. GitHub Codespaces
are essentially managed cloud environments on demand. You go into GitHub, you find a repository
you like, just click open in Codespaces and your environment will be created for you
in the cloud. You connect to it and start coding right away without having to make any changes to
your local machine. It's personalized for you so if there's certain extensions for example that
you love in VS Code, you can have that in your Codespace, and no matter what Codespace you
are connecting to you'll have that personal personalization come with you through a settings
sync. Lastly, it's accessible from anywhere. You can connect to a Codespace from a VS Code client on
your local machine, but you can also connect to a Codespace from VS Code in the browser, so as long
as your device can support a browser that means you'll be able to connect to a Codespace and
be productive from that device. That's enough talk about Codespaces, let's actually take a look at it.
So here we go, I've opened up github.com and here's a repository that I've forked. It's a
barcode reader and I'll just click, code open with Codespaces, you can see I've played around with it
a bit already, but I'm going to actually create a new Codespace. So this is exactly what would
happen if you went through that same step, just saying open in Codespace. It's creating this
from a totally fresh instance, so it's building the container right now and preparing the Codespace
if I want I could take a look at that log there, but it happened so quick I couldn't even click
that button! But right now I'm connecting to it and you can see just in a matter of seconds I've
been able to connect to this repository directly from github.com. Now I'm in vs code in the browser
and things are already starting to work. You can see the CMake tools extension is prompting
me to select a kit, so I'll go ahead and do that. And speaking of the CMake Tools extension, let me
actually just go over into our extensions here. You can see Codespaces has some C++
extensions already installed for me so that I can be productive without having to install
anything extra. So down in the bottom of the CMake tools extension here at this bar we can actually
run some tests and we see we had one test run, it passed so that's a hundred percent, looks
good to me, I like it, let's ship it, and if I click this launch button here we can actually run this.
Telling me the usage here, so if I do BarcodeReader and then give it an image we can go ahead and
try to identify some barcodes. So let's find an image that we want
to actually test out. Here's one. Barcode orientation. So there's
16 of these one-dimensional barcodes, there's 12 QR codes and then 12 of some other type of barcode
that I don't know the fancy term for, but let's go ahead and follow those instructions to actually
run it. So let's copy the path to the image we want to examine. Yes, I want to allow pasting.
And boom, we're running this right now and we can see one-dimensional barcodes, it found all 16.
If we go to the QR code section we can see that it found all 12 and then in the all barcode section
it found all 40. So it was the 16 plus 12 plus 12. So we found all the barcodes, we were able to
connect to this Codespace, we didn't touch our local machine at all, everything was ready for
us to generate CMake, we built the project, we ran tests even, really quickly there, and we ran our
project and found the barcodes in this image. All in just like a minute or something like that, I
didn't have to do anything. So it's super powerful, I was able to start contributing right away,
but let's say I want to maybe start adding some documentation. Well if I go into BarcodeReader.cxx
which is the main source file here and we can see that there's a few different functions
in this file, and let's say we want to start adding some documentation to one. So
we'll do... oh well we didn't generate any Doxygen there, so let's go to the extensions
and just go ahead and add the Doxygen generator. So here's one, we'll go ahead and install that
Doxygen documentation generator extension and if we swing, oops, swing back over into
our source file... boom. We've generated the stub right there, we've got the parameters and the
return type and I could go ahead and fill that out if I wanted to but what I really want to show
is right now that extension is only for me, so for my Codespaces I'll have the Doxygen generator
extension, but if I want anyone who creates a Codespace from this barcode repository to get
it I'm going to need to add a devcontainer json file that's within a .devcontainer folder. So
we actually make this really easy in VS Code with ctrl shift p.
We have an actual command for it: add development container configuration file. And it tries to
find ones that I want so I'll do this C++ one and we'll use the default
and down here at about midway down we see extensions and so I could add the Doxygen extension
there, but i don't actually know the string for it so if i swing on over to my extensions
and go here to the Doxygen extension that I want literally just click this button, right
click on it and say add to devcontainer.json and boom it's added in there now so anyone
who creates a fresh code space from my repository once I push these changes they'll
get this extension as part of their Codespace and you can do a lot of other configuration in
this devcontainer json like right now it's commented out but if I wanted to add any sort
of commands to run after the container created this is where you would do that
and once again it's all just within this dev container or .devcontainer folder there's
a devcontainer json file so let's go ahead and actually stage these and commit so added dev
container with Doxygen extension and so now with this commit, once I push it I'll be able to make
it so anyone else who actually creates a code space from this repository will get that Doxygen
extension for them. Super handy that's everything that I wanted to show in this quick little video.
So let me swing back over to the slides thanks for watching this video I hope you
found it useful and if you want to learn more about Codespaces there's a link at the bottom
of this slide where you can learn more but also sign up for the GitHub Codespaces beta.
Also just a reminder that the Pure Virtual conference is on May 3rd. Thanks for listening.