1 00:00:00,680 --> 00:00:05,140 In the last video we made a change to our host file and we put in here whenever we tried to go to post 2 00:00:05,140 --> 00:00:06,980 dot com on our local machine. 3 00:00:07,120 --> 00:00:11,710 Don't go to the real postcard out there on the Internet instead just connect to the local machine. 4 00:00:11,710 --> 00:00:14,720 I just want to throw a quick note out there a quick clarification. 5 00:00:14,720 --> 00:00:20,410 There is nothing special about post dot com being used there or in the host file right here. 6 00:00:20,410 --> 00:00:25,220 We don't have to say post on com just because we are trying to go to a path of posts or a service of 7 00:00:25,220 --> 00:00:26,510 posts or anything like that. 8 00:00:26,530 --> 00:00:31,100 I just thought the domain name post dot com made sense for the application we were building. 9 00:00:31,210 --> 00:00:37,430 This could have just as easily been a host of my dash app dot org if we did that. 10 00:00:37,460 --> 00:00:42,020 We just need to make sure that we update the host file to my app dot org. 11 00:00:42,060 --> 00:00:49,280 Like so the only requirement here is that we've got something consistent inside the host file and inside 12 00:00:49,280 --> 00:00:52,080 of our ingress service config file as well. 13 00:00:52,100 --> 00:00:55,790 The other thing I want to mention is that what we're doing here modifying that post file is really just 14 00:00:55,790 --> 00:00:58,070 appropriate for a development environment. 15 00:00:58,070 --> 00:01:03,200 Once we start to deploy this thing out online we don't have to make any actual changes to any host file 16 00:01:03,200 --> 00:01:08,690 on remote server or anything like that because we will be connecting to the real post dot com which 17 00:01:08,690 --> 00:01:15,380 would hopefully connect us over to our Cuban ease cluster so just a little bit of clarification there. 18 00:01:15,410 --> 00:01:15,660 All right. 19 00:01:15,680 --> 00:01:20,090 Now that we got that out of the way let's continue moving forward on our application. 20 00:01:20,090 --> 00:01:25,060 The next thing we're going to do is start to setup that react app dev server pod. 21 00:01:25,250 --> 00:01:31,190 We need to make sure that inside of that racked up server our actual real code is going to make requests 22 00:01:31,190 --> 00:01:37,050 now to post dot com because that's where in theory our Cuban cities cluster is located. 23 00:01:37,100 --> 00:01:42,650 If we make a request to post dot com or react app is going to attempt to connect to that ingress engine 24 00:01:42,740 --> 00:01:49,440 X let's go into our ReACT app code we're gonna make sure that anytime we made a request to local host 25 00:01:49,680 --> 00:01:52,010 we will change it to be post dot com instead 26 00:01:55,020 --> 00:02:00,460 so inside of my client directory I can open up the source folder and we'll just go through every file 27 00:02:00,460 --> 00:02:01,420 inside of here. 28 00:02:01,420 --> 00:02:05,850 Let's make sure that any time we make a request we make the request to post dot com. 29 00:02:05,960 --> 00:02:07,690 So here's inside of comment create. 30 00:02:07,690 --> 00:02:13,050 I see a post request being made right now to look close to port four thousand one not what we want. 31 00:02:13,060 --> 00:02:16,250 Instead we want post dot com. 32 00:02:16,370 --> 00:02:19,530 So again that's not going to go to the actual post dot com on the Internet. 33 00:02:19,550 --> 00:02:23,720 It's going to be to our local machine. 34 00:02:23,800 --> 00:02:25,600 I think that's it for this file. 35 00:02:25,810 --> 00:02:28,410 I'll move on to comment list. 36 00:02:28,460 --> 00:02:33,710 I don't think we are making any requests inside of comment list so close that file I'll go into index 37 00:02:33,710 --> 00:02:38,350 dot J.S. no requests inside of here I'll go to post create. 38 00:02:38,370 --> 00:02:43,770 Yep looks like we're making a request right here so I would replace local host Colin 4000 with hosts 39 00:02:43,810 --> 00:02:48,940 dot com instead no other requests inside of here. 40 00:02:49,950 --> 00:02:52,610 And so we'll go on to a post list. 41 00:02:52,720 --> 00:02:55,060 Looks like we've got a request right here as well. 42 00:02:55,060 --> 00:02:57,000 We'll change that to post dot com as well. 43 00:02:59,240 --> 00:03:01,930 And no other requests. 44 00:03:02,080 --> 00:03:07,550 So it looks good so now all the code inside very act application is going to try to go to post dot com 45 00:03:08,240 --> 00:03:11,330 again when we're running this react application on our local machine. 46 00:03:11,360 --> 00:03:16,310 Whenever we make that request our local operating system is going to take that post dot com and redirect 47 00:03:16,330 --> 00:03:22,570 the request to our local machine instead where it will be handled by Cuban is now that our ReACT application 48 00:03:22,570 --> 00:03:23,590 is all updated. 49 00:03:23,590 --> 00:03:26,730 We need to create an image out of this thing. 50 00:03:26,840 --> 00:03:30,560 We're going to create the image and then we'll write out a can pick file to make a deployment so we 51 00:03:30,560 --> 00:03:34,680 can actually host this inside of our Cuban cities cluster. 52 00:03:34,730 --> 00:03:39,410 We need to not only make it deployment we need to make sure make a cluster IP as well so that the ingress 53 00:03:39,470 --> 00:03:44,930 engine ex controller can eventually direct traffic to this pod so we can serve out the HCM LC SS and 54 00:03:44,930 --> 00:03:45,760 JavaScript out of it. 55 00:03:47,370 --> 00:03:49,720 OK so let's go back over George terminal. 56 00:03:49,770 --> 00:03:57,070 We're going to change into that client directory and build an image out of the react application so 57 00:03:57,080 --> 00:04:06,150 I'll go back over to client I'll do a docker build dash t my Docker I.D. and I'll call this image client 58 00:04:06,860 --> 00:04:11,420 and then don't forget the dot at the very end. 59 00:04:11,460 --> 00:04:17,490 So there's the image I'll push it up to Docker Hub so Docker push by Docker I.D.. 60 00:04:17,790 --> 00:04:18,120 Client 61 00:04:21,050 --> 00:04:23,810 and there we go tonight. 62 00:04:23,850 --> 00:04:25,440 I've pushed that image up. 63 00:04:25,440 --> 00:04:27,280 We're not going to go back over to our. 64 00:04:27,430 --> 00:04:33,290 Ed we're going to start to write out another config file to create a deployment to host this image that 65 00:04:33,290 --> 00:04:36,620 we just put together and a cluster I.P. service to go along with it. 66 00:04:37,020 --> 00:04:42,020 So back inside my info directory I'll find Kate's inside there I'll make a new file called client dash 67 00:04:42,050 --> 00:04:47,950 double dot e-mail the deployment that we're gonna create inside of here is going to be just about identical 68 00:04:47,950 --> 00:04:52,420 to all the other deployments where we put together rather than write all this stuff out from scratch 69 00:04:52,630 --> 00:04:57,640 I'm going to go to the comments depot file I'm going to copy everything inside of there and then paste 70 00:04:57,640 --> 00:04:58,630 it into client 71 00:05:02,470 --> 00:05:08,240 I'll then go through all the copy pasted stuff and I'll update comments to client instead so I will 72 00:05:08,240 --> 00:05:17,050 do five updates right there I'll then go down to the service at the bottom and I'll update three times 73 00:05:17,910 --> 00:05:23,680 I'm an overdue client and then finally remember a create react app application is hosted on port three 74 00:05:23,680 --> 00:05:29,150 thousand I can update those ports like so OK. 75 00:05:29,190 --> 00:05:36,390 Now last step we'll go ahead and apply this thing to our current HD cluster I'm going to change back 76 00:05:36,390 --> 00:05:45,240 over to my infra K AIDS directory and I'll do a cube Seitel apply dash f client dash double dot demo 77 00:05:48,220 --> 00:05:48,710 OK. 78 00:05:48,820 --> 00:05:53,340 That should be at it's now that our ReACT application is running inside of here. 79 00:05:53,370 --> 00:05:58,710 Last thing we have to do this really is the last thing we need to setup all those routing rules we need 80 00:05:58,710 --> 00:06:03,570 to make sure that any time we get an incoming request to that ingress controller it understands where 81 00:06:03,570 --> 00:06:05,560 to route the request off to. 82 00:06:05,590 --> 00:06:08,580 So let's start to write out all those writing rules in the next video.