Dev Mode

[00:00:00]
>> Mike North: In this next section, we're going to get our dev script working again. If you remember, at the beginning of the course we had this nice project level script when package and project were the same thing. At the beginning of the course we could run PNPM dev and our back end would start up, our front end would start up, and importantly, any code that we touched would trigger a rebuild of some sort.

[00:00:29]
So we could just keep the app running, both the front end and the back end, and then go and edit our code and we could see the changes that we made take effect. This is part of what's awesome about being a web developer, either on the front or the back end.

[00:00:44]
Often you get that fairly immediate feedback loop that you don't quite get if you have big meaty compile step that can't be done incrementally. Let's get started. The first thing we're going to need to do is go to our UIS package JSON and this needs some work. Really what we have to think about here is in the context of our ui, what does dev mean?

[00:01:16]
Because this is a UI scoped package JSON at this point, I would argue this is the real dev for the ui. Just spinning up Vite's dev server mode and we're gonna grab this as the starting point for the dev script. We will hoist up to the top of the workspace, open up our workspace package JSON and we're gonna paste it and it needs some alteration here.

[00:01:46]
We can get rid of this thing here. Actually, let's call this dev Dev one for now. I want to show you why this is not going to work if we run this. Because remember, PNVM can run a command in each package in the repo and it can produce colorized output.

[00:02:07]
But here's what we get. Packages, models. It's running the DEV script and PNPM showing this. But PNPM run. It's good for tasks that exit. Right now what we're running into is there are dependencies here. As far as pnpm is concerned, dev is some arbitrary thing and it knows that models is the first thing it should try this on because it's the lowest level thing in the dependency graph right there.

[00:02:46]
It has to happen first. And so we're kind of stuck here. And if I control C this, you're going to see some evidence that, okay, great, now it tries the server and now it tries the ui. So what you're seeing is, well, finally, I exited this with a Control C.

[00:03:04]
And now it's starting up the other things, so it's falling short here. This is why I don't use dev for this. I like to use. This is a really nicely scoped npm package, good at one thing and that's just running multiple commands concurrently, and it's called concurrently. So we're going to modify this first.

[00:03:28]
We're going to have. You've got this first set of things. These are names of different tasks that will be printed to the console. It's a prefix. So we could say server models, client. These are colors that are used to color code. This is coming from the server, this is coming from the client.

[00:03:49]
Remember, this is going to be interleaved output from many different things that are running. So this is to stay sane and to know which output is coming from which of these tasks. Color coding is pretty nice. And then we have individual tasks that will run the server and the client.

[00:04:10]
But we want to do it differently. These are still leftover from the beginning of the course where we had dev server and Dev client. But we can do this differently. We're going to say PNPM filter. This is a way to say this should run on one package. Important to get them in the right order.

[00:04:44]
Ordering matters. Notice we've got three things. Three things. And now we need three things. So we want server models, client. So here we are going to have server models and client. This is definitely the point. How many columns wide are we at this point? We're already at the point where I'd say write a shell script.

[00:05:17]
We're gonna do that in a sec because, good God, but let's see this work. What's happening here? Concurrently command not found. We got to install it. Let's try it again. Nice. Okay, I'm noticing some things. Well, first, models doesn't have a color code. Pink might not be the right.

[00:05:50]
Might not be available. There we go. We've got servers, model and client. So you see how important it is to have that nice little prefix so you can easily see what's happening. But look, here's our backend. Interesting. No projects match the filters in that. Did we call it client instead of ui?

[00:06:14]
Of course I did, because I was saying the word client while I was typing. There we go. There's vite actually starting up. So in the end, oops, interesting, we'll figure that out. But clearly the client's running. Clearly the API is running. Let me see if that's a super easy thing to fix.

[00:06:44]
Well, raise condition or something. Maybe that error popped up because the client started first before the server was up or something like that. Anyway, here we are. Here's real data coming through from that data file that's being read. All coming from the JSON. So now we're back to.

[00:07:05]
Here's your server logs coming in. If I go back to a svelte component like the seed packet, interesting. So first on the website, and I'm just showing you that you could do it either way, you can always. Whenever you're expressing filters like this, you can refer to sort of the unambiguous package name, or you can refer to it by the folder name in that packages folder.

[00:07:33]
So this should work similarly well. Yep, there it goes. Yeah, to me, this looks like it's. At least from this standpoint, it's working fine. What's happening here? Did I delete something that was important from package JSON? Is svelte, svelte's in here. Restart language server. That was it, some stale language server state.

[00:08:10]
So sorry, the thing I was trying to prove here was if we go back and we find, I don't know, some interesting text that's a lot of gradient stuff. That's an icon. Look, there's some text being shown here. I hit save. There we go. I've ruined every seed packet with some text.

[00:08:35]
Everything's like, so this is happening immediately. We know that the dev server is working there on the ui. We know it's working on the server because I could go here and change the startup. Sorry, that's an index ts. You don't have to follow along with me here. Let's delete the word port because we're showing a full domain here.

[00:08:57]
So going to scroll to the bottom so we can all see it. Save. Look, we just bumped the server, so changes happen instantaneously there. The tricky bit is of course, models. And if we went here and said version and hit save, you can see there's a file change detection incremental compile.

[00:09:23]
That means that in the dist folder, we're getting a nice new build. Now we're back to this great productive dev script. I can touch any file. Those changes take effect immediately. I have a working client server set up, despite it all being in a monorepo. Now, the only downside here, I'll be blunt, and you can script your way out of this is this is a place where you do have to keep up to date with all of the different packages that are in your repo.

[00:09:55]
But there are ways to get around this with other tools. If you really wanted to use concurrently for this, what I would do is I would just make a script that lists the packages and then builds the concurrently shell script, which I told you I would do. Now I'm going to do it because I think it's a little crazy to have something that that complicated in an NPM script.

[00:10:23]
So I'm going to in the root of my project, make a scripts folder, make a shell script there. Did I get that wrong other way? And get these lined up real nice just so we can see what's going on. And I think we can get rid of these escaping things too.

[00:11:13]
Continue, continue, continue. So again, just like three commands running at the same time, color-coded. Chmod, if you're still learning your UNIX commands, we're just making this an executable script. One more thing we have to say PNPM DLX, which if you're an NPM user, this is PNPM's version of NPX.

[00:11:49]
Download Execute DLX and there we go, that first little blurb you saw here. This is the downloading on the fly, even if you didn't have concurrently. Now we can also just do pnpm dev and it calls the script. So now we have a working dev script.