1 00:00:00,600 --> 00:00:01,433 Instructor: In the last section, 2 00:00:01,433 --> 00:00:04,350 we spoke about the differences between cookies and tokens, 3 00:00:04,350 --> 00:00:05,370 and we ended up saying that 4 00:00:05,370 --> 00:00:07,620 we were going to base our authentication 5 00:00:07,620 --> 00:00:11,100 on a token-based authentication system. 6 00:00:11,100 --> 00:00:12,600 And I also said that that was kind of the way 7 00:00:12,600 --> 00:00:13,590 that the industry is trending 8 00:00:13,590 --> 00:00:15,150 because it's easier to just build 9 00:00:15,150 --> 00:00:17,520 large and scalable applications. 10 00:00:17,520 --> 00:00:18,930 Let's take a look at a diagram 11 00:00:18,930 --> 00:00:20,580 at the type of infrastructure, 12 00:00:20,580 --> 00:00:21,870 the type of server structure 13 00:00:21,870 --> 00:00:24,120 that we're going to use in our application 14 00:00:24,120 --> 00:00:26,430 to demonstrate this in process, 15 00:00:26,430 --> 00:00:28,590 in practice, whatever. 16 00:00:28,590 --> 00:00:30,570 Anyways, here's our diagram. 17 00:00:30,570 --> 00:00:32,009 So let's imagine for a second 18 00:00:32,009 --> 00:00:33,840 that a user visits our website, 19 00:00:33,840 --> 00:00:37,290 which we're going to call our-app.com. 20 00:00:37,290 --> 00:00:39,120 When a user visits our-app.com, 21 00:00:39,120 --> 00:00:43,080 they expect to be given a index.html page 22 00:00:43,080 --> 00:00:44,580 and a bundle.js file. 23 00:00:44,580 --> 00:00:47,943 Essentially everything that's required for application. 24 00:00:48,840 --> 00:00:50,280 We're going to say that we're gonna host this 25 00:00:50,280 --> 00:00:52,560 on something called a content server, 26 00:00:52,560 --> 00:00:56,880 whose only job is to serve index.html and bundle.js. 27 00:00:56,880 --> 00:00:58,320 It does absolutely nothing else. 28 00:00:58,320 --> 00:01:01,140 No business logic, no concept of users, 29 00:01:01,140 --> 00:01:03,210 no authentication, nothing like that. 30 00:01:03,210 --> 00:01:05,069 If anyone makes a request to the server, 31 00:01:05,069 --> 00:01:09,210 they're always gonna get index.html and bundle.js. 32 00:01:09,210 --> 00:01:11,760 What that means is that we can make this content server 33 00:01:11,760 --> 00:01:13,950 very simple and very stupid. 34 00:01:13,950 --> 00:01:16,110 We can also spin it up on the fly 35 00:01:16,110 --> 00:01:19,800 in many different geographic locations if we so required. 36 00:01:19,800 --> 00:01:22,650 So this is a server that is easily redistributed, 37 00:01:22,650 --> 00:01:25,533 very lightweight, doesn't require a lot of resources. 38 00:01:29,790 --> 00:01:32,100 If we visited our-app.com 39 00:01:32,100 --> 00:01:34,200 and we were served our application 40 00:01:34,200 --> 00:01:37,140 from this content server of sorts, 41 00:01:37,140 --> 00:01:40,200 but we had our APIs listed on a different domain, 42 00:01:40,200 --> 00:01:43,260 so let's say, that our APIs listed somewhere else 43 00:01:43,260 --> 00:01:44,493 on a different domain, 44 00:01:45,450 --> 00:01:49,260 we would not be able to access this API server with cookies 45 00:01:49,260 --> 00:01:51,000 because it is on a different domain 46 00:01:51,000 --> 00:01:54,240 and that's why we would be using tokens in this case. 47 00:01:54,240 --> 00:01:57,150 Tokens can easily go cross domain. 48 00:01:57,150 --> 00:01:59,820 This is also extremely relevant if we were say, 49 00:01:59,820 --> 00:02:04,350 building a mobile app to serve along with our API server. 50 00:02:04,350 --> 00:02:06,690 Maybe our web app and the mobile app 51 00:02:06,690 --> 00:02:08,520 need to use the same API, 52 00:02:08,520 --> 00:02:10,590 and so it makes a lot more sense to have 53 00:02:10,590 --> 00:02:14,130 a very single location to serve our API 54 00:02:14,130 --> 00:02:16,680 that is not necessarily tied 100% 55 00:02:16,680 --> 00:02:20,430 to the web application or to the mobile application. 56 00:02:20,430 --> 00:02:22,980 Instead, it's its own very functional, 57 00:02:22,980 --> 00:02:25,203 very separate, very discreet unit, 58 00:02:26,190 --> 00:02:27,363 the API server. 59 00:02:28,410 --> 00:02:29,580 It also makes it a lot easier 60 00:02:29,580 --> 00:02:32,430 to update our application on the fly in the future. 61 00:02:32,430 --> 00:02:35,760 Let's say that we've got a team of front-end developers 62 00:02:35,760 --> 00:02:38,760 and a team of back-end developers on the server. 63 00:02:38,760 --> 00:02:42,120 The front-end developers might be chugging away all the time 64 00:02:42,120 --> 00:02:44,070 and developing one feature per day. 65 00:02:44,070 --> 00:02:46,860 And so whenever they need to update their content, 66 00:02:46,860 --> 00:02:50,160 they just push a new bundle.js and new index.html 67 00:02:50,160 --> 00:02:51,660 to this content server right here, 68 00:02:51,660 --> 00:02:52,860 and poof, 69 00:02:52,860 --> 00:02:54,810 any user who now revisits the page, 70 00:02:54,810 --> 00:02:58,080 immediately gets the new index.html and bundle.js, 71 00:02:58,080 --> 00:02:59,583 frontend totally updated. 72 00:03:00,420 --> 00:03:03,390 That is completely separate from the backend engineers 73 00:03:03,390 --> 00:03:04,590 who might not want to have 74 00:03:04,590 --> 00:03:07,020 a bunch of downtime caused by updates 75 00:03:07,020 --> 00:03:08,610 for the content server. 76 00:03:08,610 --> 00:03:10,440 So by making these separate services, 77 00:03:10,440 --> 00:03:12,420 we get a much more granular control 78 00:03:12,420 --> 00:03:15,070 over making updates to our application in the future. 79 00:03:16,470 --> 00:03:19,170 Scaling with this approach is also a lot easier. 80 00:03:19,170 --> 00:03:21,363 Let's look at another diagram for that. 81 00:03:22,290 --> 00:03:24,180 Let's say that our content server, 82 00:03:24,180 --> 00:03:25,560 maybe we only need to serve, 83 00:03:25,560 --> 00:03:28,290 you know, our web app to say 1,000 people. 84 00:03:28,290 --> 00:03:31,830 Maybe only 1,000 people are using our web app at any time. 85 00:03:31,830 --> 00:03:34,110 But maybe we've got some mobile app 86 00:03:34,110 --> 00:03:36,330 over here off to the side that's not pictured, 87 00:03:36,330 --> 00:03:38,940 where we have 5 million users 88 00:03:38,940 --> 00:03:41,670 and we need tremendous demand on the API 89 00:03:41,670 --> 00:03:44,280 for serving those mobile app users. 90 00:03:44,280 --> 00:03:46,320 If we follow this kind of approach, 91 00:03:46,320 --> 00:03:49,440 where we have a separate content server to serve the web app 92 00:03:49,440 --> 00:03:53,160 and a separate API server for any API requests, 93 00:03:53,160 --> 00:03:56,190 we can scale out the API to be tremendously large. 94 00:03:56,190 --> 00:03:58,170 You know, something that can actually serve 95 00:03:58,170 --> 00:03:59,970 all those millions or thousands 96 00:03:59,970 --> 00:04:04,020 and tens of thousands of different users for the mobile app. 97 00:04:04,020 --> 00:04:06,750 And it would be all localized on our API. 98 00:04:06,750 --> 00:04:08,940 And it wouldn't need to touch our frontend 99 00:04:08,940 --> 00:04:11,310 of our React and Redux app at all. 100 00:04:11,310 --> 00:04:15,690 No considerations there, completely separate applications. 101 00:04:15,690 --> 00:04:17,459 So this is the approach that we're gonna take 102 00:04:17,459 --> 00:04:19,380 for the application we're going to build. 103 00:04:19,380 --> 00:04:21,180 In this section, this coming section, 104 00:04:21,180 --> 00:04:22,290 as we're working on a server, 105 00:04:22,290 --> 00:04:25,950 we're going to be exclusively working on this API server. 106 00:04:25,950 --> 00:04:28,080 So we're going to build the API server, 107 00:04:28,080 --> 00:04:30,270 we're gonna make sure that authentication is working 108 00:04:30,270 --> 00:04:31,440 through and through, 109 00:04:31,440 --> 00:04:32,610 and once we're done with it, 110 00:04:32,610 --> 00:04:34,800 then we'll go and develop our mobile application, 111 00:04:34,800 --> 00:04:38,640 or excuse me, our web application using React and Redux. 112 00:04:38,640 --> 00:04:42,790 So in the coming sections, 100% Node and Express. 113 00:04:45,090 --> 00:04:46,020 So with that in mind, 114 00:04:46,020 --> 00:04:48,870 let's start writing some actual code in the next section.