Exploring the Dev Container Ecosystem

[Music] m [Music] hello hello everyone happy Thursday and more importantly while you all are here happy vs code live stream Thursday um I'm Olivia as always I'm so pumped to be here um let me know in the chat where you're watching from say hi always pumped to see all of our viewers here um today is going to be a live stream that extra excited about um because it's about Dev containers and I love Dev containers um I know we have a lot of viewers who do as well um so definitely let me know if you're looking forward to this chat it's going to be a very very good one um we are GNA have Josh come on who is a software engineer um on the GitHub codes spaces team so we'll go a little bit more into his intro once we have him there um but first we like to start off with a couple of just Little skits so we're going to do a throwback Tick Tock Thursday to kick things off the coolest way to shorten a basic IFL statement is by using a tary conditional operator I'll show you how it works in Python but other languages have it too instead of writing all of this to get the biggest number between A and B I can just Define variable Max and set it equal to a but only if my condition a is greater than b is true otherwise B will be assigned to Max so when we print it out we'll see that Max prints out as 10 which is greater than five nice I always love those little coding tricks that we do um but people always have very mixed responses in the comments for them um because some people are like well okay yes short it's less code it's smaller it's more condensed but they feel like it sacrifices readability so let me know what team you are on are you team maybe more code extra lines but more readable or do you like to have it like as condensed and streamlined as possible I always love to hear people's opinions here um and I see we have Bal in the chat saying hello watching from lison hi Bal thank you so much for being here um and with that I mean I think we can go ahead and bring on our guests today um like I said we have Josh who is a software engineer on the GitHub Cod spasis team hey Josh hello how's it going good how are you doing good good excited to be here I am very excited for you to be here I like I mentioned I love working with Dev containers um I feel like I learned something new every single time they're so handy um and I'm super curious to see um what you have to talk about today sweet yeah well um I guess as you said at the beginning um my name is Josh I am on the code spaces team and uh I work super closely with a lot of folks over on the vs code side to make all of the de container things a reality um so I work on the specification uh work on a lot of the ecosystem which I'll show a bit uh this morning awesome I love it we got a couple more viewers coming in from Kenya and Chicago very excited to have you all here um I know Josh is too cool yeah so uh I thought I'd start off by maybe explaining a bit about uh what a Dev container is folks that don't know um so I'm right here on this you probably can't see the URL but it's containers. deev um so this is a good spot to go um if you want to learn W Dev containers after this uh stream or just in general uh anything that I reference can probably be found uh somewhere on this on this containers. website um so yeah we'll scroll down a little bit and we'll get this really handy uh little section here to explain what de containers are uh so the goal of De containers is right like we're able to leverage Docker um to um you can see here we have a Dev container Json which is a declarative way to configure your Dev environment um so inside Cod spaces we use this as a way to uh make sure the dev environment is nice and tailored to your project or your team or um your own specific preferences uh and uh a Dev container encodes tools libraries as well as some personal personalization uh that you may want to use in your project uh and yeah we recently over the past couple years have open sourced this this had started as kind of um a way for the extension inside BS code to uh declare configuration uh for um your kind of projects and it kind of developed into something that was uh that we saw could be used in other places which is why we opened up a specification um and yeah uh let's see yeah I think that's a great call I mean this is obviously the vs code live stream um so I love using Dev containers and vs code but I think it's really cool like the dev containers technology itself is so powerful and it is something that you can use with other tools as well um so I think it's really cool that you all took the time to kind of see what people were saying um and realize yeah this is something that people can really benefit from um everywhere yeah exactly and we have um a lot of supporting tools and services and um as as we are able to make the spec uh as we're able to grow the spec um we're getting more and more interest so of course vs code is one of the editors that supports it and uh you can go down see a few others um of course code spaces is where I contribute the most which oh this page is a little longer than I thought now it's pretty cool lot good information yep and then uh yeah we have some other um kind of kind of newcomers uh deod and recently Cloud code sandbox yeah there you go we have code sandbox too that um has started uh to take advantage of De containers so has has been pretty cool to see this grow um and hoping more folks um are also interested in some of the work we're doing here yeah absolutely um and I know you have a demo plan but we also have like one question that maybe you can like answer along your demo um but full stack EC says what is the best approach recommended for experimenting in high higher education so a teacher with students um with the dev container ecosystem so if that's either something you want to talk about now or just maybe you'll address along the way that would be great cool yeah uh we'll definitely keep that in mind uh experimenting higher education um uh as an example um um there is um uh the if you search for cs50 uh which is the is the Harvard computer science course um they actually use codes space as you can see it right here they use codes space um and they have a lot uh they have all of their um all of their config open source documented um I'm hoping that I can just get a nice quick link oh yeah look at that de container Json oh those are o dos um yeah but uh I know the cs50 is at least one example of um being able to use Dev containers in more of an education uh sense and um yeah we have a lot of documentation on containers. deev um as well as a lot of templates um might be a good time actually to jump right into some of our templates um so and um on that note just since we're kind of talking about codes spaces and everything and and students um students have free codespace access they have extra free codespace access right I know everyone kind gets a certain amount and then students get even more can you talk about that everyone gets 60 hours um uh 60 core hours I believe um uh per month te codes basis that's everyone and then students get additional entitlements um um when they go through the education student pack uh through GitHub um so it's definitely very flexible for students for anyone to experiment with code spaces but especially students um they get extra extra time for free to use code spaces yeah really awesome Stu thanks for the question full stock we'll definitely link for these in the description as well too um but I think you'll get a lot of use out of today's session yeah great um yeah so I guess I wanted to so we talked a little bit about Dev containers um and kind of what they are um the specification um is of course always in progress um we love contributions um ideas for the spec um and we have the spec the current specification documented here um and then I'm just going to scroll right down to the bottom um actually I'm going to go to uh the GitHub pag this is another uh nice spot to uh containers spec so this is uh a really good spot to kind of learn more in the weeds of what Dev containers are what they can do and then we have a lot of ideas from the community um as you can see here from our issues um and a lot of proposals here um for you know different ways we can extend the spec to work better with either you know your kind of use case or if you see an improvement or um anything like that so I wanted to highlight this at the beginning um that um all of diff containers are um it is it is all open source and we love contributions from the community ideas all stuff excuse me this is the best place to um just file an issue here if anyone has any feedback this if you have any py feedback I think the spec is a good place to go we have a bunch of repos inside this organization um so uh if it's not the exact rate spot we can always forward you but yeah these these are kind of the main repos uh this is the reference implementation of Dev containers uh we publish a bunch of images we publish features which I'm going to do AOW demo and authoring a feature um this morning um kind of show you what those are all about and then these are the templates that I was saying uh so this is a good spot um to kind of uh we have a lot of examples essentially of a different dep container for different use cases so say you're running a class that uses C++ uh this might be a good kind of starting point um here um and I'll show you in a little bit uh how uh you can get these inside of VVS code editor really quickly um this is just all all of the source code for these templates this is where I live a lot of the time but um it is very easy to introduce them into your projects um and yeah this would be a good starting point I think for anyone wanting to experiment um and just kind of see what Dev containers can do awesome um sweet there is uh one other question sorry I'm losing my voice I don't know why is it possible to use podman rather than Docker yes yes it is um we don't have um a lot of documentation on podman itself but you can definitely um actually if I just show you uh I'll make this a lot bigger um uh this is make it a lot bigger can't can't click fast enough to bear with me please okay that looks that looks decent I can see very small the stream on my other monitor so okay this is like very comically large on my screen so it's pretty funny um yeah so we have the dev container CLI here so this oh and that's gonna be way too big now um funny um yeah maybe maybe show it here um so we have the dev container CLI uh here which is like the reference implementation for everything Dev containers so uh so uh for instance code spaces and the vs code extension um which is also called Dev containers both use this project uh in the background to make everything Dev containers happen um and uh what I wanted to show on the CLI is that you you can pass a different um kind of like I guess like different path for both Docker and for Docker compos so you could pass like your path to pod man on on your local machine um and everywhere that we would use that would have to use the doer CI we would use pman so yes it is compatible um we don't run any other automated test against podman so um I can't guarantee it works 100% but it works very closely I know um some other folks that use Dev containers um I think possibly code sandbox there's a few others in the uh community that do use podman as like as I guess like they're backing Docker engine um so it is definitely supported um just not super well tested compared to Docker cool cool uh all right um yeah that's a good question thank you um yeah and I guess uh I'll just if you want to try out the dev container CLI uh you can install it through npm um and of course if you're using Code spaces or the VSS code extension uh which is called def containers um you'll also you will also be using the CLI just you won't be actually using it directly but um right kind of obra okay yes exactly and these are some good examples too to get started so this might be even a better place that you can kind of understand the internals a bit more about what death containers are doing so cool so don hunt thank you for the question yeah definitely check out again we'll have all these links in the description so you can reference them after as well sweet uh yeah and I wanted to show kind of one of my favorite dev containers that I discovered in the wild so I didn't even write this one um I was very happy to see uh this so this is um project that I find very interesting called Serenity OS um so it is a complete operating system that the community has written from scratch it's completely open source and like when I say from scratch I mean they wrote the kernel they wrote all the programs so a browser a PE program anything you could imagine um they wrote it all and um it's like let me find the description here yeah love letter to a90s UI with a custom uh core based on Unix um so super cool this guy Andreas he has a YouTube channel and he goes through all of the development from the beginning basically it's been years and years um so a super cool project um also something that I had no idea how to run on my own machine um I use a Mac and a lot of the development happens on Linux yeah you can see all of the all of the crazy features that they have here that they've written completely from scratch um super cool and you can see tons and tons of commits even like three hours ago um some changes so it's still in very very active development and if you go to these build instructions here um they uh have some docs like for Linux uh see I don't know like I'm not too familiar with some of these tools like I had a different version of GCC on my machine I don't know if that would work um and I and I had a Mac so I went down here and uh like this is relegated down to a lower area like there was a lot of gotas so I couldn't get this running on my local machine uh and then one day I looked at the repo and I saw that someone added a de container so I was super excited for that so what I did is I uh opened this up in a code space and I ran it um and it worked uh which was super cool so I didn't have to do any setup everything was already encoded by someone who understood the project pretty well um I just went in here I went in the do I saw oh you can do this run command I I ran it I don't know what any of this is I don't have to because I don't need to be an expert in C++ build systems um I could just walk in and all I wanted to do was experiment with it I saw this guy on YouTube that was playing around uh with all of this cool work and I wanted to try it so we'll see if we can get this running um this running so you basically went from like having to go through like all those steps in the read me and like try to like figure out like what versions you had and like figuring out like troubleshoot okay is it because I had the wrong version of GCC what's going on to basically just like opening Cod space and everything exactly I think I opened a couple issues back in the day uh like Mac OS I think uh yeah there is like like a lot of conf well I don't know if these are all the same as my problems being confused but yeah like maybe I saw I saw like something like this when I was starting it and I was like I could spend a day trying figure out how to get this running um um I guess mine I think I've closed at this point because I didn't need it anymore but um yeah so we got this running we can use port forwarding which is a feature inside dead containers and also code spaces um so I'll show you the dead container in a second but I want to just show you how how simple it was even without looking at the dead container uh we got this web VNC here so I just hit this globe so the port forwarding Works uh the password is VSS code so um that's just the default password uh and you can see let me figure out how to zoom in again uh yeah you can see we have this operating system that's running inside my codp space uh through a Dev container and this is a completely working operating system that is running over the web this this port is being forwarded and I can interact with it I can open up I think it's called pixel paint is their paint program uh so let's see if I can get the work yeah look at that um so so if if if anyone wants to learn a bit about developing an operating system or really any kind of kind of lower level development this is a super cool way to just immediately get started I could go change something in my code space I don't know the code base too well I can't probably change something on the fly but you could change something reload here and you could see it immediately instead of spending you know a weekend just trying to get it set up on your machine and then you change something and you're like wait did I just mess up like a dependency what's going on yeah exactly so I thought this was super cool um I yeah and I'll show the uh the defat real quick because it's also Oh and before we do that I can even make this port public so I could share this maybe it's already public um I think I changed it last night so this might work let me let me see yes this put's public so I can even uh I'll share this with the studio chat and if you guys want to show that out you guys can play around with this running if anyone's curious but it's also super easy to get running on your own cool um we do have one question just like I it's more kind of a Serenity question um but uh they asked how is this operating system different from pre-existing ones any reason for the reinvention of the wheel yeah that's a great question and um yeah I mean this is not my project but um I do really like what they're what they're doing here this was mostly a hobby so I guess for I guess the best answer is to go look at this guy's YouTube channel Andreas clling uh he kind of explains he how or like kind of like the reasons he started this project um there's a lot of personal reasons um that he started this project and you can see a lot of folks how many contributors we have almost a thousand contributors so a lot of other folks found this interesting I think like the best answer that I can give that I understand is just that it's fun um that it's interesting to learn how operating system works and a lot of people think I think including myself that the best way to learn is to actually go through the steps and the motions and try it um so I think that's that's the main reason a lot of folks contribute but to really learn the internals and to also make something of your own um it's not an operating system right now that would like replace your Mac OS um but I think that's that that I think is the goal in the future and I think they have a lot of um they have a a lot of opportunity and kind of like uh you can see there's like a crazy amount of commits every day um so oh well um a lot of C of changes and I know this Andreas guy uh he is very interested in the future of making this like his his his like the actual thing that's installed on his laptop that's really cool I need I'm about to check out his YouTube channel right after this because I'm very intrigued yeah yeah you should definitely check it out and then uh there's a few others that he uh has inspired to become YouTubers I guess and to uh do kind of this like this coding on on streams essentially um so yeah I thought this is very cool um and you learn a lot about operating system security and you know things like that so um I have learned a lot that is applicable in my day job as a software engineer as well so super cool um so hopefully folks can get a little bit of uh time to play around with this um cool uh let's see oh yeah and I sorry I wanted to show the dev container of course um which is uh right here this is the dev container that made everything happened uh so hopefully you guys can see that I think we're good um so they're using one of our base images that we publish on the dev containers team um so this is using huntu and this is a version of hubun called Jamie so this is one of like the newer ones um they just named it soos and then they use a couple features which this is something that I'm going to show in a little bit um so they have three features here they have one that we publish which is the GitHub CLI so that means that I can do GH right here in the terminal and I can use the GitHub CLI um so that installs that for me we have this one from the community so this is a someone from the community uh that created this feature called pre-commit which you can actually see is used down here in a life cycle hook um they have a custom feature called Serenity so this is really cool that they chose to use a feature because this means they can share this this with other projects inside kind of like the serenity ecosystem they have another um project here called ladybird which is their web browser um and their own programming language actually called I think it's called Yak um so they could so they could use that feature uh and kind of uh share uh a lot of this logic of being able to run Serenity in a codes space or in a Dev container they can share that logic with the feature um and so that's cool that they chose to do it this way um and then this desktop light feature this is what gave us the VNC kind of web web UI um and uh you can see that password that I typed in vs code um and this was the port that it had forwarded on automatically through vs code um so yeah so this is also published by us we maintain a couple features that kind of um kind of are a good kind of foundational layer uh and then we also have as I'll show and my next demo um a really easy way to contribute your own features so this one this is not a feature that we built feature that someone in the community built and they published and now this other open source project is now utilizing it so it it's super cool from my side um where we worked on this feature to be able to share share things back and forth um it's cool to see it live right here totally yeah and like you mentioned like this is just something you kind of stumbled upon like and exactly it's really cool um I mean one of my favorite things about Dev containers if y'all haven't used them before is like to me I expected that Dev container. Json file to be like incredibly long because I would think like there's probably so much that needs to go into getting this set up but you know to Josh's point the way that they used features like it it's all so bite-sized and able to kind of be abstracted out into different layers so you don't feel so overwhelmed looking at this giant configuration file it's kind of like basic chunks of configuration that you can kind of um build together to get your configuration exactly yeah and here is the configuration for the feature itself um which they chose to check in into the repo but they could very easily have it published into a container registry and it and it could be a little more sharable but for for now this is a really good way to kind of experiment and do the development with the feature by having it checked in directly to the repo where you're using it um so this is all the config that we needed to kind of wire up the feature all of this is kind of uh explained in the in I guess the docs first and also inside of the template repo which I'll show in a moment okay and then there's an installation script here um which encodes a a lot of that uh a lot of these build steps that you know we saw in the readme that we would have had to go through ourselves but it is encoding it one time so someone I guess went through the docs once or understood what those docs meant they encoded it here into a couple functions uh which installs all of the relevant tools uh and uh yeah this is only like like right like under 100 lines of code U to get everything working and um I spent a day trying to get it to work on my Mac and figure it out so um that that is super cool um yeah yeah and like again like we obviously are looking into the dev container and everything because that's the point of this live stream but like you could also just run this and not even need to look at the dev container like you can just oh definitely yeah trust that the people like everyone put thought into this and got the configuration up so you know you can be as deep into it or not if as you want um which is really cool um exactly and that's what we do on our team like on on I guess like cod spaces team and when I work with some folks on BS code that's exactly what we do there is a few folks on the team that you know spend a little bit of time and they write the dev container and they make sure things are a nice experience and then if we introduce someone new to the team or uh if someone doesn't normally work in a code base and they need to get it working fast uh all they do is create a code space and they are ready to go um so I think that's super powerful for our development workflow uh us on the codes basis team uh we save a lot of time I can work in different repos across gield in Microsoft and um I don't need to spend a day configuring the dev environment to work exactly how it should be so that's so powerful because yeah I know like onboarding on the projects can be just like a hassle and it can end up making you want to just like not even do it because you're like okay this took too long to get set up um so yeah to your point like as a developer as professional developer doing that um but I think even going back to that initial question we had about um Dev containers and education it's also super powerful for students as well um so teachers kind of take a second to get it configured and and their students can just spin up their code space and they'll have everything set up for them exactly and I know that is like the cs50 approach because they're like an introductory computer science course at Harvard so um these students are coming in with absolutely no expectation of any computer science knowledge any development environment knowledge um so I mean I I um I was a computer science student myself so I have also gone through uh like kind of kind of the first year having to figure out what all these tools mean having to learn get right all this stuff all of that is up um in all of that in the cs50 class is uh completely abstracted away and you're just learning how to code um and as you learn different kind of concepts of you know of like programming kind of Concepts uh you're able to then introduce all this complexity of development environments and uh all all kind of all kinds of things like that so yeah it takes out that like overwhelming factor of like oh my gosh I have to learn like everything about this instead of just like learning code syntax like that's already hard enough on its own when you're just getting started so yeah it definitely takes that a lot of I think think at my college um I think they said like half of the students drop out of the drop out of the first year computer science course and I think one of those reasons is that it's just yeah so overwhelming to even start your homework assignment right that alone actually work on the homework assignment so yeah I think I think uh students would be a lot more successful from my University if uh they had had Dev containers yeah we we would have the problem similarly at the school I went to where it's like someone would have a Mac and someone have a Windows and like the professor might only be like giving instructions for Windows machines or something like that and so then it just would be like a whole thing of okay then they get discouraged because they're like well I can't even figure out how to do this so yeah definitely lots of really great Pros to using Dev containers and code spaces yeah and I guess uh education uh the education pack uh at GitHub is where you can go if you're a student uh you can register here and you get you get a bunch of stuff um this is super great uh you get Tex us to co-pilot it looks like here uh um oh this is the yeah Cod you can see code spaces here um uh yeah get uh free Pro level access okay good I wanted to make sure that I was saying that right um um so you get a lot of benefits but one of them is code spaces if you are a student um you get a bunch of azure credits too which I think is pretty cool um so yeah if you're a student definitely check this out and if you're I guess like uh if you place you have students also um you can point them to here so they can use codes spaces and some of the other sweet benefits that uh are offered yeah awesome sweet um yeah so I also wanted to so now we saw that this feature uh in the serenity project existed here but uh I wanted to show you how easy it was to make your own feature um we have put um a decent amount of work into making it really easy first to rate features and also to share them out with other folks um so uh I wanted to show how to I guess start writing your own feature um let's do it sweet uh so we have uh this repo here which I'll put in uh the studio chat uh since I'm not sure how to put it in the other chat um yeah no worries yeah so you guys should be seeing um comments from vs code popping up in the chat um we've already posted a couple links um for like the code space so you could check that out um and then we just did the student pack and then we'll have this repo as well sweet uh yes we have this repo which is called feature starter inside of the dev containers excuse me organization uh and this is a great spot to start authoring your own feature so like I put here in the description a bootstrap repo for self self-authoring div continuer features um so I went ahead and I just clicked create a new repository and I created my own repo in inside my account um from this template so it's exactly the same as what the template has uh and then I just created a code Space by going code uh and I yep code plus and then I created a code space here so just wanted to save a moment or two it is pretty quick but uh got this running in the background for us so now we can edit uh here and um I was scratching my head trying to think of what features to write because I've written all the features I want to write at this point um so um I I um always really liked this kind of silly little command called Cal which let me uh make it bigger once I find it uh but yeah so there's this little program uh that I know in the past called cow which super simple you you type cow and then a string is what I'm gonna do and then a little cow just says it back to you that's so cute so um I mean this was the hardest part of me having to do prep for this uh uh kind of live stream I was like I don't know what to write but um I'm going to make a little cal um that anyone can add into their death container and they can share around um so yeah uh hopefully we'll get this running Ed on a live stream before so I'm hoping that uh I still remember how to program but uh we'll see how that goes um so we have a couple uh example features here uh we have one called color and one called hello these are just kind of really simple kind the boiler plate kind of features that come from the template um this one if you type in the word color uh to your terminal will just say uh say your favorite color uh so super simple um and this one will just say hello back to you if you typ hello so these are super simple we're gonna just like replace oh super big uh we're gonna replace this one we're gonna call it cow now um and we're just going to start replacing things whoops uh start replacing things here so this is the configuration file um for a feature uh so this defines um the ID of the feature kind of the name you see when you install it uh the version because these are semantically versioned um and options um so we're just going to define a new feature here we're gonna get rid of options we don't need that uh C say and uh because uh we're coding live I'm G to get co-pilot so that I make sure that I don't do anything silly and it's already installed okay so C uh this is the brand newand new feature so we'll start it at 1.0.0 and a a a uh feature where a cow says hello so that's our description and this installs after just means that if we want to install this feature uh which has a bunch of nice common utilities uh our feature here will install afterwards um so if you want to depend kind of loosely on a feature um you could do so that way um and we're also going to use a life cycle hook um so we're going to use post create say so all of these commands perfect uh all of these commands are documented onside the containers. deev uh site so if you're curious um there uh you can look and see um kind of all of the options you can put in this feature but this will uh we can even hover over it um command to run after creating the container so after we create this in code spaces which we'll do afterwards um we um we'll hopefully see a little cow saying hello from C so I can't wait that's our goal here um great um so I think we have all the configuration inside this Dev container future. Json uh set up um so let's go to the other file here which was install.sh so this is the entry point uh when you add a feature to your Dev container uh the dev container CLI or whatever reference or sorry whatever implementation you are using is going to look for for like these two files essentially you can add more files in but you have to call it from install. so installed Dosh is the entry point um you can see we have some boiler plate here um kind of explaining different um explaining different features um that you can utilize here so all of this is in the template we're not going to use it um maybe we'll do this just for the logs um but we're not going to use any of that so we'll get rid of that and this is the boiler plate where like I said if you type hello into your terminal it will do something um this is putting um a little script into your path so that you don't have to put the full path you can just type c so that's what this is doing um so um a little bit of bash magic here to just write a script into a file at this location so anything that we put here will be um will be written um into the uh into this uh directory when we install it okay okay so let me just I I didn't want to have you all watch me type in a cow for the next time I was wondering how you gonna do so I do have it prepped uh I also I think that make excellent content I think it be a little fun to watch me struggle but um I was say have you memorized the art for for this I don't even know I think this is a standard o but I don't know if all of these are actually on my keyboard yeah okay that is on my keyboard but uh that would have been a fun challenge um we're just gonna uh okay so I think I copied that correctly we'll find out really quickly if I didn't um but all this will do is you'll type in C into your terminal it'll look for the first argument that you provide it and it'll assign to message here and it'll just Place message right into this little kind of speech bubble and then the cow is the cow cow will stay um and I think I'm just gonna look it over again uh because there's a lot of funky uh characters here but I think that looks good um so that's all we had to do um of course the like main use caser features a lot of the time is to install um a tool or some kind of programming language so we have we have features that inst go we have features that install Docker inside of Docker uh we have features uh that do that kind of desktop light uh functionality that works like this um so we have this um oh nice look like someone was in here um uh yes so we have this desktop light feature and then uh hundreds more in the community I didn't even show this um which is always a fun thing uh for me uh since I work on features is that these uh from Dev container spec maintainers these are all the ones that we have written and then once you get past this um you see like hundreds more that have been written by the community I'm looking at how tiny the scroll bar is yep so let me just shoot past Daniel here who has written a lot he he he is like the dead containers contrib um so all of these were contributed in part by him but in part by other folks inside of that repo um so these so all these contri are contributed by the community um and then you can see other folks see these are a couple that I published here and keep on going keep on going I won't make you guys wait till the end actually we're pretty close um so yeah these are all the features that have been published by the community um so just to show you how how it it is hopefully pretty easy um hopefully these guys didn't spend too much time figuring out how to do it um but you can see it's pretty straightforward and all these can be used by anyone in the community um you can write a feature that is scoped privately to someone and we use uh we use um a container registry for the uh for all the off so if you have a container registry for your team or organization you can publish there and only your team or organization could use them but these ones are all public so anyone can use these uh yes so we have a few internally for GitHub that are very specific to GitHub things that like wouldn't make sense to use elsewhere and of course we publish a lot that um um we want other folks to be able to use So Okay so we've written our feature we're done we have this read me here which you see is incorrect but you'll see in a moment that after we publish it it'll actually rewrite this entire rme based on the death container feature so we don't even have to touch this it will rewrite it with all the options uh example usage and things like that so we won't even bother touching that because it'll just get Rewritten anyway um is that okay sorry I might have missed is that just like something that happens when you rebuild these the okay yeah yeah when we publish so we have this GitHub workflow exle that uses our GitHub whoops uses our GitHub action uh so Dev containers action is the one that you'd want to use um here and you can see generate docs is true so it's going to create the documentation for us so uh if you go to put github.com this uh you'll see you'll you see the GitHub action you can also get to from the feature starter link that we provided a few minutes ago but yes it you can there's a bunch of flags here to rewrite um you can see with the feature template uh we want to publish features and this is the base path Source right here and we do want to generate docs and then we just have a little more code here to actually make the pr for you um so yeah we have a lot of this really automated so um should be pretty straightforward to do um and you did remind me um definitely something that I would have forgotten is that we have a test command we we have a test workflow as well uh and we just want to change this to c um so that we actually test the right feature um and you can see we use a matrix here inside of the GitHub action to test all these features against all these different base images um and like the goal here is to get good coverage on the different Bas images that you would use so um you can install a feature wherever you want um you can either code in the feature hey it only supports X images or right there's like some other kind of handling you can do in the feature to say hey I only work on a certain image or a certain combination of things um but here we allow you to add an arbitrary number of Base images to automatically test against um and that kind of sigs nicely until let actually write the test for this um so we have again what was it hello that we got rid of right so we'll just use our template or rename this to c um just going to for Simplicity get rid of this Global uh and yeah we have a few options here all this is documented um the best place to see that test command is um probably all all of the testing uh code is baked into the CLI uh docs so I I wrote up a hopefully helpful doc on the test command um so under docs features test. MD you can understand more about what that test command does um and can also just look at the example that we have and kind of modify it which is exactly what I'm going to do um I also have some inline comments here explaining how you would run this test with the dev container CLI on your local machine um as well as we're going to run it in CI with that that workflow file um so yeah you can see this used to be hello now it's cow um so let's just change this command to coway um I love tests uh and I think I don't have any typos in there got the quotes um okay so now this should execute C you forgot the s in the C thank you I did that uh I did that many many times thank you for for checking out the first time I ran through this um perfect uh so this will assume that we have a program called Cal that's available to us in the container which is of course the whole point of this install script is to install a program called c um and also make sure that it ex that it will exit successfully so this command will pass right now if it exits successfully um so if like the exit code is zero which is explained down here so um this is very flexible this this whole file like if this file does not exit with the zero exit code uh the test will fail um so you can really do anything you want in this file um we have a couple helpers here but I mean this this file you could do anything in um to assert that things are working um so um yeah if you have any questions yeah actually this doc was here the whole time uh oh nice okay cool uh so that's cool so you can find it right here um and where was I going to go oh yeah let's go back we have this also so scarios folder um but we'll just ignore that for now too since uh we just want to see that one of our tests are running um and yeah uh I think I'm pretty happy with that um so yeah let's just uh now commit this change so now we have created a program or a feature called C which installs um a little script into our path so we're expecting when um we publish this feature we can just write C say whatever we want uh here so let's actually commit it to a GitHub repo um and oops y so we can see we're just going to check in every file that we touched um say and we'll just publish that uh and then we'll go back to our repo here refresh you can see now we have it in our GitHub repo um you can publish it from the but I like to use the GitHub action um kind of keeps a log of it for you um so on this on this template um we do automatically run the tests um you can see the tests are running um I did get rid of this one so um I think it's going to be a little unhappy there but we can see c um see oh yeah yeah because I didn't get rid of it in the action um so that one won't work um because I got rid of it but let's see C here okay and this test passed um so so it installs the dev container CLI and Moment of Truth uh yeah you can see right here it installs the feature a feature that says hello we have this nice little kind of header uh that shows you all the features that were downloaded uh and here we go we have a little cow it's the cow hello some cow say okay great so so what this did in the background this test um is that oh actually these will pass because there are no tests so it it is going to pass because uh there's nothing to run so there's nothing that fails um what it does in the background here is it creates a Docker container that's based on uh a div container with both That Base image and the feature so it kind of does a little bit of kind of gluing together uh to make it really quick to test these features um and then it creates a Dev container with the dev container CLI uh and it executes all of and it will run that test.sh command um inside of the container and um yeah you can see it's running on a couple base images so it's running in a few places um and yeah there's other modes that we didn't add but there's other ways that you can test this other kind of angles you can attack uh this feature from I'm that was way quicker than I thought it would be like when I saw there was like 10 jobs I was like oh we're gonna do the thing we kind of like talk for a while and like wait for them then all of a sudden they were like all done like yeah if if we had run test on our main features repo uh I would have had to stall a little bit but um you can see we have a lot more features here the features a lot I was showing before um but yeah cool how quickly you were able to just create that lightweight feature and have it tested out that's awesome yeah uh let's see okay so we're back to my more features repo so so that's great we're pretty confident that it works um so now let's publish it and share it with other people um so I showed you we had the three uh we had the three different workflows that we checked into that do GitHub folder um so show you uh we have the RO we have the we have these three workflows uh we have this test validate and release uh let's go to the release one and we see we haven't released any features yet um we haven't actually published them out into the world um so it works great we had when we want to test them but um if someone puts like the ID of the feature into their death container it won't be published yet so let's publish it to get up container registry uh all you got to do is run and I've never run a workflow on camera before so let's see how that goes um I guess I did I guess I just did um uh let's see starting job so it's GNA check out um and you can see it runs the dev container CLI so this is the command that you would run right in your terminal make it a little bigger um this is the command you'd run in your codes space or your terminal if you wanted to publish it uh here didn't work okay yeah this is a permissions issue with the publishing of the uh documentation but the but the actual feature uh is being published so you can see that uh the feature is published through the get up container registry um and it found two features color and C we didn't have to tell it it just kind of saw from this Source directory here okay um and it published all the versions so there's a major version minor version um and like the break fix of color um and then C is down here so we'll publish on our kind of first version of Cs uh here um and um yeah it's all published so this PR I just got to add um a different permission because I I made this template uh all all of that's in the docs um or all that's in the read me on the template um but the docs own as important as seeing now we have some features here um so we have C and if you pop in right here uh we have a little snippet that says hey if you put this in your Dev container you'll have C that's so cool there's one more gotcha which is also in the readme um that uh you just gotta make it visible so it is public right now because my repo is public but if your repo was Private you'd have to swap this over to public um and this is how you would control if like your teammate if you want adjust your teammates to be able to use this feature uh um you could just go down here and make it make it um if I was intive organization I could make it internal to just my organization um which is what we do at GitHub for some features that um are only meant for internal uh usage um but this one's public um so let me I've definitely lost where I was um okay that's cool so I'm just going to click this to copy it and then I'm just going to GitHub Club new uh I don't even need the template I'm just going to make a new repo and I'm going to use this use this feature um my cool project I'm just G to make a new project at a readme repository and say uh I'm now starting a new project on my team and I know that I need to use cow um I'm G to add it in as like the very first commit uh so I'm going to go to code here and we have a configure Dev container little button right here so this opens up inside vs code or sorry inside of GitHub um a little UI um to configure your Dev container so this is the default image and code spaces so we'll just leave that be um you can see on the right hand side all of those features that I was showing you um oh on on the containers. site uh they're right here so um I know I published a feature called man in the middle proxy so if I wanted to add this in um I could just search for something that I wanted see if it's there uh read more documentation on it um copy this and it's and I could just add this right into my Dev container uh it also explains what the options are here uh explains some of the other options and this is all read from that Dev container feature. Json so uh all of that is um all of that is process from this one file so like the same thing as the read me everything that you see there uh is from this file that we encoded so um you know super handy uh that you don't need to really do anything else except write this file once with all this metadata and it's uh shared and used in so many other places that's awesome um so we haven't published those yet so we're gon just GNA directly add it in um you don't need to publish to our index to actually use it it is still on the internet at this address um but if you want others to discover it easier I'll show you in a moment how to add your add your feature right here to this little drop that's pretty much the difference here these ones and the ones that are kind of on that documentation are the ones that are officially published in the marketplace um exactly you have publicly published in general if you have like basically that copy and paste string you'll be able to use it anyone will be able to okay yeah so I don't have it here uh yet so I haven't published it but um I'll actually show you how to do that real quick since we're on the top uh because it's super easy um let's just I'll show you how you'd get to it if you didn't know uh so collections here this very last one this explains so these are all of the collections of features um that someone has published you can see my two features came from the single repo which is called features um and you know we have other people here in the community that he's added some fun features this guy Junger um and yeah uh so this is how uh we are actually populating that uh file here or that kind of the marketplace and it's a yaml file so uh what I would do um I have right eus on the super so it's gonna look a a little different for you um but what I would do here is I would copy one of these objects here paste it here make sure the formattings whoops make sure the formatting is right uh awesome features maintainer is me uh contact is and cannot remember what I called that repo it was more features I think so just kind of copying the pattern if there's a different contact URL uh that you want to use uh that makes sense too it'll show up in the docs so uh kind of just handy to put something that is useful repository and oci reference this is uh just the feature name so let me just just gonna put here some scratch it's just this bit without the actual feature name so you can publish you know more than one feature we have the color feature and Cal published from this one repo just so that you don't need a single repo for every feature um so in the doain you had a couple from that one repo it's because you just like you have a couple in your features repo before exactly yeah we have two features here um so it published on both the same names space is what we call it um okay so that names space is and you can actually um you can see here that I published two features and then I published something without any feature name on it and this is the kind of like the metadata for the collection so this is published every time it's just a big Json and blob that we use to so we don't have to iterate through it every feature to identify some metadata so um OC reference that's what that is um and I don't think I have any typos um so we'll see um so all I would do is um propose the change um I'd put in something really helpful here but I'm not going to do that um and I would do this and then if someone on my team is awake uh they could approve it and we could see it in that uh in that UI but um okay cool otherwise this is how you would get it all you would have to do here is right all all you got to do is this and then um like every so often we will republish repopulate cach um So within a day after this is checked in um you'll be good to go uh and you'll see it yeah you can see there's there's a few other PRS it looks like that have some changes needed but um this is the workflow to do that and then you would see that I assume your team probably like actually tests out those features before approving those yeah so yeah so you for uh if we don't have too many strict rules on who who can publish what but we do ask that Theo's open source so that we can look at it and we'll go through and we'll see if there's test written and if not we'll suggest you know could you please write some tests in your repo both for our knowledge and um just to make sure that the feature works correctly um we'll go through we'll test it ourselves um there are a lot more features I think than we expected um so it takes us a little bit longer sometimes to go through the validation but we are pretty quick I think um I know there is a few folks on my team especially Sim re um on our team you'll see her and all of the issues and she's really great at you going through and making sure that we have um we have a pretty good quality uh for these features so yeah so so after that's merged we would see Cassie Cass right here but uh that's not going to stop us from trying it out right now um there one more thing I want to do I think yeah let's attach a let's add another life cycle hook so post uh attach here um so this will just use the command again um and I think uh that should probably work uh this would tell us if there were any like kind of Json linting issues so um we'll try that hopefully I didn't make any typos but find out quickly um and yeah create a code space based on it so when you have AEV container folder um it will it'll it'll use that when it builds the code space um so so here we're building container um and assume like I didn't make any typos um we'll see it looked good to me got okay great so we have the little header here say so that's kind of the same familiar header that we saw in the uh uh tests yeah looks like we're on the right track that's good so yep so we're on the right track um I did omit some documentation and I didn't put any options inside of that Dev container feature. Json um so you could definitely make this a bit better than what I did here but uh yeah uh and you can see were based on the well I guess that's the only feature we put in didn't we um yeah but you can see it it is using the it is using the def CLI so this is internally using the same tooling that um we use in a couple other spots um and that soft dependency that we added in oh we're done um yeah you can see that soft dependency that we added in um is also checked here okay um oh and I saw I saw okay so awesome yeah so so we can see that post create that's fired from the feature so we never wrote this post create in our de container which is pretty cool um we added a post attach but the post create is hidden in this feature so this feature knows that it needs to do a post create um so we can encode that in and when the container is built we run all of the life cycle hooks from both features even from the image if um it's encoded in the metadata um and then also any that are declared directly in the de container Json so it's very flexible very powerful and these life cycle hooks run at different points throughout the container creation um and uh let's see taking a moment um because I'm on camera um the demo Gods always always um what else can I show you in the meantime um yeah there's a there's a bunch of these life Cy hooks um so uh let's see reference is life cycle yes so life cycle script so this is what I was using here to actually run the command in the okay in the feature so these are in order of like the order in which they're executed um and this little tag here means they're encoded in metadata so if you publish an image with the def container CLI uh we kind of keep keep in our keep in the labels uh these commands so that they're run so it's easier for you to share um with other folks on your team or on the community um so this post attach is what uh we're running here okay and I don't believe that this is done I think I there we go um so we're connecting here uh my cool project uh and let's see so we're connected now uh we'll give it just a second um but uh yeah here we go and then because of because because the post attach is the final thing to run we actually run it in your terminal as an interactive um so this is helpful you know some places I've Ed it I have seen this use if you want to sign into something and you need uh some like user to type in a token with their keyboard uh this would be a great use of the of the post but you can see we have a feature published and anyone on the stream that wants to use this feature they can just add this into their Dev container they can rebuild their code space or uh they def contain with vs code and uh they'll see a little cow that says hello that's so cute I love this so I'm defin gonna be using this a lot more on my other death containers going forward now that I built it it's G be my most used feature um we have a couple comments in the chat defy researcher says this was really fast um yeah I I think this was so cool just be able to see like truly the end to end like from you just starting with writing the feature to then showing um how it got packaged up and then even showing how quickly you could create the pr to get in the marketplace like that was a lot quicker than I thought that was awesome um and then um we just have another love for Dev um container comments they said I use Dev containers to virtualize the development environments for different projects of the company I work for and I find them to be an excellent solution for this purpose um so Mari you yeah for sharing very happy to hear that um all right Josh this was awesome I feel I learned so much in this um and I feel like I can really easily go and create my own feature as well um awesome is there anything else that you wanted to show or chat about before we wrap up yeah I guess I just kind of showed out that um uh we love your contributions or your engagement with de containers so however that may be um we do have a uh slack Channel um that uh you can that you can request access to um so if you put a comment on here uh the third discussion in the dev containers org um put that I'll share that here or you just go to github.com DEC containers there's a couple ways to interact with our community um so we'd uh we'd love um for your engagement with death containers uh there's also this is a link to do exactly what I just did creating and sharing your own features um I actually wrote a guide on the dev containers page that goes through essentially all these steps that we just did um and I might actually update it for C now because I think this is a lot more fun than my hello example um so probably update this with c and then it'll be exactly the same but yeah this goes through all the steps we did um and yeah if you have any questions um yeah you can I'll I'll be in all all of like the get of issues and in the select Channel as well um so continue the conversation there awesome yeah I think it's a really great call like this is open source it's like really like there's you showed us all the different features that were Community contributed I think that that's just really cool um so yeah everyone definitely check it out make contributions if you have a cool new feature you want to add um I know the team would love to see that so and we'll make sure to have all these um links in the description and you can always watch this back too if you want to see Josh go from start to finish on Cay again cool Josh well this was great we like to also just close on a quick lightning round to get to know you a little bit better um so let's dive into that all right first question is it gif or GIF I I feel like I never know and I say both of them but I think the first one sounded better to me that's what I think I'm team for sure I just can never get over Biff and like the peanut butter brand I just can't like me that's what I say in my head but I don't know if that's correct or not I think I think technically the Creator came out and said it was GIF but like I don't care I don't know I don't believe in that but whatever okay similar and I think you you said this word a couple times but Jason or Jon uh oh wow I don't know what I said actually um this is what I flip back to I think it's Jon is what I hope that I said but I probably said Json because uh I think I probably said Json but I think it's the second one yeah I I flip I was like team Json but then like I find like if I say it too many times then it just turns into Jason and then it's just yeah to go watch this back and see what I said I'm curious there's probably a mixture um okay biggest pet peeve either coding related or just in life oh wow this one isn't a first or second um gota think on this one I gotta think on this one I mean the first thing that came to my head was like was um of course like spaces and tabs which I thought you were going to ask the third question and you can see you can see right here in all the templates that I'm definitely spaces uh I convert everything to spaces so I think having having to go deal with tabs especially um across different operating systems I think uh that would be my biggest coding pet PE for sure I'm definitely a spaces guy see Josh I'm a I'm a Taps girl all right interesting we're at okay and I think I might know what you're going to say for this um so I might make you say something else but what's one vs code extension that you cannot live without yeah well I can't say I can't probably say the get of code spases extension that's my favorite one yeah uh that's the one that I work on every day um so it's definitely my favorite let's see what I have installed yeah let's make you pick another one I like the um do we even have an installed so this one I put everywhere um I don't actually have an installed right now but this one I put everywhere in my code um when I want to go back to something and it just highlights uh the that word right there it just highlights the word and I can find where I was going to do something in the code and I wanted to go back to it so that's my favorite extension by the guy the highlight and I and I have a few other kind keywords that I highlight um that is helpful for me when I'm gonna navigate in code so yeah this one right here the to-do highlight yeah I like that I like the to-do tree too that's right under it because that kind of gives you like I've never seen this one visual this one for later yeah and it it can give you it's kind of like a similar thing where you can like do your own keywords and everything so like if you want to be like Legacy code as like one of your things that you do and like need to like loop back to because yeah we all if if any of you all work in big code bases we all know that there's at least a couple of unresolved is absolutely all right well Josh thank you so much um for coming on it was truly a pleasure I feel like I learned so much I know um everyone in the chat enjoyed it we had a great crowd today um so we will make sure to put all those links in the description um what is the best way for people to get into contact with you if they want to uh connect um um well I guess uh through like the slack channel would be great um also um I have some other links on my GitHub so um awesome if you just go to my GitHub which is Josh Spicer you can see that right there there'll be other links to website blog and kind of other other other ways to contact me from there my LinkedIn so awesome yeah sounds good um well yeah it was an absolute pleasure again um everyone watching if you want to watch this back it'll be on our YouTube channel so make sure to subscribe um and then if you want to just be involved in other uh vs code related content um on our YouTube channel we post a lot of um videos we actually have a Dev container series that we're working on right now um and then we also create shorts from that that we then cross poost on Tik Tok so um if you want to see more Dev container coolness um there's always videos on that but then just other General tips and tricks all right well thank you again Josh thank you everyone for watching um and we'll see y'all next week for another live stream um and Josh hopefully we'll have you back on in the future as the guest again yeah could be great awesome thank you thanks [Music] everyone watch

Channel: Visual Studio Code

Views: 7,280

Keywords: code, vscode, devcontainers, developer

Id: AVVGGe_zQkc

Length: 71min 55sec (4315 seconds)

Published: Fri Oct 27 2023