Become a VS Code Power User

Setting Up Dev Containers

Steve Kinney
Temporal
Become a VS Code Power User

Lesson Description

The "Setting Up Dev Containers" Lesson is part of the full, Become a VS Code Power User course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to set up a development container by creating a devcontainer.json file using the command palette and configuring the container image, software dependencies, and extensions. He also mentions that dev containers provide a consistent development environment for teams and simplify the process of switching between projects.

Preview
Close

Transcript from the "Setting Up Dev Containers" Lesson

[00:00:00]
>> Steve Kinney: Let's go check it out, which is setting one up. And I get I went into one of these smaller projects inside the major like, repo. In this case, I'm gonna get rid of, like, some of this extra stuff I did just because I don't know how they all play together, they all work together in reality.

[00:00:17]
But when you are live coding and talking and not really paying attention to what you're doing, don't need to add that attribute into the system. So what setting one up is, you guessed it, open up the command palette, and you can guess the next few things too. A JSON file is gonna get created.

[00:00:37]
I don't think there's any regex in this one, in case. That makes a little bit happier. But I think the act of like, we could do the whole, like, large philosophical conceptual framework. But this one, I actually think the act of doing it is very illustrative to what it is like to set up a dev container in VS code.

[00:01:00]
So what do you do, you just I don't know, you type in dev container. So cool, in this case, rebuild and reopening container is not gonna work for us because we have not added dev container configuration files. So we are gonna do that. You can also attach already running containers if you have one running.

[00:01:21]
If you really love DevOps more than I do, you can do all sorts of fun stuff. You can clone a GitHub pull request into one. Lots of fun stuff. Let's do with the thing that I planned on doing instead of me just exploring. So, add Dev configuration files, all right.

[00:01:45]
So, is this going to be one that you use just in this project, or is this gonna be one that you kind of just have on your machine that you share amongst multiple projects? What is the answer to this question? The answer to this question is, do you plan on checking that configuration into source control?

[00:02:07]
Yeah, it's like, I just want my own little postgres in this little container that I use for lots of things. Sure, almost always you want it in source control unless you know that you don't. So we pick that option. Give it one second. Okay, so like what kind of container do you want, right?

[00:02:29]
For me, it's this one. But depending on what you are looking to do, you could choose, you want to run Alpine Linux or Kubernetes or have one that has node. Postgres kinda built together already in there, right? You'll roughly know what it is that you want. For our purposes, let's just pick the easy one.

[00:02:53]
Okay, then you're like, what is this? This is what version of Node do you want, right? Ignore the words that come after that. Choose the default one. Okay, what other software would you like to have involved? Do you need the GitHub CLI? All right, sure, the one password CLI, no.

[00:03:20]
So you can kind of take a look. This is act is for running GitHub actions, which is, if you need to test that stuff out, as you can see, I'm only on the A's. I'm not going through all of these. But various different tools, command line tools. I think yeah, the Angular CLI, the Android SDK, whatever you need in here, if you're doing some amount of machine learning or whatever you want to have Anaconda, I don't care.

[00:03:48]
Pick whatever you know you need. Turns out it's gonna be a JSON file in the end so you can edit it later. It's not a big deal. Just see if there's anything like fun that I want to add. Yeah, the AWS CLI. Whatever kind of stuff that you think that you need, you can add it as well.

[00:04:08]
Yeah, I'm only on the A's. I'm not doing this. So we hit two. We hit selected. We can keep the defaults or configure the options. I think for our purposes, we'll keep the defaults. And yeah, do I want a depend on YAML? Sure, why not? And it is going ahead, and it has created this file.

[00:04:31]
And pay attention this down here. This is important. Don't ignore it. If you ignore it you can go to the command palette and bring it back. It's fine, but it's here for a reason. I'm ignoring it for a second because I wanna talk about what's in here. But it went away.

[00:04:49]
>> Speaker 2: You ignored it for too long.
>> Steve Kinney: I waited too long. So now in a.devcontainer, we have devcontainer.json. Yes, another JSON file. In this case, we talk about what image I want. In this case, we want the TypeScript node image. Again, that's just a little Linux image that happens to have node, NVM, a few other things kinda, built in.

