Dev Containers with Visual Studio Code

[00:00:00]
>> Let's get into dev containers with Visual Studio Code now. So being a program manager at Microsoft, works on Visual Studio Code. I'm obviously a little incentivized to tell you about this, but I'm also very excited about it. I think this is one of the coolest features about Visual Studio Code, that's why just cannot shut up about it.

[00:00:16]
So these are called dev containers that we're gonna get into with regards to Visual Studio Code. So first of all, if you're not a Visual Studio Code user, I'm just gonna invite you to go ahead, download it and try it out with me and you can uninstall it afterwards if you don't like it.

[00:00:29]
And the other thing I wanted to call out is Burke Holland has a free course on Frontend Masters of how to level up with Visual Studio Code. It's really great and totally free so you can totally share it with your friends and coworkers. Okay, so we're gonna be working with something called the remote containers extension.

[00:00:48]
So there are several remote extensions that have come out of Visual Studio Code recently. One of them is WSLs, so you can have your Visual Studio Code connected to WSL. One of them is SSH, so you can say any box that you can SSH into, you can now connect to Visual Studio Code too, which is really cool, but let me get into the remote containers one So we're gonna create a second Docker file for one of these projects, it doesn't really matter which one so you can pick any one of these, the one of the node ones.

[00:01:20]
So let's go ahead and go into our projects folder. We're not gonna do this in Hugo, we're gonna do it in. Let's do, which one is this? Let's do this one, the more-complicated-node application, okay? So this one has a Docker file that does lots of good things. And this is our production one that we have, right?

[00:01:41]
So we're gonna create another directory here inside of a more-complicated-node app one. And again, you could do this in anyone of them, doesn't have to be the more-complicated-node app. That's just what I'm gonna do in right now. I want you to create a new folder in here. This one is gonna be called .devcontainer, it's very important that this be called particularly that, because Visual Studio Code is looking for dot or period devcontainer Inside of .devcontainer, I want you to put a new file, which is gonna be a Docker file.

[00:02:15]
This is where you would define what your development environment looks. So let's just say for our sake here, we're gonna be doing it from node 12-stretch. And we need a couple things installed in here. So we're gonna say, RUN npm install --global, eslint and prettier. Let's say that those are the two tools that we need for our particular project.

[00:02:46]
But you can put anything in here, you can put stack tracing and all sorts of stuff in here as well. Any sort of dependency that you'll need. This is good for now though, this is everything that we're gonna need to get our container up and running. Notice that I'm not gonna put a CMD in this, because it's not actually about running any particular command, right?

[00:03:06]
It's about setting up an environment. Okay, so that 's all we need to do for our Docker file. Then next to that Docker file, same directory, in the devcontainer directory we're gonna create another file called devcontainer.json. Now, key here, not .devcontainer.json, it's called devcontainer.json. The name here is quite important so please make it called the devcontainer.json.

[00:03:34]
And it must be in the .devcontainer directory. And here we can give a bunch of information to Visual Studio Code so this is specifically for Visual Studio Code, of all the things that you want set up for your project. So you can give it a name, and that's the way you can kinda tell it apart from different windows.

[00:03:55]
So we're gonna call this one the Frontend Masters Sample, but you can call it whatever you want. We'll close that. You're gonna point it to where the Docker file is, so you can put your Docker file anywhere you want. Ours is just happens to be here, I'm gonna call it Dockerfile cuz that's where it is.

[00:04:15]
The appPort, This runs on port 3000, because that's where we made it. But you could expose all of the various different ports here that you need to. So I can put 8080 and blah blah blah, all that kind of stuff, but for now we're just gonna do port 3000.

[00:04:33]
runArgs, so this is how we're going to run the application. We're gonna do -u common node to run node. And then here, we're gonna do settings. And inside of settings, we can specify a bunch of different settings for Visual Studio Code itself. So let's say that it was very important that we wanted all of our users to use a particular theme.

[00:05:00]
I don't know why you would do that, but you can, right? So we're gonna do that, we're gonna say workbench, that's nice that lets you kind of autocomplete all these as well, right? When you do workbench.colorTheme right there. And here it has all of mine listed out, cuz it knows what they are.

[00:05:16]
And we're gonna do a theme from one of our other favorite Frontend Masters instructors, Sarah Drasner, called Night Owl. Okay, and then we're gonna do terminal, .integrated, .shell, .linux. Now why are we gonna do this? Because once you get into the container, once you're inside the container, programming against it, you wanna be able to specify which shell is the correct one.

[00:05:54]
So for example on my local computer I have a set so Zsh is my default shell. And when I get inside of this container it needs to be bash. And so I'm just gonna be specific about it and say that bin/bash is the correct terminal to use. I'm gonna say postCreateCommand.

[00:06:14]
This is where we get into the dependency thing, right? Because once we're inside the container, once the container is up and running, then we wanna run npm install, right? So that's what we're gonna do. After it's finished creating the container when I run npm install that kind of sidesteps the issue of not having the correct dependencies and node modules, all kind of stuff.

[00:06:36]
Okay, and then here, something else very cool you can do is you can specify which extensions that you want installed for your users, right? So someone can come into your project and let us say your project depends on everyone using ESLint and Prettier and unit testing, right? So you can go and install for them all the extensions that they are gonna need to run the project.

[00:06:57]
So first of all, we made Night Owl the default that does actually come with Visual Studio Code by default, so we have to specify, please install this theme. So we're gonna put sdras, for Sarah Drasner, .night-owl. And then will go and install the theme for us. Okay, we'll do dbaeumer.vscode-eslint, that will install the EsLint extension.

