Full Stack Compound Configs

[00:00:00]
>> Burke Holland: And now let's look at what's quite possibly the most complicated scenario that I could think of.
>> Burke Holland: This application has two components in it. It is the same Lamp app that we've been running. And let me go ahead and open this, and make sure I kill this, or it won't work very well.

[00:00:17]
It's the same Lamp app that we've been running. The difference is it is written in React, number one, and it has, as part of the same project, an API server. So there's an API server that runs on Express, right here in the server folder, and there's a React project that runs here.

[00:00:37]
Now for applications, or frameworks rather, like Vue and Angular and React, in order to run these things, there is a webpack development server that is included as part of their CLI. So if I come down here, let's add a new
>> Burke Holland: Terminal instance. If I say npm start on this, what's gonna happen is it's gonna run React Script's start.

[00:01:06]
This is going to fire up a webpack development server and then it is going to run it in the browser. Now this is what enables hot reload inside of View and Angular and all those frameworks. And it's part of what we love so much about those frameworks. The problem is that process is isolated away from everything else.

[00:01:25]
So it's difficult to get ahold of, and you can only debug it in the Chrome Dev Tools. We also have the Express server, so I'm gonna open up another terminal instance. And I'm gonna move into the server folder. And I'm gonna run npm start in that folder, and that's gonna fire up the little Express server that's running.

[00:01:46]
So now what I've got is I have a front-end app and I have a server app and they're both running simultaneously inside of VS code, two separate processes. Everybody still with me? It's a complicated set up, I know. I was trying to think of something very complicated to make this interesting.

[00:02:02]
So what we need to do is we need to be able to debug both of these. So I'm gonna come to our launch configs here, and we're going to add in a new launch config. I'm gonna chose Chrome. And now we should have a launch config here, and we do.

[00:02:19]
So we wanna configure a debugger for both of these processes. The first one is Chrome, which runs on port 3000. Let me just refer to my teaching materials here, make sure I don't make any mistakes. And then the web route is actually /src. So if you remember, right there, this is where our front-end app runs out of src, okay.

[00:02:41]
So we might change this to, let's change the name a little bit, let's do Launch React. So this will launch the debugger and attach to the React process that's running in Chrome, which we already talked about debug and browser apps. Now we need another configuration To debug the server portion.

[00:02:57]
So I'm gonna click Add configuration. And we're gonna get node, and we're gonna say node. We're gonna do launch, we need a node Launch Program, so let's do that. So now we have a node one, so we'll change this to Launch Server. And our workspace folder is almost correct here.

[00:03:20]
So I'm gonna change this to server/server.js, because that's the file that gets run. That's the little Express server here, see, server, server/js, that's where we're at. All right, so now we have two launch configurations in this same, single launch configuration file here. So if I come up here, you can see they're both here, so I could start the server.

[00:03:48]
And actually I need to come down here and make sure I stop it here. So I'm gonna start the server, okay, server's running and attached. And then I'm gonna come over and I'm gonna start the front-end. And I'm gonna hit debug and that's gonna launch Chrome which you should be used to by now.

[00:04:05]
And now look, we got both processes in our debugger and we can switch between the two. I'm gonna stop this for a second and show you something called compound launch configurations. So instead of starting both of these things, it would be easier if they both started at the same time.

[00:04:22]
So what we're gonna do is Launch the whole darn app. And [LAUGH] we're gonna say, Launch Server, look, and it's helping us. This is why people love VS code is cuz of stuff like this, and Launch React. And now come back to the debugger and look, Launch the whole darn app.

[00:04:44]
Let's go ahead and hit the green button. It's gonna launch the server, it's gonna launch React, they're both running. And now, let's look for app.js in our, and this is our, let's put a breakpoint here. And let's put one in the index.js file, which is in our routes, which is our Express Route.

[00:05:03]
And we'll go ahead and put this here. And I wonder, I needed to pass in an environment variable too so that will fail. But notice how this is not enabled, see how it's grayed out. If I switch over to, it's because I'm not looking at the right process, if I switch to server look, now it's red.

[00:05:27]
So we're switching back and forth here. And that's why that is the way that it is. Let me see here, let me go back and just add in, so I'm gonna stop this. Let me go back into our launch config and let me add in on the server.

[00:05:43]
We want env, and then we want API_BASE, and then let's look at the env file. Let's grab this.
>> Burke Holland: Got it.
>> Burke Holland: Let's put it back. What's the command PP there? Everybody see that? All right, let's run it again. Launch the whole darn app. Looks good, and now we should be able to look at our breakpoints.

[00:06:15]
Let's look at a breakpoint here, let's put one here. And we still have one in App.js, let's make sure we do, all right? So now, let's change the color, green, green is good, hit Go. And now we're broken in the React app. This is the React app, so we're debugging a browser app, okay.

[00:06:32]
And if I continue on, now we're debugging the Express app. So we're debugging the full stack app. Even though these are two separate processes entirely. We have created a compound launch configuration that allows us to launch it all at the same time, and debug everything as if we were looking at one entire application.

[00:06:51]
That's called compound launch configurations. And now you know, more than most people about launch configurations. I have just walked you through the nitty and the gritty