Dockerize your Development Environment

hello Internet so today we're going to go over how to docker eyes your visual studio code environment that you can have the same environment locally as you have in production also we're going to go over how to set up plugins global installs and settings so that you can have 1-click installs for new hires if you found this helpful don't forget to Like and subscribe and let's jump into the code today I'll be creating an example of a JavaScript environment but this could work for any language support by visual studio code I'm going to use create react app as an example so we can see things like hot reloading at the end the first thing you're gonna need to make sure you have installed is docker we're gonna obviously need docker to docker eyes our containers so make sure you have that installed first I'll put some links to the installers in the description below but pause the video make sure you have that person the first and only dependency we need ordered and docker is a plug-in all remote containers so you can search for that in plugins and you'll find this plug-in here so this is a plug-in created by Microsoft and allows us to run a container very easily from inside Visual Studio code once you have this installed you'll see a new icon down the bottom left I already had it installed so I already had the icon if you don't see it you can probably just close visual shoot your code and reopen it and you'll probably see it there and it will give us a couple of new commands like reopening container we're going to use this in a minute once we have created our container so let's get started the first thing we're going to do is create a new folder called dot dev container the naming is very important on this because the plug-in will actually look for this folder and when we open it in a container make sure it's dot dev container inside dab container we're going to create a couple of files the first one we're going to look for is the settings well we're going to create a new file in here and it's going to be called dev container dot JSON so into deaf container doc JSON and make sure you've called this deb container json a not doc tab container dot JSON because aiming again is super specifically we're going this is a JSON file so we're gonna give it our angle brackets and then we're gonna give it the first paying key of name the name is like an identifier for our environment so we'll see it actually running below make sure we're in the right in container we're going to call this yes and because we're creating a JavaScript requirement and then we're going to point it to a darker file we haven't created this yet but we are going to call it doc our file and that's the dockerfile will create after we create this file itself and then the app ports are the ports we want exposed and it takes an array of ports so we know create reactor runs on port 3 tell be thousand by default but you could give it more like eighty eighty three thousand one or whatever else you need to do who have open but we'll just leave it with three thousand burn now then we're going to give it some remarks which is the arguments we want to run with which is an array as well we're going to say - you and node because we wanted run in an old environment then we will give it a settings object and this is where things get a little bit interesting I'm going to identify a workbench in other theme here and give it all bald who by Westville and we'll install on a second and more importantly we're going to give it a default terminal oh you can see we have some refills here so we're gonna pick Linux because I'm on a Mac OS we want to see some differences at the end and we're going to set bash because i'm on z SH by default I want to see that it actually changed you okay after this we're going to create our post create command and the post create command is what we want to run after we create the image and that's going to be NPM install and then we're going to give some extension so the extensions we're going to give our we're gonna have to give the something like prettier so everyone likes have prettier Auto can make their stuff look good so what we're gonna do is we're gonna install so ESP and yen II prettier - es old now I'll show you where I got that name in a second it's not just something I'm memorized and then because we're using cobalt 2 we're gonna actually install that theme as well so we're gonna go to west walls and team and Obot who a that should be everything we need in this file and now let's create our docker file let's create a new file docker file and it has to be dr. pol because we named it here docker file an inside the dockerfile we're going to pick our version of node that we want and I'm going to pick the most latest stable version at the time of recording which is twelve point sixteen point one right we're going to run our global installs then which since we are using the prettier plugin will globally install prettier okay that's everything we should need get started so let's just first quickly check what version of node I have before we jump into the container 12.10 so we should see 12 points 16 point one when we actually reopen this in a container okay so let's try reopen it and it will take a couple of minutes the first time you launch this you install but then a darker smart enough to cash a lot of your commands so it doesn't take as long every time let's reopen this and you'll see it running uninstalling and deaf container here already so I'm gonna hit be build again just to make sure that we're getting it as expected let's jump back in as soon as this is installed okay so you can see now that we've got our lovely cobalt 2 team or if you wanted to set up themes for your whole company it's a way of doing it I don't think it's necessary but it's a good way to make sure that your stuff is running after you install it anyway I probably wouldn't ship it to everyone so they don't get your own preferences but more importantly what we want to see is what was installed when we had this so we have inside a dev container here prettier which we've said here and the cobalt theme so if you look at the names here so I got the names here from let's both team - cobalt - so that's where you would grab the names of these things so if you want to add another plugin straight into your container that's pretty easy you can just have a look and say if we say we want the es lint plugin we can let's just pick one or even video yes lint we can right click and add to that container doc JSON and we jump back to Deb container dot JSON it'll automatically add that awkward thing to type but it's definitely not kind of human readable but let's try running our container now though and p.m. start to run our application you okay now we have be open on port 3000 like we open above oh let's oh not over here you and well there we go so we have our create reactor running inside a container and just to make sure it's running as expected let's make a little modification here up J yes and delete this line I go hello world from an inner force piling lovely and then oh yes we have Auto updated it so hot reloading is working oh and then just to show that we have the correct node version in here yes we're on 12.16 and we're also am Bosch you can see here so this gets a lot of those fidgety requirements out of the way that sometimes can be a pain to document and share with your hold team so it's definitely worth setting up because anyone that wants it can have it there's a long list of commands that can be found for this file especially the settings file and I can be found on the site here so if I'll link this in the description below but your cedar is lots of different settings we can add I've just done a bare-bones basic setup so you could take some time and get your complicated setup if there's any more features you need I know this does it for me for most of my JavaScript projects it's pretty straightforward and if you want to have a look with my container you can grab a copy of it from my github in the description below so that's all from this video and if you found it helpful I'd love you subscribe and like the video so I can keep on creating good content like this [Music]

Channel: Codú Community

Views: 43,741

Rating: 4.9198217 out of 5

Keywords: docker, web development, software, javascript, technology, code, learn, docker tutorial, docker container, learn docker, reactjs tutorial, docker images, dockerfile, docker compose, docker introduction, docker containers, dockerize development environment, dockerize vscode, dockerize react project, docker tutorial for beginners, docker for development, docker for development environment, docker container tutorial

Id: fPtGgOJykTM

Length: 12min 25sec (745 seconds)

Published: Mon Mar 16 2020

Reddit Comments

[u/stunt_penis]

Can you combine the docker & ssh remote extensions to have a remote system hosting the dockers?

[u/[deleted]]

Your capitalizing the H in the Hello World from container without a period drove me crazy.

[u/amiibro888]

What is the benefit of doing this? So I can have different environments with different setups as docker images?

[u/nialljoemaher]

As you can tell it's a terrible habit. 😂

[u/amiibro888]

Here is a link with a complete guide from vscode https://code.visualstudio.com/docs/remote/containers