Okay, so now we're going to just add a couple small things to our back end to make this a little more
efficient.
So I want to install Nodemon, which will make it so we don't have to keep restarting the server after
we make a change.
And I also want to install concurrently because right now if we want to run our backend API on 5000,
we have to do that and then run our front end react dev server in a different terminal.
I'd rather just have one command that starts both.
Okay.
So what we're going to do is just stop the server here and make sure you're in the root and we're going
to NPM install and we're going to install these as a dev dependency because we don't need these in production.
So dash, uppercase D and then Nodemon and also concurrently.
Okay, so once those are done, we can look in our root package.json and you should see both of those
as dev dependencies.
Now we're going to add a few scripts here.
So the first one I want to add is to run Nodemon NPM start will run node and then our server.js.
That's what we want in production.
But let's go ahead and add another script here and let's call this server because this is, this is
going to be where Node Nodemon runs our back end server file.
So we'll say Nodemon and then back end slash Server.js.
All right.
And we can check that out.
If we save that, we come down here and we say NPM run server.
You'll see Itrillionuns on 5000 and it's going to continuously watch.
And when we make a change, it'll just update.
That way we don't have to reset, restart the server.
Now we should also have a command to run the client, the front end React server or else we're going
to have to CD into front end and then run NPM start.
So let's add another script here.
Let's call this one client.
And what we want this one to do is run npm start, but we want to run it in the front end folder so
we can add dash dash prefix and then front end.
So what that will do is it'll first go into the front end folder and then run npm start so we can test
that out.
If we save and we do NPM run client, that should start up our React server.
Okay.
So you can see it started up 3000.
Good.
Now let's stop that.
And the last one I want to add here for now is a dev script.
So npm run dev and I want that to run both.
So this is where concurrently comes in.
So we're going to say concurrently and then we want to run NPM run server.
Now we do have to escape the quotes here, so we're going to do a backslash and then a double quote
and then NPM run server and we're going to put another backslash and another double quote.
And then after that we want our second command, which is going to be the client.
So let's say backslash, double quote, NPM run client, and then another backslash, double quote.
So altogether it should look like this.
So it's basically just running both of these.
Okay.
So it'll start up our backend API and then our client side react dev server.
So let's save come down here, let's say NPM run dev.
And it should run both.
You saw it started 5000, now it's starting 3000.
So as you can see here, I'm in my front end React app.
Also, if I go back and I reload my localhost 5000 API products, that's also running.
And we only had to run a single command.
We didn't have to open up two terminals to do that.
Now, one other thing I want to do before we fetch the products from our back end, from our front end,
is just add some environment variables or the ability to add environment variables, which are values
that you can access throughout your entire your entire back end.
So we'll have one for our port because right now we're just hardcoding it in the server.js and that's
also where we'll put like our MongoDB Uri, that's where we'll put our PayPal API key.
Anything that that you want to be hidden.
So we'll do that next.