1 00:00:00,350 --> 00:00:05,600 Okay, so now we're going to just add a couple small things to our back end to make this a little more 2 00:00:05,600 --> 00:00:06,140 efficient. 3 00:00:06,140 --> 00:00:11,420 So I want to install Nodemon, which will make it so we don't have to keep restarting the server after 4 00:00:11,420 --> 00:00:12,680 we make a change. 5 00:00:12,680 --> 00:00:19,640 And I also want to install concurrently because right now if we want to run our backend API on 5000, 6 00:00:19,670 --> 00:00:24,810 we have to do that and then run our front end react dev server in a different terminal. 7 00:00:24,830 --> 00:00:27,800 I'd rather just have one command that starts both. 8 00:00:27,920 --> 00:00:28,310 Okay. 9 00:00:28,310 --> 00:00:33,980 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 10 00:00:33,980 --> 00:00:39,980 to NPM install and we're going to install these as a dev dependency because we don't need these in production. 11 00:00:39,980 --> 00:00:46,340 So dash, uppercase D and then Nodemon and also concurrently. 12 00:00:50,090 --> 00:00:55,640 Okay, so once those are done, we can look in our root package.json and you should see both of those 13 00:00:55,880 --> 00:00:57,620 as dev dependencies. 14 00:00:57,650 --> 00:01:00,860 Now we're going to add a few scripts here. 15 00:01:00,860 --> 00:01:08,150 So the first one I want to add is to run Nodemon NPM start will run node and then our server.js. 16 00:01:08,180 --> 00:01:09,980 That's what we want in production. 17 00:01:09,980 --> 00:01:16,580 But let's go ahead and add another script here and let's call this server because this is, this is 18 00:01:16,580 --> 00:01:20,990 going to be where Node Nodemon runs our back end server file. 19 00:01:20,990 --> 00:01:27,020 So we'll say Nodemon and then back end slash Server.js. 20 00:01:27,850 --> 00:01:28,180 All right. 21 00:01:28,180 --> 00:01:29,500 And we can check that out. 22 00:01:29,500 --> 00:01:34,810 If we save that, we come down here and we say NPM run server. 23 00:01:36,040 --> 00:01:39,970 You'll see Itrillionuns on 5000 and it's going to continuously watch. 24 00:01:39,970 --> 00:01:42,730 And when we make a change, it'll just update. 25 00:01:42,730 --> 00:01:45,730 That way we don't have to reset, restart the server. 26 00:01:45,940 --> 00:01:51,520 Now we should also have a command to run the client, the front end React server or else we're going 27 00:01:51,520 --> 00:01:55,570 to have to CD into front end and then run NPM start. 28 00:01:55,570 --> 00:01:58,150 So let's add another script here. 29 00:01:58,150 --> 00:02:00,010 Let's call this one client. 30 00:02:00,790 --> 00:02:07,930 And what we want this one to do is run npm start, but we want to run it in the front end folder so 31 00:02:07,930 --> 00:02:12,390 we can add dash dash prefix and then front end. 32 00:02:12,400 --> 00:02:19,450 So what that will do is it'll first go into the front end folder and then run npm start so we can test 33 00:02:19,450 --> 00:02:20,020 that out. 34 00:02:20,020 --> 00:02:26,260 If we save and we do NPM run client, that should start up our React server. 35 00:02:28,560 --> 00:02:28,950 Okay. 36 00:02:28,950 --> 00:02:31,320 So you can see it started up 3000. 37 00:02:31,320 --> 00:02:31,790 Good. 38 00:02:31,800 --> 00:02:33,150 Now let's stop that. 39 00:02:33,150 --> 00:02:38,640 And the last one I want to add here for now is a dev script. 40 00:02:38,640 --> 00:02:41,760 So npm run dev and I want that to run both. 41 00:02:41,760 --> 00:02:44,010 So this is where concurrently comes in. 42 00:02:44,010 --> 00:02:51,810 So we're going to say concurrently and then we want to run NPM run server. 43 00:02:51,840 --> 00:02:58,440 Now we do have to escape the quotes here, so we're going to do a backslash and then a double quote 44 00:02:58,440 --> 00:03:05,430 and then NPM run server and we're going to put another backslash and another double quote. 45 00:03:05,430 --> 00:03:09,360 And then after that we want our second command, which is going to be the client. 46 00:03:09,360 --> 00:03:17,250 So let's say backslash, double quote, NPM run client, and then another backslash, double quote. 47 00:03:17,280 --> 00:03:19,380 So altogether it should look like this. 48 00:03:19,380 --> 00:03:22,170 So it's basically just running both of these. 49 00:03:22,260 --> 00:03:22,500 Okay. 50 00:03:22,500 --> 00:03:28,030 So it'll start up our backend API and then our client side react dev server. 51 00:03:28,030 --> 00:03:32,980 So let's save come down here, let's say NPM run dev. 52 00:03:34,060 --> 00:03:35,340 And it should run both. 53 00:03:35,350 --> 00:03:38,740 You saw it started 5000, now it's starting 3000. 54 00:03:38,740 --> 00:03:43,270 So as you can see here, I'm in my front end React app. 55 00:03:43,270 --> 00:03:49,930 Also, if I go back and I reload my localhost 5000 API products, that's also running. 56 00:03:49,930 --> 00:03:52,060 And we only had to run a single command. 57 00:03:52,060 --> 00:03:54,850 We didn't have to open up two terminals to do that. 58 00:03:54,860 --> 00:04:00,730 Now, one other thing I want to do before we fetch the products from our back end, from our front end, 59 00:04:00,760 --> 00:04:07,060 is just add some environment variables or the ability to add environment variables, which are values 60 00:04:07,060 --> 00:04:11,500 that you can access throughout your entire your entire back end. 61 00:04:11,500 --> 00:04:18,670 So we'll have one for our port because right now we're just hardcoding it in the server.js and that's 62 00:04:18,670 --> 00:04:24,400 also where we'll put like our MongoDB Uri, that's where we'll put our PayPal API key. 63 00:04:24,430 --> 00:04:27,040 Anything that that you want to be hidden. 64 00:04:27,310 --> 00:04:28,480 So we'll do that next.