Challenge & Solution 7: Analyze & Monitor

[00:00:00]
>> Mike North: So what we're going to do is create two new launch configurations. One is for starting up our client with an environment variable in place. So we've got a web pack plug in that will print out a nice little tree graph that will show us like, our app is how big, and how does that break down.

[00:00:20]
How many kilobytes are coming from react and how many are coming from react dom? So, we'll do that and then, second, we will use nodemon to continuously, it's just, this is a commonly used tool for node development. And it will just restart a nodejs program any time a file is changed.

[00:00:39]
Currently, if you were to edit files on the back end of this project, you'd have to actually stop the debugger and then start the program again, in order for those changes to be incorporated. Like to be taken into account. Nodemon it's just the same as life reload or as what we're using on the client right now.

[00:01:00]
Some of you may have like hot module loading working.
>> Mike North: So I'm gonna go through and solve these right now. The first thing we need to do is, I'm just gonna copy this so you remember what that environment variables is called, and we're gonna open our launch.json. Here, we're going to add an environment.

[00:01:31]
Actually, I can just create a copy of this. I'll leave that here, copy that, paste it.
>> Mike North: And we're just gonna call this Launch Chrome and ANALYZE. Is that how you spell it? Close enough and,
>> Mike North: Sorry, it's not Chrome that's interesting here. It's building our program, which is the node thing.

[00:02:07]
So it is front end, but keep in mind it's the back end that builds it. So we're gonna call this ANALYZE, and I'm not gonna start with this. I'm gonna start with a Launch Program. So we'll call it Launch Program.
>> Mike North: And the program is at server/index and we can pass in env is ANALYZE true.

[00:02:46]
Let's see. Sure, I'll make it a string. Let's see how this works. So we can now, in our debug configuration. We should see,
>> Mike North: You should see a new thing here, launch program. Hit it and address is in use. We can fix that.
>> Mike North: One more time.
>> Mike North: All right, it's building.

[00:03:33]
>> Mike North: Should be building
>> Mike North: Okay, it's opened somewhere, there it is, it has opened. So, this is showing us what our bundle looks like. And we can drill down and see like this is the part that's coming from React and so on. So now we have a new thing that's built up based on our environment variable.

[00:04:02]
The last thing we're gonna do here is,
>> Mike North: We wanna deal with this nodemon thing and it turns out this is a common enough need that there is a built in nodemon thing that will just work.
>> Mike North: So this is saying this is a node thing we're gonna launch.

[00:04:29]
The name is called nodemon. Here's the executable we're gonna use. This is another example of like run time executable. There's our app. Restart as true integrated terminal never open, fair enough. So let's run it.
>> Mike North: All right so what we've got now if I go to index.JS, and I set a break point here.

[00:05:13]
I can restart,
>> Mike North: Come on, you can come back.
>> Mike North: All right we'll try again.
>> Mike North: So run it, okay, so we stop there. We can let it continue forward and if I were to change something here and save it's stopping the debugger and restarting it again. Delete, save and then we're hitting it again.

[00:05:56]
So play through, down, save and we're hitting it again. So it's basically restarting the program every time a file and particular set of subset of our project is changing. Allowing us to work just as easily as we do on the client with something like live reload or every time we save we see the browser refresh.

[00:06:15]
Here it is on the server, and it just kinda works. So really nice to have this kind of set up and to be able to integrate it so nicely with Visual Studio code.