VS Code Remote Container development

now this gets me truly excited with docker we've always had the ability to be able to set up environments within our image and then our containers will run with those versions and those dependencies and it's repeatable now vs code takes it a step further now we can actually set up an entire development environment in within containers which means if i want to pass on my code or my project to somebody else all they need is vs code remote containers extension and they literally fire it up and the entire environment is ready within the container and the best of all when you're done you tear it down and it's all gone again now this is really insane [Music] so starting out i've got an angular template that i've just used from the angular site and i've added a dot dev container so this is what you'll need to be able to do remote containers with vs code so once uh once i go in there you've got two files the one is the docker file and the other one is the container json so the dev container json is basically your configuration saying how should this thing um be be used or set up remotely and then your docker file defines your environment so um looking looking first at the docker file so if you think in the past we've written docker files for deployment we would define um your your environment so for instance with angular needs node and then might copy the files over do an npm install then do a build and etc so usually that's what the docker file entails but in this case we're actually using the docker file to define the environment so think about development use you're saying that you want node installed um for you to be able to do some angular development so this is basically saying all right great pull the node image right so our entire environment will be within a container that we'll be able to run with develop on and then tear it down again so we want the environment to be set up not on your host machine but in your local in your container that's running then we take a look at the devcontainer.json and this is where we will actually see how how this vs code interprets what it needs to do so the first thing is we just define a name called angular web app we'll take a look now how it works but then build we can define the docker file so in this case we're pointing we're saying the docker file is called dockerfile that's the other one we've just looked at with arguments we we didn't really need to do this if you want to just define which version for instance you didn't have to change the docker file but it's probably a little bit overkill for a demo you can also define a an image here from an existing repo forwarded ports that's basically saying that the once we're running this container expose the port zero four thousand two hundred on the from the container as well as then on your host machine that you're going to be developing with and then uh this is pretty cool so remember vs code is it's really nice that it's it's almost like a shell ide you get very basic functionality and but it comes alive with your extensions so once again we we're defining an environment saying if i develop my angular web app these are the extensions i want installed so i've got the eslint i've got remote containers which is uh what we need and then i've just added a an angular specific um extension for some helper methods in that um so let's let's see this in action so let's jump to vs code and i've got two instances running and the reason is i just want to show this is my vs code installed on the host machine on this vm and i've got the following extensions installed on that host the important one to install is the remote containers and you can see this over here that indicates that it is indeed installed and we can see that here as well under my installed extension so just make sure you've got that installed but you'll see my my vs code's got the powershell docker docker compose it's got a couple extensions here is installed now i'm just going to jump into a different vs code so now what i'll do is i'm going to go to this remote containers once again you still see i'm in my locally installed vs code with my extensions installed on this host machine i'm going to clone the repo in a container volume it's going to give me the option i'm going to save from my git repo i'm already authenticated here so it's picking up my repos which branch now once we give it a second it's busy um it'll be busy pulling the the files done through git clone but not just that it's also as you see down here opening the remote environment so it detected there's a dev container and it detected our settings file so it looks at this devcontainer.json and it's busy applying these things so what it's doing now is it'll it'll run the docker file and that we defined which is basically installs node so it's busy installing node but remember within the container not on your host machine with that version it's opening up the port when it runs the container exposing that port and we're installing a bunch of extensions in visual studio code so let's just have a look now it's done and you'll see over here it's saying that we're running the environment angular web app and remember that is what we had defined over here we can also see the the folders this is on our source code and we can also just check the content over here so angular web app that's environment we're running we've been run this docker file and built it and so now you'll see that we've got node installed but remember not on the host machine we've only got node installed within this environment and we've got all our source files here so we can make edit it and change it but even cooler than that you'll see our extensions look at this locally installed but those aren't showing here but in this dev container angular web app which is what we're running we've got these installed so now i've basically running my whole development environment within a container and i've set up a whole environment without installing it on my local machine and i can develop commit and and then break it down again let's just run this to prove that it does work indeed so i can do an npmi and while that's running i just want to mention here you'll see that we're actually running within a that node image this is this node image is based on a linux distro so we're running our our docker is um running in in linux so it's not running windows containers so you'll see even the terminal that we opened inside here is running as root um on a um on the in the linux container so this is obviously the host machine is windows so if i go to the other one um which is just my normal uh windows installation you'll see it's actually running on on windows but the container one we're running on linux so obviously if i had built this on um the the docker file if we built it on a windows container and maybe run it on nano server and done the node installation in the docker file ourselves then we could also run that and you'll see something similar to to this and if if i just go over here and i say npm you see that it's not installed on my host machine so i don't have node on this host machine yet i'm able to do an npmi over here because we're running inside the container here we go so npm i worked so let's do an npm start and uh npm start if i look at package.json just as an ng serve so i could have run that too but let's just see the startup there we go now we see that it's compiled successfully let's go to that that link there and here we go up and running look at that so if i now wanted to make a change for instance and let's add some exclamation marks in the index.html you'll see we recompile and all our exclamation marks are live so that's exact same behavior you'd expect if you are running it locally or on your host machine so and that's because we are still running vs code as if in the same way um as if it were in the local host or local machine the only thing is it's running within the container so within the container it's still got all the same functionality we've still got the hot reload we've still got everything and vs code just knows i'm not running on my host i'm running within the container that's the only difference so obviously the terminal will show bash and but even other things so if i wanted to open a new folder you might might expect what happens now so if i go open folder and suddenly you see this is actually in context of linux based file system you'll see all of these so vs code knows i'm running in the container it sees the file directory from within that container and it is smart enough to so for instance if we go here this is where our angular template is running but we can even switch back and show some of the local file system as well so vs code has the knowledge of that it's in in that remote container and you can switch out again as well and for instance i mean now we've made our changes now let's we can still stage our changes instead add um exclamation marks and commit the change and if we then sync we'll see once we go back to the repo in github we should now see a source index.html add exclamation marks and there we go then just taking a quick look at the extensions for instance we can once again switch back we've got all our extensions up and running over here so just to prove that that is indeed working um and i have the other instance still open there just to show these extensions are on my host you'll see that is the terminal running on my host as well and this is within the container so we've got different ones and we've got some extensions installed so one of them is the um the angular snippet from john papa and we want to then let's say make use of that let's just uh over here for instance let's add a new service let's call it hello service naming is hard and over here we should be able to see there's a service hdb client and whoops let's call it hello service and we could create something get world and over here for instance we might say use this and this this isn't so important but api world so it's a terrible hello world app but service but the idea is i'm using the extensions that were defined over here and how did those get installed and that once again is if we go back to the file those are installed there so as a development team we might decide what are the extensions that we require and we can standardize on those to find them all in here and then literally fire up an environment tear it down again and let's say we found a new extension that we wanted to install let's have a look i know a quite a common one is prettier so what you can do is you can look in here look at the identifier let's do that and we'll go back to the dev container we can do this and say from now on we want prettier also installed and so we need to commit this so we'll add the dev container and we'll just add our hello services work as well made some changes naming should be better than that guys oopsie um forgot this guy right and we push it um i didn't really didn't need to do a pull as well but because i'm the only one making changes but um now we can just double check that it is indeed up and running and pushed it back and made some changes here we go we've got that so now if somebody is using the vs code for instance we will see that the we don't have this installed just yet and this is just one thing that might catch out you'll just need to every once in a while just say rebuild because when we've built up the container that's when it extorts extensions it sets up it exposes these ports it runs the docker file sets up these ports so if there's a change we'll just need to say rebuild the container and that looks like it's completed so let's just double check if we if we look over here look at that prettier we've got that installed now as well and that's it so now we're able to share um this and all the other developers now also get that extension can fire it up and think about a few use cases you've got a new developer um coming that all they need to do is install visual studio code install this one extension remote container connect via the remote container to the your git repository it doesn't have to be github i've just used github and then we able to clone the repo plus vs code is smart enough to detect that there is a dev container there we are running that so it it will apply all these settings it will run the environment based on the image you can either do a docker file like i've done or you can have a an image that you host in a docker repository and it applies that entire environment sets up everything and you're developing as if you are have everything installed locally and i mean this is in the past with with what i've done with docker is i've i've basically um i've developed um some items and run it within a docker container and then you've got your yourself some bind mounts that you can set up and and there's a few catches with a hot reload and you get around those with angular to simplify it but this really feels like you you've got the application installed locally you're developing that your terminal is is correct everything is as if you are have it installed locally but it's only set up within your environment and this is really beautiful now if i want to switch to another environment i can switch it up or pass this to other users and let's say we had different applications within the organization where some use a different version of node and this this is a great example where that would come in handy because now you you tear it down again load up the different environment you've got a whole different set of configuration which doesn't affect this at all and once i'm done you can just close this again as well and close remote connection and once that's closed you'll see we've got vs code with all our extensions that are installed on the host itself and if i go to the terminal once again we're back in now our windows terminal and just to confirm there's no node installed on my on this host machine i just wanted to give a quick shout out to my colleague here peter pretorius so he was the one who showed me this and i wanted to give it a go myself and i was pleasantly surprised how easy it is to set up so thanks for that this is this is really a game changer i feel especially if you're work working with multiple environments um and you can switch it up easily and because it's in in the repository as well for for those who don't want to do this or have a different ide that's fine we can still they can still develop as usual they'll just have another folder called dev container that that will be ignored so if they're running webstorm or anything else but for anyone who wants to then connect you can i mean you can even just just do a git clone with your um vs code installed on your local machine and develop as usual there's nothing stopping you there if you've got a whole set of extensions that aren't defined and you just feel like you've got everything up and running then you're free to do that as well you're not bound to to running this now within the container is this literally just opens up another opportunity for those who want to fire it up start the container and well yeah create a container from the image and develop and once they're done tear it down again

Channel: filteredCode

Views: 23,039

Keywords: VS Code, Docker, Container, Remote Development, Share, Environment, Remote, Code share, Devcontainer, Dockerfile, Dev Container, Development Container, Visual Studio Code

Id: wm7Fy3ZTX_8

Length: 19min 50sec (1190 seconds)

Published: Thu Oct 14 2021