Get Started with Dev Containers in VS Code

today I'm going to show you how Dev containers can save you so much time configuring your development environment as developers most of us want to spend our time actually coding but often you're spending time trying to figure out what dependency you need to install in order for your code to work or you're on a call with your teammate who has a Mac and you're trying to figure out why the code doesn't work on their machine but it works on your windows or you're onboarding onto a new project and you're reading pages and pages and pages of documentation trying to figure out what you need to install in order for the code to run these are all common scenarios that Dev containers can really help with Dev containers are full featured development environments a Dev container houses its own app and dependencies such as the required tools libraries and runtimes needed to run the code in vs code you can use Dev containers with the dev containers extension this container has your technology stack and dependencies already set up for you when you open your project in the dev container your code will just work without downloading anything on your local machine and the best part is when connected to a Dev container your developer experience is exactly the same as if you open the project locally in vs code so let's dive into a demo now Dev containers work by using a Docker container so you will need to have Docker installed you can either install Docker locally on a remote environment or use other Docker compliance clis for simpler configurations like what I'm about to show you really don't need to do anything with Docker other than have it up and running I'm going to use this vs code remote try python repo to try it out yourself you can either clone this repo or in vs code you can run the try a Dev container sample command where you will see a list of sample repos for different languages to follow along you'll select the python repo let's just try to run this code not in a Dev container this would be what traditional local development looks like where you pull down someone else's code and just hope it works on your machine so when I go to run it I immediately get an error that the debug type python is not supported this particular error is prompting me to install the python extension and if we look at my extensions I only have the dev containers and GitHub co-pilot extensions installed but other common errors you might see are that you might have the wrong version of python installed or you might not even have it installed at all and I don't want everyone who pulls down this code to have to make sure that they have the right extension or versions or dependencies installed so that's where Dev containers come into play now this project already has a Dev container setup which you can tell from the dot Dev container folder which contains a Dev container.json file if I were working with a brand new project to add this dot Dev container folder it's as easy as installing the dev containers extension then running the command add Dev container configuration files from there you'll pick a template for your Tech stack and its version you can then customize your devcontainer.json further if needed before we go over the devcontainer.json for this repo let's talk a bit more about what this file is for the devcontainer.json contains the metadata used to configure your Dev container you can install things like languages and tool sets that your code needs to run and further customize the container for your development experience such as configuring different extensions and user settings by having this file be a part of the source code anyone who works on the project will be able to quickly spin up this customized Dev container now let's take a look at what properties this Project's Dev container.json configures the def container will have the name python3 and here we specify which Docker image we'll be using to create the dev container next we have a customization section that will allow you to customize tool specific properties so we are specifying that we want the code spell checker extension to come installed in our Dev container you might be wondering why we have vs code specific configurations and that's because Dev containers can be used with tools other than vs code using the dev container specification we'll link to that documentation in the description but for the purposes of this video we're just going to focus on vs code now we also have a ports attribute setting for port forwarding properties and finally we have a post create command this means that after the dev container gets created we will automatically run this pip install command for our requirements.tests which is really handy so let's now reopen this project in a Dev container to do that we'll run the reopen in container command now this will take just a few moments to spin up as it does you'll get a log of the dev container creation process as well as see that post create command run now when we look at our vs code it looks almost exactly the same with a couple of key differences in the bottom left we have this button known as the remote indicator which now is updated to show the name of my container from the dev container.json when you click on the remote indicator you will have a convenient entry point into to popular remote commands so for def containers we see a subset of five popular commands and you can always use the command palette to access your full set of commands next if we head to our extensions we now see two sections one for local installed and that's my Dev containers and copilot extensions that I had installed in my local vs code setup and the second is a Dev container section these are the extensions that were installed only in my Dev container so we can see that the code spell checker extension that we saw in the devcontainer.json customization setting as well as a few Python and linter extensions now when we were going over the dev container.json we saw where the spell checker extension was explicitly configured but there is no mention of the Python extensions so how did the dev container know to include them the answer is in the docker image that was specified in our project's devcontainer.json this is actually a pre-built image and this pre-built image has its own Dev container.json this images configuration then specifies Dev container features which are used to add dependencies in a standalone loan unit for example the python feature comes with the python and pylance extensions installed so that's how we are getting those installed in our Dev container by having this chain of references your projects devcontainer.json can stay much simpler and cleaner while still ensuring that behind the scenes everything your code needs to run is being configured this is a really powerful concept so in the future we'll post another video fully breaking down features and pre-built images alright now it's time for the Moment of Truth does the code run and voila this python app is up and running with no steps needed for me other than opening the code in a Dev container from here you can make edits debug commit your code everything that you're used to in your vs code development environment but now running in a container that has everything configured for you and as your dependencies change all you need to do is update your Dev container configuration for a seamless experience in the demo we showed you how to get started with Dev containers in just a few minutes we also went over some really cool Concepts like pre-built images features and templates if you want to learn more then you're in luck because over the next few months we're going to be posting a series of videos going over these more advanced concepts so make sure you're subscribed to our channel so that you don't miss out happy coding foreign

Channel: Visual Studio Code

Views: 73,331

Keywords: vscode, visual studio code, vs code

Id: b1RavPr_878

Length: 6min 59sec (419 seconds)

Published: Tue Sep 05 2023