1 00:00:00,170 --> 00:00:00,620 All right, guys. 2 00:00:00,620 --> 00:00:02,660 So we're getting ready to deploy to render. 3 00:00:02,660 --> 00:00:06,980 There's just a couple things that we need to do to get that set up. 4 00:00:06,980 --> 00:00:13,610 So first of all, we're going to go into our server.js and we're not going to have our React dev server 5 00:00:13,610 --> 00:00:18,350 in production like we do locally where we run it on Port 3000. 6 00:00:18,380 --> 00:00:27,470 We want the root of our application, our server to load the, the, the built version of React, the 7 00:00:27,470 --> 00:00:28,850 production version. 8 00:00:28,850 --> 00:00:30,950 So we're in the server.js. 9 00:00:30,950 --> 00:00:34,730 Let's go down, we're going to go under. 10 00:00:34,760 --> 00:00:41,750 Let's see, let's go right under the uploads right here and we're going to just do a test to see if 11 00:00:41,750 --> 00:00:42,920 we're in production. 12 00:00:42,920 --> 00:00:52,490 So we'll say if process dot env dot node underscore env if that is equal to production. 13 00:00:53,830 --> 00:00:58,240 Then what we're going to do is set. 14 00:00:58,970 --> 00:01:03,140 The react build folder to actually. 15 00:01:03,870 --> 00:01:05,010 Yeah, we can just do this. 16 00:01:05,010 --> 00:01:10,020 So we're going to set the React build folder, which is in our front end slash build. 17 00:01:10,170 --> 00:01:10,340 Okay. 18 00:01:10,380 --> 00:01:15,750 Because if you're, if you're building a React app and you do NPM run build, it creates a build folder 19 00:01:15,750 --> 00:01:17,400 with all your static assets. 20 00:01:17,400 --> 00:01:20,160 So we're setting that to be a static folder. 21 00:01:20,160 --> 00:01:28,530 And then we're saying any route that is not, you know, not these routes for our API is going to be 22 00:01:28,530 --> 00:01:30,990 redirected to index.html. 23 00:01:30,990 --> 00:01:35,100 So app dot get star and then we're just using send file. 24 00:01:35,100 --> 00:01:41,070 So basically we're just saying load the index.html that's in the front end build folder which we just 25 00:01:41,070 --> 00:01:42,270 made static. 26 00:01:42,540 --> 00:01:43,080 Okay. 27 00:01:43,110 --> 00:01:50,580 Else so if we're not in production then we'll go ahead and just do this, which is just saying API is 28 00:01:50,580 --> 00:01:55,650 running because if we're not in production then we're using the React dev server. 29 00:01:56,070 --> 00:01:56,370 All right. 30 00:01:56,370 --> 00:01:57,930 So we just want to do that. 31 00:01:57,930 --> 00:02:03,790 And then we also want to create an NPM script to build from the root. 32 00:02:03,790 --> 00:02:09,789 Because when we deploy to render, we're going to have we're going to enter a command to build, but 33 00:02:09,789 --> 00:02:17,020 we don't want to, you know, run it from the just the server because it's going to it has to be run 34 00:02:17,020 --> 00:02:18,520 in the front end folder. 35 00:02:18,520 --> 00:02:25,240 So in our root package.json, let's create a script called build. 36 00:02:26,040 --> 00:02:29,700 And this will also run NPM install on both sides. 37 00:02:29,700 --> 00:02:33,540 So we're going to set this to NPM install. 38 00:02:34,230 --> 00:02:41,340 And npm install dash dash prefix front end. 39 00:02:41,340 --> 00:02:45,030 So that will run npm install in both the back end and front end. 40 00:02:45,030 --> 00:02:51,510 And we're going to run npm run build dash dash prefix. 41 00:02:52,110 --> 00:02:54,060 In the front end. 42 00:02:54,690 --> 00:02:55,350 Okay, so. 43 00:02:55,350 --> 00:03:00,660 So that way we can run npm run, build from the root and it will do all of this for us because it's 44 00:03:00,660 --> 00:03:04,900 going to do that on the server on render when we deploy. 45 00:03:04,920 --> 00:03:06,990 So let's save that. 46 00:03:07,050 --> 00:03:12,750 And now if we run NPM, run, build from the root. 47 00:03:13,420 --> 00:03:17,530 It should build into the front end folder. 48 00:03:17,530 --> 00:03:22,780 So now if we look in front end, we'll actually let's let it finish, but it should create a build folder 49 00:03:22,780 --> 00:03:23,890 in the front end. 50 00:03:26,070 --> 00:03:28,650 Creating an optimized production build. 51 00:03:31,250 --> 00:03:38,870 And you don't actually have to do this before you you push to to render because this happens on render 52 00:03:38,870 --> 00:03:40,040 once you push. 53 00:03:42,150 --> 00:03:42,480 Okay. 54 00:03:42,480 --> 00:03:45,240 So now if we look in front end, now there's a build folder. 55 00:03:45,240 --> 00:03:52,680 So basically our server, what we just did in our server is point to that file to load that file if 56 00:03:52,680 --> 00:03:53,820 we're in production. 57 00:03:53,820 --> 00:03:57,900 Now let's go into our dot env and let's set this to production. 58 00:03:59,530 --> 00:04:00,820 Just temporarily. 59 00:04:00,820 --> 00:04:07,810 And then let's go ahead and do just NPM run server, which only runs localhost 5000, not the React 60 00:04:07,810 --> 00:04:08,710 dev server. 61 00:04:08,740 --> 00:04:14,110 Now if we go to our browser and we go to 5000, we see our application. 62 00:04:14,110 --> 00:04:15,960 So this is the production build. 63 00:04:15,970 --> 00:04:21,070 In fact, if we click on the little React dev tool here, you'll see this page is using the production 64 00:04:21,070 --> 00:04:22,550 build of react. 65 00:04:22,570 --> 00:04:26,170 So this is essentially what we should see once we deploy. 66 00:04:26,200 --> 00:04:27,280 It's the same thing. 67 00:04:27,280 --> 00:04:30,220 It's just not running on the React dev server. 68 00:04:30,580 --> 00:04:31,030 All right. 69 00:04:31,030 --> 00:04:38,410 So the other thing that I did is in Package.json I'm sorry, not in dot env, I'm just going to set 70 00:04:38,410 --> 00:04:39,850 this back to development. 71 00:04:39,850 --> 00:04:46,480 I added this pagination limit here and set it to eight and then in the controller, the product controller 72 00:04:46,510 --> 00:04:47,650 get products. 73 00:04:47,650 --> 00:04:49,840 I set the page size to that. 74 00:04:49,840 --> 00:04:56,110 Just so you know, if people are going to use this, then they can just set that in the dot env and 75 00:04:56,110 --> 00:04:59,470 they don't have to come into the actual code to do it. 76 00:04:59,470 --> 00:05:03,790 So just to make it easy on people that want to use this this platform. 77 00:05:04,240 --> 00:05:04,630 All right. 78 00:05:04,630 --> 00:05:09,220 So I think now we're ready to go, we're ready to deploy, so we'll do that in the next video.