Easy VS Code Docker Remote Containers | Dockerize Development Environment Easily with VS Code (2020)

[Music] in this video i'm going to show you how to create a docker container in vs code we'll set up the environment and deploy it so that anyone can use this container on any machine and the environment will be the same no matter what no more works on my machine problems if you find this video helpful like and subscribe if you want to learn how to do other cool things inside of vs code check out my vs code superhero course at vscodehero.com the link is in the description below really quick what is docker well docker is a tool that makes it easy to create deploy and run applications it uses containers think of a container sort of like a virtual machine but not instead of creating an entire virtual machine with its own operating system it allows the applications to use the same kernel as the system that it's running on this makes it super fast i'm not going to get into all of the details on exactly how docker works but just think of a container as a completely separate and isolated environment it has its own os memory cpu network and so on so let's get started first you'll need to install docker on your machine so go to docker.com get started if you're on windows or mac you'll need to download and install docker desktop if you're on linux you'll find instructions here on how to get docker installed after that we'll also need the vs code extension remote containers after you install it you'll see a new tab and this new icon in the bottom left corner this lets you know if you're in a container so now let's create one i have a fresh create react app here and we're going to turn this into a container so let's open up the command palette f1 and we'll search for remote containers add development container configuration files now we can select the type of environment and since this is react we're going to choose node.js then we'll choose the version 14 which is the default notice that it pops up here that we have a dev container do we want to reopen it in a container and we'll do that in just a minute so for now we're going to ignore that you'll notice here that we now have a dot dev folder and within it we have two files the devcontainer.json and the dockerfile first we're going to look at devcontainer.json this is the configuration file for our container the first item that we see here is the name of the container and this can be anything that you want and then we have the build information here we have our docker file which points to our you know docker file and then args and this is where we can set the version of node that we want to pull in after that we have settings and these are actual vs code settings that are specific to this container this is part of what makes developing inside of a container so great we can set specific settings so that our entire team is working in exactly the same environment with the same settings i normally use bash so if i open up the terminal you'll see that i'm using bash i'm going to change this to zsh a side note when you choose your base image most are pre-configured with all the tools that you'll need for instance node.js comes with git zsh and other tools already installed and ready to go after that we have our extensions again these are vs code extensions that we want to include with this container so if there are any specific extensions that you want everyone who uses this container to use you'll add those here the easiest way to do that is to go to the extensions tab and then let's add bracket pair colorizer so if we right click on it we can say add to devcontainer.json this is much easier than typing out the odd extension identifier string now because we are working with react we'll need to forward the port so let's uncomment this line and we're going to forward port 3000 add a comma here now remember that this container is isolated from everything else so in order to access it we have to forward the port next we're going to configure our post create command so let's uncomment this as well and we're going to run npm install so after the container is created npm install will run and that will get all of our packages installed lastly we're going to add a container environment variable because we're working with react we need to add a flag in order for react's hot reloading to work properly we're going to add container env within that we're going to add chocodar use polling and we're going to set that to true we'll save that and that's going to be it for this file next we're going to look at the docker file for most docker containers you'll see a lot more in this file but for this example we're not going to modify it at all but this is where you'll specify where the base image is coming from for this container optionally you can add additional commands to install other packages or dependencies in the container so traditionally you could use apt-get update to make sure that you have the latest software and then install any other packages that you might need now it's time to see what all of this does so let's open the command palette f1 and we're going to search for remote containers rebuild and open in container the first time that you do this is going to take a while it needs to download all the dependencies and after it's gone through the build phase once it will cache everything and the subsequent rebuilds will be much faster if we click on show log you'll see which step it's at now remember that we set the terminal to zsh so let me open the terminal and we'll start a new terminal here and you'll see that we are running zsh now so if i move to the root directory let's cd back a couple of times and then we'll list this out you can see that i'm not on my local computer anymore i'm inside of the linux container that was created so let's go back to workspaces and then back into code and this is where a project folder is now let's start the react app by running npm start alright now we can open it on our localhost 3000 we can do this because we have forwarded port 3000 from our container so back in vs code let's go to our app.js file and let's edit something here this paragraph will say i'm in a container all right we'll save that and we'll go back to our browser and we can see that hot reloading is still working this is not running on the local machine this is running in our container now let's have some fun we set the terminal to zsh but let's customize it so we're going to create a zshrc file and we're putting that inside of our dev container folder so in here we're just going to export zsh we'll make that equal to root oh my zsh so on the linux container oh my zsh is installed in root then we'll set zsh theme is going to equal cloud and we'll set source zsh oh myzsh.sh all right we'll save that file and then in our docker file we need to copy the zshrc file into the root of our container when it loads so right after this we're going to copy the dot zsh rc file and we're going to put it in root and then dot zshrc all right we'll save that let's go back to the terminal and we'll stop the react app now remember what the terminal looks like right now now let's reload it so f1 to open the command palette and then we'll run remote containers rebuild container now it should rebuild very quickly because everything is cached now now you see that our zsh theme has changed pretty cool let's make one more change before we send this out for everyone to use let's set the default theme so let's go back into the dev container close the sidebar give us some more room here now in our settings we're going to set the workbench theme color theme and let's set that to github lite now i don't have github lite installed so you can see that it's giving me this error here and it says that the theme is unknown or not installed under extensions we'll need to add that as well so it's github dot github dash vs code dash theme so we'll save that and then let's rebuild so f1 to open the command palette and then rebuild container awesome now we have a default light theme installed and now we can send this out to our team go ahead and upload this to github for everyone to enjoy okay okay i would never do that to anyone let's change this to my code stacker theme so let's see if we can bear this light theme for a minute here and let's change this to code stacker theme and let's change the github theme here under extensions and that's code stacker dot code stacker dash theme all right let's save that and rebuild it f1 rebuild container [Music] much better all right i'll upload this to github i'll put the link in the description below so you can play around with it if you want to learn more about how vs code can make your coding life better check out my vs code superhero course the link will be in the description below that's going to be it for this video like this video to help me out and subscribe if you haven't already for more videos like this [Music] you

Channel: codeSTACKr

Views: 34,161

Keywords: docker, dockerize, docker in vs code, docker vs code extension, docker vscode, docker vscode extension, vscode remote development docker, vscode remote docker container, docker tutorial, docker container, learn docker, reactjs tutorial, docker made easy, docker build, docker files, docker newbies, beginner docker, docker basics, web development, vs code, visual studio code, docker tutorial for beginners, dockerize react app, vscode docker, vscode docker development

Id: KFyRLxiRKAc

Length: 10min 33sec (633 seconds)

Published: Mon Oct 26 2020

Reddit Comments

[u/codeSTACKr]

In this video, I'm going to show you how to easily create a Docker container in VS Code. We'll Dockerize your development environment and deploy it so that anyone can run this container on any machine and the environment will be the same no matter what.