Debugging Apps in Remote Containers

[00:00:00]
>> Burke Holland: We are now connected to our container. So everything that we need to run this environment is already in this container. So if I come over here to the debug, I can do attach to functions here. And this will run.
>> Burke Holland: And it's running Azure functions here. All of this is happening inside of the containers not happening on my local machine.

[00:00:23]
And now I can access and say, let's set it to color=blue.
>> Burke Holland: Here we go, and we changed it to blue. All this is happening inside of the container. And I can add break points, and I'm completely inside of the container. To prove that to you, I'm going to create a new terminal instance, and you'll see, this is where I am.

[00:00:47]
If I hit ls, these are my files. If I do cd, this is the container that I'm inside of. So I am completely encased in a container. All of the dependencies that I need are just right here. Now the magical thing about this is that you can check this into GitHub, okay?

[00:01:07]
Can take this project, I can put it in GitHub, and include the devcontainer folder. And as long as you have docker and the remote containers extension installed, when you go to open it, it will just work on your machine. There is no environment configuration for you to do.

[00:01:24]
This should be earth shattering for every developer. Can you imagine pulling down a project, and it just works? There's no configuration like we're this close. We are very close to that sort of reality. Now there are a couple of edge cases with remote containers that we need to talk about.

[00:01:40]
The first one is how do you extensions work locally versus how they work in a remote container? The answer is they do, but you have to install them. Now in our extensions over here have new section, and it says devcontainer Azure Functions. So there's three extensions already in here.

[00:02:02]
Where did these come from? Come back to our devcontainer file. We've got a couple of different things in here that we can look at. The first one is just the name, the dockerFile, that's this dockerFile right here. The appPort is basically which port do you wanna expose on this container to use, 7071.

[00:02:24]
And if we go down here to the bottom, look, which extension do you wanna include? That how extension get in sold in a container. So that means, as the up developer there is an extension that you want developers to have inside of a container. Once to get there like Prettier, EsLint, to see sharp extension, whatever extension you want.

[00:02:44]
If you included in here, it's just there when they get in into the container. Whole environment ready to go. If you want to put other extensions int here. Like let's say we wanna do, I don't know. Let's say, we wanna do prettier. Prettier is not int here we want to make sure.

[00:03:00]
See there's a button that says install in devcontainer? Just click that, and it will install into the devcontainer. And then when it's done here, it will ask us to reload the editor. Give it a second to install reload required will hit that. It will reload and now it's gonna see it says installing devcontainer watch how much faster it is this time than it was the first time we did it.

[00:03:28]
>> Burke Holland: Boom, it's up.
>> Burke Holland: So if we look at the devcontainer, we've now got a EsLint and Prettier. Now if you wanted to include Prettier by default, we need to get the id of Prettier, which is this right here. So we would grab this, pull it across, put it in our devcontainer file down here like this.

[00:03:52]
>> Burke Holland: And it would automatically be installed whenever the container was loaded by whoever was loading the remote container.
>> Speaker 2: So if someone had loaded the remote container, and then removed it from their system, would these three extensions still be installed on their machine?
>> Burke Holland: No.
>> Speaker 2: No.
>> Burke Holland: No, they're only installed on the other side.

[00:04:11]
So what happens is VS code sets up a little server in the container. And it's just talking to that server. But that server has all of the environment information, and that's how it's working. So extensions actually installed on the other side, talking across that little server connection. Yeah, it's a very creative solution to an extremely complex problem.

[00:04:31]
Very simple solution really, if you think about it. If you can't tell I'm very excited about remote containers. I published an article today on freeCodeCamp about them because I really believe that, as developers if we all put remote container files in our GitHub repos. And everybody can do that we can standardize there, then that's the last time we have to say works on my machine might be.