[00:07:26]
And we'll do it esbernp.prettier-vscode, and that will get the Prettier extension which is a code formatter for JavaScript. And the EsLint is a Lint term, in case that was not obvious. All right, so save that. Now there's a couple of things that you can do. Let's actually do it this way.

[00:07:51]
Right now I have here in my file explorer. I have all these different projects open, I wanna open it so it's just the more-complicated-node project. So for a second, I'm gonna minimize this. And I'm gonna open a more-complicated-node project just itself, right, just that in my Visual Studio Code.

[00:08:17]
So now if I click Open here. Notice the first thing it says, hey, I noticed you have a dev container configuration file, do you wanna open this in the container? So I'm gonna say, yes, I would, thank you. So down here you can see that it's opening a remote.

[00:08:47]
And click details here, and you can see it's actually running the Docker build in the background for my particular dev container. And so once it's done that, then it's gonna run it for me and it's going to attach me to the running container. I'm actually gonna be doing development inside of the container and everything would be working inside of the container.

[00:09:05]
But then it's going to be using those port exposing so that I could actually run the code locally in my local host. So this will take a second, there's a bunch of stuff for you to get everything working and ready. So if it didn't pop up, reopen in dev container, or if you wanna do it after the pop-up goes away, right now it doesn't show it on mine.

[00:09:31]
But in the bottom left there's two little angle brackets next to each other, right? If you click that, there should be an option to reopen in container. If you're using Windows right now and you're in WSL specifically, you have to get out of WSL. So you have to click that same logo and say reopen in Windows and then it will ask you.

[00:09:54]
>> All you did was just close and reopen.
>> Mm-hm, that'll pop up to you and reopen this container. So notice here now I'm totally different theme, right? And you can see here I'm in Dev Container Frontend Master Sample. And here if I click plus, if I say cat /etc/issue you can see here I'm inside of Debian, right?

[00:10:16]
So I'm actually inside of the container right now doing development, but it's the same project. If I say node index.js it'll run my project. And if I open this, You'll see that it's still running. You can even see that it opened it on a different port. I didn't even know it was gonna do that, but it just kinda does that for you.

[00:10:42]
It's coming back here to VS Code. I now have this little remote explorer over here. You can see here, Remote Explorer. It should tell me, there it's gonna be in here. So here the forwarded ports, I can actually see all the ports that it's forwarding and where they're going to and I can reconfigure them and a bunch of stuff like that as well.

[00:11:14]
Any questions?
>> Here's what I'm trying to think. So it's all great, you're in the container, you're doing the development there, I'm assuming that's where all your contents are saved, right? Now you wanna commit and basically follow your regular workflow. How does that work? Just the regular way?

[00:11:33]
>> So it's a bind bound, right? So it's actually writing to the host operating system.
>> So that's what it does?
>> Yep, good question. Did you get it to work? Did you get it to work?
>> I'm still working on it.
>> Still work on it?
>> Yeah.

[00:11:46]
>> Yeah, with Windows and WSL it's a little, working on that we're gonna make that a better experience but for right now you have to exit out of WSL and then reconnect it. Here at any time though I can say, clicking on this little thing down here. I can say Close Remote Connection or whatever you want.

[00:12:03]
And actually, just says, Close Remote Connection. This will send me back into normal VS Code land. And then down here you can always say reopen folder in container, right? So you can do all that stuff up at anytime. So let's see. So I wanna show you how to be a little bit evil to your coworkers, cuz it's fun.

[00:12:35]
Where is this? So we're just gonna open this again, and we're gonna open the more-complicated-node project. So right now I'm not gonna open the same container, we're gonna do it here in just a second. So here is a funny April fools joke to play on your coworkers, and do not do it to me, cuz I will be very upset.

[00:12:58]
So we 're gonna go back over here to our devcontainer.json. And instead of being on Night Owl, we're gonna make this Hot Dog Stand. So we're gonna make this Hot Dog Stand. And instead of installing Night Owl right here, we're going to put somekittens.hot-dog-stand. Now I'm going to warn this is going to burn your eyeballs as soon as we reopen this.

[00:13:27]
So if you don't want your eyeballs burnt, just don't click open a container right now. Okay, so now that we have that, I'm gonna click this and say, Reopen in Container, right? So it's gonna go through and rebuild the container. I'm gonna click Rebuild. So a Hot Dog theme I found out the other day is actually from Windows 3.1.

[00:13:56]
There was a theme that you can put on Windows 3.1 that was just the worst theme in the entire world. And someone recreated it for Visual Studio Code. And it is just horrifying. [LAUGH] I can not even look at it for very long, it gives me a headache.

[00:14:15]
So if you have a dev container for your work, just go change this to Hot Dog container and you get this just monstrosity. Okay, I have to stop. I'm so sorry to all the people I've harmed out there now. But pretty cool, and you can do all sorts of crazy stuff.

[00:14:34]
You can go on and make the font Times New Roman by default or something that. Or Comic Sans, we should have done Comic Sans. Anyway, next time. [LAUGH] All right, so we'll close remote connection. That's all I wanted to show you with Visual Studio Code. I think this is a truly compelling workflow for you and your team, right?

[00:14:53]
You could all just come up with your dev container and then as soon as someone just opens their Visual Studio Code with that, and there's, ey, we're gonna open this in a container for you. It will set everything up for you, just sit back and wait, and then once it's done, everything will just be working for you.

[00:15:05]
The thing I didn't show you but was happening is EsLint and Prettier were automatically installed as well. So if I started saving my work, it would automatically be formatting and wanting my code for me just out of the box, which is great too.