1 00:00:00,450 --> 00:00:05,280 In last video we successfully redeployed our application and get our client side app to show up on the 2 00:00:05,280 --> 00:00:05,920 screen. 3 00:00:06,100 --> 00:00:11,580 And I want to look at some aspects of our application and get a little bit of a better sense about what's 4 00:00:11,580 --> 00:00:17,220 going on here especially in relation to this diagram right here where we had spoken about some of the 5 00:00:17,220 --> 00:00:19,840 different responsibilities of the Express server. 6 00:00:20,240 --> 00:00:25,260 So the first thing I want to mention to you is if I go up to my address bar while I'm at my application 7 00:00:25,530 --> 00:00:34,950 and I put in like Slash surveys like so you'll notice that the entire page reloads and I get sent over 8 00:00:34,950 --> 00:00:36,730 to the dashboard component. 9 00:00:36,810 --> 00:00:43,950 So when I change the address up here and press enter that makes an entirely new TTP request to our express 10 00:00:43,950 --> 00:00:44,650 server. 11 00:00:44,940 --> 00:00:51,460 Now of course as we mentioned the Express server has no idea what SLAs surveys is pointing at. 12 00:00:51,720 --> 00:00:58,050 So the Express server says OK well do I have a file inside of my bill directory called surveys. 13 00:00:58,050 --> 00:00:58,840 No I don't. 14 00:00:59,010 --> 00:01:04,470 OK I guess I'll just go ahead and load up the html document that I have. 15 00:01:04,470 --> 00:01:08,680 So the HMO document loads up inside of that HMO document. 16 00:01:08,760 --> 00:01:17,270 If we look in to the body tag right here you'll notice that we've got right here right here right here. 17 00:01:17,490 --> 00:01:23,360 One of the tags inside of here is a tag that points directly to our main dot G-S file. 18 00:01:23,580 --> 00:01:29,250 So the XML document is responsible for then going back to the server trying to grab this very specific 19 00:01:29,250 --> 00:01:36,150 file which Express does have so nodes to kind of lump it into its asset directory or the directory to 20 00:01:36,150 --> 00:01:37,820 pull this file out. 21 00:01:38,130 --> 00:01:44,640 The server responds with the DOT G-S file and the entire re-act application boots up when the re-act 22 00:01:44,640 --> 00:01:49,620 application boots up re-act router then takes over and it decides on what components to show on the 23 00:01:49,620 --> 00:01:52,130 screen depending upon the current route. 24 00:01:52,440 --> 00:01:57,450 One thing I want to make sure is really clear at this point we've kind of very briefly touched on this 25 00:01:57,450 --> 00:01:57,840 volonte. 26 00:01:57,840 --> 00:02:04,020 Want to make sure it's really clear when we are using re-act router that is a client side navigation 27 00:02:04,020 --> 00:02:11,400 routing library only so only once a user is inside of an HMO document with our javascript file loaded 28 00:02:11,400 --> 00:02:11,790 up. 29 00:02:11,850 --> 00:02:16,280 Does any of the re-act router rules take any effect whatsoever. 30 00:02:16,530 --> 00:02:20,010 None of the reactor outer stuff is at all loaded up into Express. 31 00:02:20,010 --> 00:02:25,100 None of the routing there is shared at all to prove that to you. 32 00:02:25,200 --> 00:02:30,960 If I click on the logo over here and remember that the logo is a link tag that is rendered by re-act 33 00:02:30,960 --> 00:02:31,570 router. 34 00:02:31,740 --> 00:02:34,560 You'll notice that the entire page does not refresh. 35 00:02:34,560 --> 00:02:36,770 Instead it's a very quick transition. 36 00:02:37,080 --> 00:02:42,260 Well OK I can't go if the logo kicks me back to the same survey or the same dashboard Once that's a 37 00:02:42,260 --> 00:02:43,180 bad example. 38 00:02:43,440 --> 00:02:49,230 But essentially if this had been a link to go back to just the route route like that we would have seen 39 00:02:49,230 --> 00:02:55,660 an instantaneous page change here because re-act rider was not refashioning the entire S.M. document. 40 00:02:55,720 --> 00:02:59,120 It was just changing the set of components that were visible on the screen. 41 00:02:59,660 --> 00:02:59,920 OK. 42 00:02:59,940 --> 00:03:03,150 So now the very last thing I want to do here just to make sure that everything is working the way we 43 00:03:03,150 --> 00:03:07,080 expect I should be able to click the log out button to log out. 44 00:03:07,350 --> 00:03:11,290 Yup I'm able to Asheville to click log in with Google to get back in. 45 00:03:11,310 --> 00:03:14,680 Yes I can I should still be able to add credits 46 00:03:17,270 --> 00:03:18,590 put in my credit card number. 47 00:03:18,590 --> 00:03:20,660 Ten twenty one two three. 48 00:03:21,610 --> 00:03:24,210 And oops I put in a e-mail. 49 00:03:24,210 --> 00:03:25,130 There we go. 50 00:03:25,620 --> 00:03:30,180 And now I'm able to add some number of credits I should see my credits increase right there. 51 00:03:30,240 --> 00:03:32,290 Yes I have five credits now. 52 00:03:32,610 --> 00:03:32,980 OK. 53 00:03:33,000 --> 00:03:37,410 So this is looking pretty darn awesome I think that we've definitely moved forward an additional step 54 00:03:37,410 --> 00:03:38,060 here. 55 00:03:38,190 --> 00:03:40,580 So I'm really happy with the deployment that we have so far. 56 00:03:40,700 --> 00:03:46,230 And I think they are now ready to continue on in the next section and start working on our next feature. 57 00:03:46,380 --> 00:03:48,400 So I'll see you in just a minute.