Beautiful, we're at this awesome point in our application where we want to spin up both.
We want to spin up the frontend as well as the backend.
So our server pictures from this point on.
We'll work in both places extensively and technically, you can make an argument that we could set up
multiple terminals here.
I could spin up the server in, let's say, first one over here and then the create racked up one in
the first one.
So of course, I would need to navigate to the folder, declined one.
Hopefully, that is square, and technically we could do so.
I could even go back to my desktop and actually open up the terminal.
That is also an option.
But at least in my opinion, a better option is to use package by the name of concurrently, which essentially.
Is it going to be watching for both of them if there's ever a challenge?
Well, we'll restart that particular process.
And if you want to find out more info, you can follow the link that I left here for the package.
But the general idea is following where we want to install again.
It is my preference to use it as a dependency, but you don't have to if you are a rebel and if you
think that your approach is better, I mean, who am I to judge you?
So let's go over here.
Let's copy and paste the command.
So essentially, we're installing the package and then in the package, JSON will have to do some acrobatics.
And since it's very easy to make a typo, and since I'm pretty much always an expert on how to do it,
especially when I'm recording, yes, I will take my sweet time.
And I highly suggest that you do the same thing.
So first, let's start with something that we already know.
We already know how we can spin up the server.
In our case, we are just doing that with no admin server, and that is equal to the start one.
Now, the thing is eventually what I want is for my start command spent on both the server and the front
frontend how we can do that.
Well, first set this one up as server instead of stock.
And what is the approach here?
Well, let's just rename it.
One thing we need to remember, though, that now this one is AMPM Ron server.
So for a start, we just go with an open start for the server script.
We need to go with AMPM Ranch server.
So let's try that one else.
NPM are on server and I should see the log in the console, but I don't.
Why?
Well, because I'm an expert on making silly mistakes, but I save the package, Jason.
Of course not.
So let me save it.
Let me clear the terminal, and I'll let's try one more time and PM Ron and server.
And it looks like everything is cracked because I can see servers listening on port five thousand.
OK, that's a beautiful start.
Now I want to do the same thing with our client, and here to set up is following we need to come up
with a name.
So in my case, I'm going to go with client and landing multiple flavors.
You can either go with npm start.
Why?
Well, because remember for Create React app, that's the command in the client package JSON and very,
very important in the client package.
Jason, what is the command here start?
That's why we're using it in our server as well.
And then I want to go with hyphen hyphen prefix client.
Why?
Well, because that signals where I'm going to run the npm start now.
Alternatively, you can just go see the client and npm start.
This is really up to you.
Whichever option you prefer better.
And I think I'm going to go with this one.
So let me go to the package JSON and let me close the client one because knowing me, I'll probably
make the changes over there and then spend half an hour running around like a headless chicken looking
for the bug.
So let's go here with a client of mine and we want to go with ampm start half-and-half and then we're
going to go with prefix and then we'll set up our folder, which conveniently enough is client.
So let me start my server right now and let me go with npm run client.
Let me see here.
I saved the package JSON.
I mean, that would have been a disaster if I do the same thing twice, but it wouldn't be the first
time.
So let me wait a little bit.
I mean, sometimes it takes a little bit of time.
Hopefully, everything is correct.
And yep, I can see that the front end is spinning up on localhost 3000.
And since that is happening, you know what I can do as well.
I can actually set them side by side because, like I said, pretty much from now on, we'll be working
with both of them.
So it kind of makes sense if we have the initial set up.
So let's say here that I want the Visual Studio code and left hand side and then the browser on the
right hand side.
Again, this is a Mac thing.
It has nothing to do with my stack.
So client works, server works, and now we just want to combine them.
Correct?
So first, let me stop everything.
Let me clear my terminal and then we're looking for to read me and notice the concurrently package uses
the scapegoats, so we'll set up the command.
I mean, pretty popular is going with Dev, but I just find it annoying that I have to go npm run moron
and then the command that it's always my preference if I can shorten this up.
And that's why I was going to start.
I know that for some people, it might be a little bit confusing since it's the same command that we
used in React.
In my case, actually, it's the opposite.
I prefer that one.
And then we go with concurrently, and this is a doozy.
Usually, I make some kind of spelling error.
Luckily, I have my extension to catch that.
And then we have this violent kill others on fail, which sounds very scary.
The end of the day is just kills the command if one of them dies, so it kills all of them.
If one of them dies again, they probably could have come up with something less violent.
But who am I to judge?
I didn't create that package.
And in here, like I said, we have escape codes and then we want to run our commands.
We want to run server and client.
Correct?
That's what we have in a script.
So let's set this one up.
We're back in a package, Jason out of comma here, and let's go head, start and run.
I mean, this is definitely going to be a doozy, so I will take my sweet time concurrently.
And hopefully that is correct when we have the violent one kill.
Others on fail.
And then let's do those scapegoats.
Where we set up the dash and then the court and all right away set up both of them and in between them,
you want to run the commands, you want to go with an p.m. or on server, correct?
And then we have an opinion on client side of the same thing.
Artscape quotes mother one and then inside of it, let's Typekit sucker and PM run.
And then client.
And hopefully I didn't set this up in the client folder.
I mean, that would be just hilarious.
Now it's around a.m. start, but there's one last thing that I want to showcase, and I'll do that once
both of them are running.
So there's one tiny thing that I want to add because while I was developing, I was just hitting some
weird bugs if I didn't add that prefix.
So at the moment?
As you can see, the server is running at 5000, and I also can see nicely my front, then correct on
three thousand.
So let's try everything out, whether everything works so here in the server.
I'm just going to add some dummy code regardless of where you do that.
I'm going to go with log online.
Hello.
That's it.
That's all I want to do, and I'll add a few of them just so I can see in our terminal.
So non-audit, every time I make some changes, what is happening while no admin is spinning up my server?
Correct.
So that is cool.
Now also, let's try out the frontend where I'm going to go to the client.
And since I can see the dashboard page, I mean, kind of makes sense if I go to pages and then that's
board, and let's just add a page or here.
So let's hear it.
So I can see nicely that the refresh work I have the page and I'm starting up the server.
Now the problem is this one, these are lawyers, because what that means that we're also spinning up
the server and while developing the application, I actually ran into some issues.
If this is the case and in order to resolve those issues, I actually found a fix where where we have
the node one.
We're going to go with hyphen, hyphen, ignore and client.
So this is 40 node and be in package where essentially we're just ignoring this client one.
And as a result, when run making changes here, then we're not going to restart the server, which
is very, very important because again, at some point I was just hitting bugs and it was really annoying.
So with me, stop everything and where I have the server, I want to this ignore client, so I find
hyphen and ignore and then client.
So let's go back to our package.
Jason Nash Nash.
Nor a man we're looking for to client one.
And now what?
You'll notice that if I start up the server again, and of course, now what I'm talking about the server,
I'm talking about the entire thing.
So I'm talking about the application.
So from now on, if I say server, I'm not specifically talking about the express server.
I'm talking about the entire thing.
Now I'll try to remember, use the application word.
So basically, I'll say I'll restart the application.
But if I forget to, please keep in mind that both of them pretty much mean the same thing.
And what you'll notice right now that if I go back to the dashboard and if I remove, I'm not going
to see those console logs, and this was exactly what I was looking for.
So let me just try it out with the server, whether this works.
So instead of four console logs with hello, I'm just going to go with two.
So in this case, I can clearly see the two.
But if again, I'm going to do something on a frontend, I won't see those followers.
Why?
Well, because I only care about the front end.
And if your result is exactly the same, we're moving in the right direction.
I'm going to remove those silly, hollow logs from the server, and now we can move on to our next topic.