[00:05:18]
And then we're saying, hey. I would also The GitHub CLI and the AWS CLI, yeah, we can kind of check out some of these other things as well, which is, again, other like features that we might want to add if you want to forward ports. And so, if you do, for instance, we might choose to have like 5173 in here, right?

[00:05:45]
Which is like the VET one that we had earlier.
>> Steve Kinney: So cool, and any post create, any particular customizations, so on and so forth. What are you angry about?
>> Speaker 3: Comma on the previous configuration. I don't know what to have.
>> Steve Kinney: This is why people YAML and Tamil and not JSON because you know how often that bites me?

[00:06:18]
I'll give you a hint, it's three times a week. [LAUGH] And that's being generous [COUGH], right? There's certain things where, if you've done them bad for this long, they're now muscle memory to make the mistake. And that's where I live. So now we can play this game called so first of all, one thing I'm gonna just show you real quick is present working directory.

[00:06:38]
I am on my computer, right? This is my computer, here I am, I can do all sorts of things on my computer. Dev container has re open.
>> Steve Kinney: And so, if you don't have Docker Desktop installed, VS Code will be a hero. And try to install it for you will do some dragging and some dropping.

[00:07:09]
And you can see that VS Code is reopening. In this case, it looks like I am grabbing the, I think at this point, might be grabbing the container. I think I'm just grabbing the tools. And we are back right, and we are in here doing our thing. Let me go, sure install whatever you want., I don't care.

[00:07:34]
It's a container. It's not my real computer, it's putting lots of like, I should not have just said, put extra stuff in here while I'm not paying attention, cool. We've got one port exposed here as well. So now we got bash and look, I am the present working directory, not on my computer.

[00:08:06]
There's no user/Steve Kinney, I am in a container. This is just Linux, but like in effectively a virtual machine. But then if I look in here, it is my files as they are on my computer as well.
>> Speaker 4: It's like a snapshot into a play sandbox.
>> Steve Kinney: Yep, exactly, right?

[00:08:27]
And I could destroy whatever I want in here and it's all basic, I can just rebuild the container, and it's fine. But it's also like everyone else who has this dev container and hits reopening dev container. Will be in a dev container running Node 22 right with the AWS CLI and the GitHub CLI.

[00:08:49]
>> Speaker 5: Are those files in the container? Are those linked? I mean, is that really its own copy, or is it the same files?
>> Steve Kinney: I don't know off the top of my head, honestly. I'm assuming that it's probably my guess is like, that is yeah, let's.
>> Speaker 4: If you made a change in your workspace, hit save, you would be able to compare.

[00:09:19]
>> Speaker 5: Yeah, easy enough to check.
>> Speaker 4: Yeah.
>> Steve Kinney: So now I can go ahead and let's do the npm run dev, and let's see if I hooked up the port forwarding. I got npm install. All right, so we've got our different dependencies, MPM installed. We've got this port forwarded.

[00:09:42]
The one thing I need to make sure that I do is when I do NPM run dev, VEET has the ability to like whether or not like it is also available on the network. And technically while the port from local host forwards, like you've gotta be on the receiving end too, like for the development server.

[00:10:01]
It was a regular web server I should be good, but like, vet has to also, like, put itself on the network as well. So all you gotta do there is this host, and you should see that you get this little, hey, you're running something on port 5173 that's one of the forwarded ports.

[00:10:20]
Would you like to open the browser? 100% I do. I didn't start the express servers. That one's not running. But, there are a bunch of other interesting things that you can do in here as well to kinda create that exist consistent experience. Because now everyone that runs it inside this container will be on the same version of node.

[00:10:37]
They will have the AWS CLI. Could you set up environment variables? All that fun stuff. Absolutely, you can also do stuff like setting up extensions. Is it in here, let's see.
>> Steve Kinney: Where do I put my settings?
>> Steve Kinney: This kind of my stuff is gonna drive me nuts.

[00:11:24]
Is this one I want? The features,
>> Steve Kinney: So we can also set up, here's just some randoms. Obviously, I don't want all these. I don't want the Azure tools, because I don't have Azure set up on here. But some of the things that you can also do is begin to set up, like, have settings for that are true for this container.

