1 00:00:00,330 --> 00:00:01,470 Not bad, not bad. 2 00:00:01,500 --> 00:00:09,240 Now we know that we can access the contents of the file directly, so, of course we can set up proper 3 00:00:09,240 --> 00:00:09,780 pages. 4 00:00:10,230 --> 00:00:19,410 But now let me throw you a minor grenade where we'll have to add way more code here if we want to really 5 00:00:19,410 --> 00:00:22,170 serve some meaningful webpage. 6 00:00:22,590 --> 00:00:29,700 And the example is going to be following if you navigate to not Borup So that's the folder you'll find 7 00:00:29,700 --> 00:00:30,780 in the email. 8 00:00:31,020 --> 00:00:36,270 You'll find Styles's logo as well as browser hyphen objets. 9 00:00:36,540 --> 00:00:38,630 And I simply call this browser up file. 10 00:00:38,760 --> 00:00:41,010 So you're not confused between the two. 11 00:00:41,130 --> 00:00:45,240 So this is going to be for server and this is for our browser up. 12 00:00:45,600 --> 00:00:50,100 And effectively, this is a complete app that we set up. 13 00:00:50,250 --> 00:00:54,150 I believe in my Joske, of course, when we were building projects. 14 00:00:54,480 --> 00:00:59,600 So effectively, this is a little nobre with a toggle functionality. 15 00:00:59,940 --> 00:01:04,340 And let me assure you something right from the get go, the app works. 16 00:01:04,739 --> 00:01:09,660 So if you get any issues along the way, it's because the node is not working. 17 00:01:10,170 --> 00:01:15,960 The app itself is going to work and I can simply showcase that if I go to Navarra and I'm going to copy 18 00:01:15,960 --> 00:01:19,800 that one and I'll place it on my desktop. 19 00:01:20,340 --> 00:01:26,550 And then if you spin up the index, the amount, I can guarantee you that this is going to work. 20 00:01:27,560 --> 00:01:28,830 That's my application. 21 00:01:29,340 --> 00:01:31,080 And I can make it smaller. 22 00:01:31,080 --> 00:01:33,140 And there is now I'm talking again. 23 00:01:33,450 --> 00:01:34,700 Our goal is forward. 24 00:01:35,280 --> 00:01:43,370 I want to take this project in the email with Styles's logo as well as the JavaScript file. 25 00:01:43,770 --> 00:01:51,750 So the demo structure, the styling, the logo that you can see or hear, as well as the logic, I want 26 00:01:51,750 --> 00:01:54,630 to take all of it and serve it on my server. 27 00:01:55,200 --> 00:01:59,180 And I know that the app works, so all that is good. 28 00:01:59,430 --> 00:02:03,320 So let's see what struggles we're going to have along the way. 29 00:02:03,690 --> 00:02:04,890 So here I have the homepage. 30 00:02:04,890 --> 00:02:05,190 Right. 31 00:02:05,550 --> 00:02:10,350 And instead of getting it from the index, which, by the way, I'm going to delete because again, 32 00:02:10,590 --> 00:02:11,760 this was just temporary. 33 00:02:12,090 --> 00:02:16,410 Now, of course, I would want to access this one from the BA app. 34 00:02:16,590 --> 00:02:17,940 That's the folder name. 35 00:02:17,940 --> 00:02:18,240 Right. 36 00:02:18,450 --> 00:02:24,780 And then I'm looking for the index HDMI and I simply just need to change my path where instead of getting 37 00:02:24,780 --> 00:02:31,890 it in the email from the root, which doesn't exist anymore, I'm going to go to no iPhone app. 38 00:02:32,250 --> 00:02:35,130 And then of course, I still get the homepage. 39 00:02:35,520 --> 00:02:41,200 And as you can see, I'm still serving also the content from that index. 40 00:02:41,820 --> 00:02:44,910 The only thing I did is just change the path. 41 00:02:44,910 --> 00:02:45,420 That's it. 42 00:02:46,050 --> 00:02:49,740 And technically, we should see exactly the same. 43 00:02:50,010 --> 00:02:50,390 Right. 44 00:02:50,790 --> 00:02:52,560 But here's the kicker. 45 00:02:52,930 --> 00:02:53,760 We navigate here. 46 00:02:53,770 --> 00:02:56,190 And if I refresh what is happening. 47 00:02:57,270 --> 00:02:58,320 I don't have the logo. 48 00:02:59,270 --> 00:03:05,450 I don't have the button, I mean, I do have the button, but it doesn't do anything and I can see only 49 00:03:05,450 --> 00:03:06,110 the structure. 50 00:03:07,090 --> 00:03:14,840 And we have quite a few photographers here, and actually, to give you a good idea, why is this happening? 51 00:03:15,340 --> 00:03:21,250 I want to navigate back to our project and let just console log the orals. 52 00:03:21,760 --> 00:03:27,400 And I think this is going to give you a clear message why this is happening so we can go back. 53 00:03:27,700 --> 00:03:29,980 And I'm just going to refresh one more time. 54 00:03:30,900 --> 00:03:35,790 And check it out, so we're requesting the home page, so that makes sense. 55 00:03:36,340 --> 00:03:42,570 So I come here, I request the home page, and I serve this HDMI fire from the Nampara. 56 00:03:43,170 --> 00:03:44,780 I'm going to have three more requests. 57 00:03:45,330 --> 00:03:49,140 I have one for Stiles, one for Browsr and one for local. 58 00:03:49,620 --> 00:03:50,590 Now, why is that happening? 59 00:03:50,630 --> 00:03:58,590 Well, because in my index HTML, if you check it out, of course I do reference to stylesheets because 60 00:03:58,590 --> 00:03:59,790 I want to have the styling right. 61 00:04:00,210 --> 00:04:04,830 I do reference the logo because the logo is right here in my folder. 62 00:04:05,250 --> 00:04:08,700 And also, of course, I do have the one for the app. 63 00:04:08,970 --> 00:04:09,330 Right. 64 00:04:09,510 --> 00:04:11,560 The one where I have my logic. 65 00:04:12,180 --> 00:04:13,860 So this is what happens. 66 00:04:14,320 --> 00:04:20,339 We send back the initial HDMI content and the browser starts reading the content. 67 00:04:20,730 --> 00:04:27,740 And every time we have basically a path to our server browsers like Hey Server, give me this resource. 68 00:04:28,050 --> 00:04:35,120 So give me style says give me logo SPG as well as whatever we have here, the browser. 69 00:04:35,220 --> 00:04:35,390 Right. 70 00:04:35,760 --> 00:04:41,430 So keep in mind that these ones are for icons and actually they are external. 71 00:04:41,670 --> 00:04:43,350 So this one goes to Phantasm. 72 00:04:43,660 --> 00:04:45,270 That's a little bit different scenario. 73 00:04:45,300 --> 00:04:50,220 Yes, the browser still performs this request, but of course this is external resource. 74 00:04:50,640 --> 00:04:53,040 Now, these ones are on our server. 75 00:04:53,340 --> 00:04:54,630 But the problem is following. 76 00:04:55,170 --> 00:04:59,100 Are we handling these requests in our create server? 77 00:04:59,790 --> 00:05:01,140 And of course, the answer is no. 78 00:05:01,530 --> 00:05:04,440 We handle Portrush well, both. 79 00:05:04,770 --> 00:05:08,390 And then for everything else, we have this for or for. 80 00:05:08,910 --> 00:05:10,920 So to answer your question, yes. 81 00:05:11,250 --> 00:05:16,260 Now, manually, we'll have to request all the files. 82 00:05:16,440 --> 00:05:23,730 So, Lois, get the houses as well as the browser app, assign them to some kind of variable and set 83 00:05:23,730 --> 00:05:24,430 up this path. 84 00:05:24,840 --> 00:05:26,640 Again, this is just an example. 85 00:05:26,940 --> 00:05:33,000 If you don't want to follow along, if you just want to see how it's going to work, just sit back and 86 00:05:33,000 --> 00:05:33,480 relax. 87 00:05:33,910 --> 00:05:42,900 But in my case, I'm going to request all these resources here and then set up more if statements where 88 00:05:42,900 --> 00:05:47,090 if the browser wants to get the success, then of course, will serve us. 89 00:05:47,220 --> 00:05:52,190 If the browser wants to have a logo, then of course the browser is going to get local. 90 00:05:52,500 --> 00:05:59,430 And again, if you take a look here in the elements, you can see exactly why, because we have our 91 00:05:59,430 --> 00:06:03,060 HDMI structure and then there is we have Styles's says. 92 00:06:03,240 --> 00:06:10,210 So notice how browser is going to HTP localhost 5040 What will stylesheets. 93 00:06:10,210 --> 00:06:10,680 That's right. 94 00:06:11,100 --> 00:06:12,730 Well, do we have that path? 95 00:06:12,750 --> 00:06:15,390 And again, the answer is no. 96 00:06:15,780 --> 00:06:17,360 So let's do this way. 97 00:06:17,370 --> 00:06:21,480 I'm going to copy and paste and I'm just going to come up with different names here. 98 00:06:21,490 --> 00:06:23,130 I'm going to say Homestyle. 99 00:06:24,210 --> 00:06:31,270 And then the third one, I guess, is going to be home image and the fourth one will be home logic. 100 00:06:31,290 --> 00:06:33,600 So that is going to be my app one. 101 00:06:34,080 --> 00:06:36,800 Then we'll have to change some files here as well. 102 00:06:37,110 --> 00:06:39,930 So I'm looking for style success, I believe. 103 00:06:39,930 --> 00:06:40,260 Right. 104 00:06:40,750 --> 00:06:43,470 That's the filename then I have Lowgar 3G. 105 00:06:44,840 --> 00:06:47,550 That's where my little girl is sitting. 106 00:06:48,080 --> 00:06:49,110 So go ahead. 107 00:06:50,000 --> 00:06:59,410 And then finally, let's just delete this one as well and call this browser iPhone app and just so homestyle 108 00:06:59,510 --> 00:07:00,820 home image and logic. 109 00:07:00,820 --> 00:07:06,190 And like I said, yes, manually, one by one, we'll have to add all these resources. 110 00:07:06,590 --> 00:07:13,130 So instead of about page, I'll just call the styles and the value that I want to check for here is 111 00:07:13,130 --> 00:07:15,790 exactly the same, like in my browser. 112 00:07:16,220 --> 00:07:17,280 So they need to match. 113 00:07:17,630 --> 00:07:23,470 So then, of course, the browser will get the contents of the access file in this example. 114 00:07:23,750 --> 00:07:27,620 So I'm going to go with styles and access. 115 00:07:28,010 --> 00:07:33,860 Now, I do want to change right now the content because I'm sending back the SML and of course the answer 116 00:07:33,860 --> 00:07:34,280 is no. 117 00:07:34,370 --> 00:07:35,660 We're sending back the success. 118 00:07:35,960 --> 00:07:37,030 So we go text. 119 00:07:37,610 --> 00:07:39,020 Now, let me say this one more time. 120 00:07:39,020 --> 00:07:41,780 Please don't zero in on these types. 121 00:07:42,260 --> 00:07:47,810 If you will ever need them, you'll be able to find them within a matter of seconds. 122 00:07:48,140 --> 00:07:55,400 Just type along with me and we're going to be in good shape now as far as the right in our body. 123 00:07:55,610 --> 00:08:00,200 So in our response that we're sending back are we're going to send back the amount. 124 00:08:00,500 --> 00:08:01,610 Of course, the answer is no. 125 00:08:01,640 --> 00:08:06,860 Now, of course, I want to send the right and the variable for that is homestyle. 126 00:08:06,980 --> 00:08:12,020 So that's where my content is for the style success. 127 00:08:12,350 --> 00:08:20,320 And once I say check it out now we are moving along in the right direction because I do have the styles. 128 00:08:20,750 --> 00:08:23,000 So it looks already somewhat decent. 129 00:08:23,000 --> 00:08:30,840 Now, the logo is still missing and there's no logic because I don't have the app jass or the logo switchy, 130 00:08:31,190 --> 00:08:34,700 but we are moving in the right direction. 131 00:08:34,970 --> 00:08:38,539 So copy and paste and you can probably already guess that. 132 00:08:38,570 --> 00:08:39,890 We'll just repeat over here. 133 00:08:40,250 --> 00:08:47,840 We'll say if the euro is equal to logo, would you now say image logo as far as the comment? 134 00:08:48,410 --> 00:08:51,770 And we're just going to go with Logo as 3G. 135 00:08:52,040 --> 00:09:02,490 And as far as the mime type for this sucker, it is image image for us, ridgy and plus X and L like 136 00:09:02,540 --> 00:09:10,010 so and let's go with home and I believe I name this on an image like so. 137 00:09:10,400 --> 00:09:13,840 And then last one of course is going to be our JavaScript. 138 00:09:13,850 --> 00:09:22,850 So let's say your logic and the resource that I would want to provide is browser app Jase's like so 139 00:09:23,490 --> 00:09:29,480 and the content type is equal to text and unjam script. 140 00:09:30,370 --> 00:09:36,930 And of course, now I'm going to want to send the home logic, so let's save this one. 141 00:09:37,540 --> 00:09:43,180 And now if I go to my browser and if I refresh, check it out. 142 00:09:43,510 --> 00:09:45,430 Now, of course, we have everything. 143 00:09:45,790 --> 00:09:51,800 We have the logo as well as the proper functionality with browser up. 144 00:09:52,030 --> 00:10:00,040 And notice how all our requests are two hundred instead of four for where the previously browser wasn't 145 00:10:00,040 --> 00:10:01,290 able to find those resources. 146 00:10:01,570 --> 00:10:03,820 And of course we are providing them. 147 00:10:04,120 --> 00:10:10,510 And if we want to test out the functionality there is now, I can just go here and notice how I can 148 00:10:10,510 --> 00:10:12,450 toggle the menu as well. 149 00:10:12,730 --> 00:10:18,790 And now, of course, we'll switch gears and start working with Express because hopefully it's clear 150 00:10:19,150 --> 00:10:24,160 that, yes, we can set up our server with just HTP module. 151 00:10:24,700 --> 00:10:31,630 But imagine a scenario where you have a website with tons of resources and then, of course, you need 152 00:10:31,630 --> 00:10:35,390 to set up every single resource in this matter. 153 00:10:35,680 --> 00:10:40,930 Now, I don't know about you, but I would go nuts somewhat quickly.