[00:11:54]
So now, not only will they have the tools like the AWS CLI, the right version of node, but you can also like, go ahead and have the consistent settings for how VS Code should behave. I have to rebuild, and I did the auto-complete of rando extensions, but now if we go over in here, you'll see my local ones, right?

[00:12:26]
The same ones I've had from earlier in this are fun time together, plus, the AWS toolkit, right? Because, like, again, we installed the AWS CLI, right? Everyone will have GitHub copilot and the GitHub pull request and live share and prettier, and a few other ones are now like, by default.

[00:12:46]
But when you grab this repo with this dev container.json, right? With like, okay, what version of Node? What other tools do you need? What extensions, what settings? Anyone who jumps into this environment and does the reopening container will get a consistent environment. Now there's two people who like that, you and your team, because now you're on a consistent environment, or you the contractor who's on 17 different projects and does not need to re-change everything for every project.

[00:13:16]
You jump into one project, it's this version of Ruby, right, and Postgres with this setup, you jump into the next project, you're in a different container. It's this version of Ruby. And my sequel and whatever, right? And so, you can have these kind of unique to every given development situation.

[00:13:34]
If you're I don't need that. Probably you're right. If you're I need that. Probably you're right. And so it is I think that there are advantages of it. Yeah, having that consists it's basically what is more complicated, juggling because who among, even front-end engineers, come here for a second.

[00:13:55]
You've all, we all had that day, we lost NVM. You know what I mean? We've all lost that day. Or one version of NPM doesn't agree with another one, or whatever. If that's the thing, I work on one project, two repos, one project, all day, every day. So, depending on what you're doing, but is the complexity of juggling a bunch of versions and different configurations and setups, and all this stuff harder than having some of this stuff in place.

[00:14:28]
Yeah, yes or no, it will be the answer, no matter what. Right, like no. If you are always working on one project all the time and with no server-side dependencies, and you are connecting to like remote APIs, right? Great, good for you. I'm proud of you. If you are juggling yourself, then this simplified everything, cuz as far as your acting, you're acting like you're just in VS code, right?

[00:14:54]
But a consistent environment and can switch between projects, and everything is good, and everyone on the team. Because again, as a manager I know that I am giving week. Somebody didn't get stuff in done for two days. Because their development environment didn't work. Now, at least if it doesn't work, everyone gets nothing done for two days, right?

[00:15:16]
I had in like 2017, and insane setup where it was like there was a belief system I worked at SendGrid at the time, that you needed all of SendGrid running. In a box in order to, like, make CSS changes. Spoiler alert, you didn't, but that was too big for anyone computers you had to, like, remotely connect into some containers in a data center in Chicago, which was great when it broke, because it was like a snow day, right?

[00:15:44]
And it broke a lot, but this is obviously on your machine. Everything's like running in a consistent environment. And there's a lot to like about there's a lot that you can set the settings and the extensions and have these things like consistent amongst the team. Or inconsistent as you jump from project to project, I mean, have a container that is exactly what you need for this client, exactly what you need for this other client.

[00:16:07]
Either consistency amongst your team or your ability to like morph into different versions of yourself for different tasks. Both are cool, there's also a safety aspect, which is you are not like you are contained. I have friends who, for a living, bust out of Docker containers. They work in security, so I get it.

[00:16:26]
But generally speaking, the hand-wavy version, you're in a safe little container where nothing can go wrong. My friends are gonna text me later. But generally speaking, that case, and like I said, at this point you can instead of just using a deviator, you can actually just include a Docker file instead.

[00:16:45]
You can do all of those things. There is an entire course here on Docker containers, like this, if this is, you're more, join them together. But like at the sake of boring everyone who does not care about this, I'm not doing it. But yeah, and so for nowadays.

[00:17:05]
In temporal, we actually have a single binary that I can just spin up as a shell thing. But in the beginning, I did have to pull down six Docker containers, yada, and do all of those things. So, like you know if you need it, this is a godsend if you do need it, if you don't need it, you now know that it does exist if you ever do need it.

[00:17:24]
And my mission is complete.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now