1 00:00:00,380 --> 00:00:02,980 Now that we have our templates, let's read these files and 2 00:00:02,980 --> 00:00:07,310 then send the contents of those files in the response. 3 00:00:07,310 --> 00:00:12,020 So remember in our app JS file we said that we were going 4 00:00:12,020 --> 00:00:16,530 to create a function that handles the reading of files and match the values in. 5 00:00:17,620 --> 00:00:18,750 We're gonna read from the file. 6 00:00:18,750 --> 00:00:20,860 And then merge, merge the values in. 7 00:00:20,860 --> 00:00:24,130 Well, we're not gonna do that here in the app JS file. 8 00:00:24,130 --> 00:00:28,840 It's just too much of a disconnect of what this app is. 9 00:00:28,840 --> 00:00:30,950 The app should just be like, okay, bump. 10 00:00:30,950 --> 00:00:32,890 This sets up the server, we're done. 11 00:00:32,890 --> 00:00:36,320 We do all the routing in the router JS file. 12 00:00:36,320 --> 00:00:41,160 And in turn, we should probably move this into its own file as well. 13 00:00:41,160 --> 00:00:47,179 So, let's create a new file called renderer.js 14 00:00:47,179 --> 00:00:54,070 because we want to render our templates to the response. 15 00:00:54,070 --> 00:00:58,660 So I'm just gonna paste those comments in there just 16 00:00:58,660 --> 00:01:03,455 to keep it fresh in our mind what we're going to do, and 17 00:01:03,455 --> 00:01:08,067 let's start with creating a function called view. 18 00:01:08,067 --> 00:01:17,093 [BLANK_AUDIO] 19 00:01:17,093 --> 00:01:18,730 Now what do we want to do in here? 20 00:01:18,730 --> 00:01:27,010 We want to read from the template files. 21 00:01:29,450 --> 00:01:35,860 And we want to insert values into the content. 22 00:01:37,560 --> 00:01:43,470 And we want to write out to the response. 23 00:01:45,280 --> 00:01:46,790 And let's just get rid of that. 24 00:01:46,790 --> 00:01:49,490 Because that's basically what we said there. 25 00:01:49,490 --> 00:01:56,080 And, in order to do that, we need a couple of parameters to, to do this. 26 00:01:56,080 --> 00:02:00,050 We need the template name, the values, and the response server. 27 00:02:00,050 --> 00:02:02,640 We need the template name to read from the template. 28 00:02:02,640 --> 00:02:06,830 We need the values to put into the contents of that file. 29 00:02:06,830 --> 00:02:09,053 And then we need to write out to the response. 30 00:02:09,053 --> 00:02:11,263 So, template name 31 00:02:11,263 --> 00:02:16,122 [BLANK_AUDIO] 32 00:02:16,122 --> 00:02:18,840 Values and response. 33 00:02:21,800 --> 00:02:24,520 So, how do we read from a file? 34 00:02:24,520 --> 00:02:30,301 Let's take a look at the documentation on the node.js website. 35 00:02:30,301 --> 00:02:35,585 So, Docs, API Docs, and then file system. 36 00:02:35,585 --> 00:02:41,801 Let's scroll down 37 00:02:41,801 --> 00:02:46,464 to read file. 38 00:02:46,464 --> 00:02:47,424 There we go. 39 00:02:47,424 --> 00:02:48,150 Read file. 40 00:02:48,150 --> 00:02:50,630 That looks like what we want to use. 41 00:02:50,630 --> 00:02:57,680 This is fs.readFile and then a path, and then as a function with an error. 42 00:02:57,680 --> 00:03:00,068 So you can throw the error and you can log the data throw out. 43 00:03:01,210 --> 00:03:04,010 So let's try this out. 44 00:03:04,010 --> 00:03:05,830 So let's copy and paste this. 45 00:03:05,830 --> 00:03:09,462 Copy and then paste here. 46 00:03:09,462 --> 00:03:15,240 [BLANK_AUDIO] 47 00:03:15,240 --> 00:03:18,160 Let's just indent this correctly. 48 00:03:18,160 --> 00:03:21,000 And we want to do this in the callback. 49 00:03:24,230 --> 00:03:27,129 And we've got a variable that we haven't used yet. 50 00:03:27,129 --> 00:03:33,057 We need to actually require the module 51 00:03:33,057 --> 00:03:37,695 var fs is equal to require fs. 52 00:03:37,695 --> 00:03:39,700 Which is short for file system. 53 00:03:41,030 --> 00:03:42,650 And if you don't know how to do that, 54 00:03:42,650 --> 00:03:45,720 you just scroll up to the top of these documentation pages. 55 00:03:45,720 --> 00:03:49,040 And they generally do show you how to import the module. 56 00:03:50,412 --> 00:03:55,241 So here for example it shows you how to do it. 57 00:03:55,241 --> 00:04:00,250 So, not on every example are you gonna see the requirement of it. 58 00:04:00,250 --> 00:04:03,392 You just assume because you've seen it at the top of 59 00:04:03,392 --> 00:04:08,213 the part of the documentation that you're in that you just know when you, 60 00:04:08,213 --> 00:04:12,270 when you're further down the page that's how you import it. 61 00:04:12,270 --> 00:04:16,090 So, I would prefer it if they included it in every code sample just for 62 00:04:16,090 --> 00:04:17,420 completeness. 63 00:04:17,420 --> 00:04:18,990 But what can you do? 64 00:04:21,040 --> 00:04:25,210 So, instead of using this code that they have given us, let's make it our own. 65 00:04:25,210 --> 00:04:29,950 So, we want it to go and read a file in a particular path. 66 00:04:29,950 --> 00:04:32,210 And that's the views path. 67 00:04:32,210 --> 00:04:33,850 So let's do that. 68 00:04:33,850 --> 00:04:39,910 So .views, and then another slash. 69 00:04:39,910 --> 00:04:44,466 And then, instead of us passing the template name with .html at the end, 70 00:04:44,466 --> 00:04:47,493 let's just pass in the name that's different. 71 00:04:47,493 --> 00:04:52,984 And, and we can automatically programmatically add .html to the end, 72 00:04:52,984 --> 00:04:55,529 so we could do something like this. 73 00:04:55,529 --> 00:04:58,293 So we could do template name plus 74 00:04:58,293 --> 00:05:00,661 [BLANK_AUDIO] 75 00:05:00,661 --> 00:05:01,599 .html. 76 00:05:01,599 --> 00:05:04,241 [BLANK_AUDIO] 77 00:05:04,241 --> 00:05:07,800 And then let's say this is an error. 78 00:05:07,800 --> 00:05:13,050 And this is actually the file contents, and 79 00:05:13,050 --> 00:05:18,410 let's just do error and error. 80 00:05:18,410 --> 00:05:23,148 And instead of console.log we've got a response, so 81 00:05:23,148 --> 00:05:26,141 let's just do response.write. 82 00:05:26,141 --> 00:05:30,048 [BLANK_AUDIO] 83 00:05:30,048 --> 00:05:32,087 File contents. 84 00:05:32,087 --> 00:05:37,351 So, we should be able to now write the file contents from 85 00:05:37,351 --> 00:05:42,503 our template by passing in parameters to this method, 86 00:05:42,503 --> 00:05:48,781 the view method, and we can write out the content to the response. 87 00:05:48,781 --> 00:05:53,542 So let's export that 88 00:05:53,542 --> 00:06:03,064 module.exports.view is equal to view, 89 00:06:03,064 --> 00:06:07,830 and go to our router. 90 00:06:07,830 --> 00:06:15,553 And in here we can import var renderer, require. 91 00:06:15,553 --> 00:06:20,267 [BLANK_AUDIO] 92 00:06:20,267 --> 00:06:21,867 And then the path to our renderer. 93 00:06:21,867 --> 00:06:29,493 [BLANK_AUDIO] 94 00:06:29,493 --> 00:06:33,480 I've just noticed I've spelt renderer wrong, so let's just put an n in there. 95 00:06:34,530 --> 00:06:39,514 And down here, let's do renderer.view. 96 00:06:40,930 --> 00:06:43,950 And remember, it was template name was the first parameter. 97 00:06:43,950 --> 00:06:47,133 So let's do header, all in lowercase this time. 98 00:06:47,133 --> 00:06:51,051 [BLANK_AUDIO] 99 00:06:51,051 --> 00:06:52,320 And then the values. 100 00:06:52,320 --> 00:06:53,950 There's no values we want to put in that. 101 00:06:53,950 --> 00:06:55,970 There's nothing that we need. 102 00:06:55,970 --> 00:06:59,641 And then we want to pass in the response. 103 00:06:59,641 --> 00:07:02,372 And, let's try that out. 104 00:07:02,372 --> 00:07:10,388 [BLANK_AUDIO] 105 00:07:10,388 --> 00:07:14,402 Let's start up our application, and 106 00:07:14,402 --> 00:07:18,420 go to the preview and for some reason. 107 00:07:19,480 --> 00:07:24,130 We're getting a search and footer, we don't have the header. 108 00:07:24,130 --> 00:07:28,090 Now, does that mean our code's not working or is there something else going on here? 109 00:07:29,690 --> 00:07:33,180 Well, if we go back to our renderer, you 110 00:07:35,240 --> 00:07:40,150 see we've put this in a call back, so it takes some time to actually 111 00:07:40,150 --> 00:07:44,950 go through the disc and read information off it and then write it to the response. 112 00:07:44,950 --> 00:07:50,630 And then by that time this line has been executed and this line has been executed. 113 00:07:50,630 --> 00:07:55,600 So we've been loading the files from the disc asynchronously. 114 00:07:55,600 --> 00:08:01,270 So in this case we want to actually read the file synchronously. 115 00:08:01,270 --> 00:08:04,980 I, we wait for it to read the file and then read the next file and 116 00:08:04,980 --> 00:08:06,720 then read the next file. 117 00:08:06,720 --> 00:08:10,888 And it doesn't take that long and what, you maybe be thinking, well, 118 00:08:10,888 --> 00:08:13,743 isn't node supposed to be this non-blocking. 119 00:08:13,743 --> 00:08:16,068 Well, there's sometimes where you want it to block and 120 00:08:16,068 --> 00:08:17,957 sometimes where you don't want it to block. 121 00:08:17,957 --> 00:08:21,850 So, so for example, we're doing three separate operations here. 122 00:08:21,850 --> 00:08:28,190 We're writing the header to the response and then the app will wait to 123 00:08:28,190 --> 00:08:33,240 write the search to the response and then the app will again and do the footer. 124 00:08:33,240 --> 00:08:35,920 But, it's already been writing to the response. 125 00:08:35,920 --> 00:08:38,580 So the browser's already getting all that information. 126 00:08:38,580 --> 00:08:43,760 So, in the header if you were linking to a CSS file that's external. 127 00:08:43,760 --> 00:08:47,418 It can be starting to download that, the browser, 128 00:08:47,418 --> 00:08:52,871 whilst your server is still writing out the search to the, to the response. 129 00:08:52,871 --> 00:08:57,730 So, it, it works out pretty well to do it like this anyway. 130 00:08:57,730 --> 00:09:02,110 So, let's take a look back at the documentation to see if there's a sync 131 00:09:03,580 --> 00:09:04,170 sync version. 132 00:09:05,330 --> 00:09:12,290 So if we go to readFileSync, it's the synchronous ver, version of read file. 133 00:09:12,290 --> 00:09:15,650 And it returns the con, contents of the file then. 134 00:09:15,650 --> 00:09:20,120 And if the encoding option is specified, then the function will return a string, 135 00:09:20,120 --> 00:09:21,570 otherwise its a buffer. 136 00:09:21,570 --> 00:09:22,370 Again. 137 00:09:22,370 --> 00:09:30,755 So, let's just go back to our code, and let's change this to readFileSync. 138 00:09:33,490 --> 00:09:36,200 And we don't need to callback because it's synchronous this time. 139 00:09:37,890 --> 00:09:46,400 And let's set the variable as fileContents. 140 00:09:46,400 --> 00:09:49,365 And get rid of that, end of that callback. 141 00:09:49,365 --> 00:09:52,691 [BLANK_AUDIO] 142 00:09:52,691 --> 00:09:59,193 So now, we read from the file. 143 00:09:59,193 --> 00:10:04,418 We actually do need to still insert, 144 00:10:04,418 --> 00:10:08,132 values in to the content. 145 00:10:08,132 --> 00:10:16,590 And then we need to write out the contents to the response. 146 00:10:18,040 --> 00:10:18,540 Okay. 147 00:10:19,930 --> 00:10:22,580 So we're not waiting for a callback now. 148 00:10:22,580 --> 00:10:26,960 When it goes through this, it should block and then do this, and then do this. 149 00:10:26,960 --> 00:10:28,064 So let's try it out. 150 00:10:28,064 --> 00:10:37,705 [BLANK_AUDIO] 151 00:10:37,705 --> 00:10:41,753 So we have the DOCTYPE html, and everything that's in the header, 152 00:10:41,753 --> 00:10:43,690 which is up to the body. 153 00:10:43,690 --> 00:10:45,660 And then we've got the search and footer. 154 00:10:45,660 --> 00:10:48,870 So now we can see it actually working, reading from the files and 155 00:10:48,870 --> 00:10:50,920 printed out to the response. 156 00:10:50,920 --> 00:10:53,558 Let's do that with all of our responses now. 157 00:10:53,558 --> 00:10:57,747 So, renderer.view. 158 00:10:57,747 --> 00:11:04,470 We can do the search, and 159 00:11:04,470 --> 00:11:08,440 it's gonna be empty and a response. 160 00:11:10,530 --> 00:11:13,026 And then, we want that for the footer as well. 161 00:11:13,026 --> 00:11:17,833 [BLANK_AUDIO] 162 00:11:17,833 --> 00:11:19,817 And again for the header. 163 00:11:19,817 --> 00:11:27,784 [BLANK_AUDIO] 164 00:11:27,784 --> 00:11:33,374 So we can do that for the header as well on the user profile page, 165 00:11:33,374 --> 00:11:40,780 and then we've got this, so instead of it saying search, we can say profile. 166 00:11:42,830 --> 00:11:45,610 And these values are actually the values we 167 00:11:45,610 --> 00:11:50,470 want to pass in to the template this time. 168 00:11:50,470 --> 00:11:54,700 So, instead of having a blank object of values we want the actual 169 00:11:54,700 --> 00:11:58,380 values of the response from the GSM profile. 170 00:12:00,290 --> 00:12:06,730 And renderer.view for the footer. 171 00:12:06,730 --> 00:12:09,030 And we don't need to put in any values for the footer. 172 00:12:12,090 --> 00:12:19,450 And the same goes for the error page, and we wanna do error. 173 00:12:20,600 --> 00:12:25,530 And remember we had a variable called errorMessage, and 174 00:12:25,530 --> 00:12:31,080 that can be the error.message. 175 00:12:31,080 --> 00:12:36,450 So remember the error has a prop, property called message. 176 00:12:36,450 --> 00:12:39,335 So we're accessing the error message and 177 00:12:39,335 --> 00:12:44,453 we're setting it as this value, which eventually we'll put into here. 178 00:12:44,453 --> 00:12:48,668 [BLANK_AUDIO] 179 00:12:48,668 --> 00:12:51,900 And on the error page we also still want to search. 180 00:12:51,900 --> 00:12:56,700 So, if you, say, can't find another user, we can still search again. 181 00:12:56,700 --> 00:12:59,020 So I'm just gonna copy that search line. 182 00:12:59,020 --> 00:13:02,670 You can type it in if you want, but copy and paste works for me. 183 00:13:02,670 --> 00:13:04,430 And pop that there. 184 00:13:04,430 --> 00:13:09,730 So, the composition of the user profile page is the header, 185 00:13:11,010 --> 00:13:12,950 then the profile information and then the footer. 186 00:13:12,950 --> 00:13:15,697 Need to spell footer right. 187 00:13:15,697 --> 00:13:19,942 [BLANK_AUDIO] 188 00:13:19,942 --> 00:13:25,060 And then if errors is the composition is the header, which is up here. 189 00:13:26,200 --> 00:13:29,730 And then in the error callback, we've got the error with the error message, 190 00:13:29,730 --> 00:13:31,840 we've got the search, and then we've got the footer. 191 00:13:32,900 --> 00:13:36,820 And the composition of the homepage is the header, the search and the footer. 192 00:13:36,820 --> 00:13:38,960 There's no dynamic content in that. 193 00:13:40,730 --> 00:13:43,125 So, let's try that out one more time. 194 00:13:43,125 --> 00:13:47,903 [BLANK_AUDIO] 195 00:13:47,903 --> 00:13:52,308 When we go to the home route, we see the header and 196 00:13:52,308 --> 00:13:57,800 we see the body, and we see the search form, and the footer. 197 00:13:58,850 --> 00:14:00,000 Let's do chalkers. 198 00:14:00,000 --> 00:14:03,845 [BLANK_AUDIO] 199 00:14:03,845 --> 00:14:08,004 So we've got all this here, and it goes body and profile and body, 200 00:14:08,004 --> 00:14:12,760 but if you notice, this, this still going around because we haven't ended 201 00:14:12,760 --> 00:14:17,332 the request on all of our things, so let's do that now before we forget. 202 00:14:17,332 --> 00:14:26,690 So, we want to just do response.end, 203 00:14:26,690 --> 00:14:31,130 and we can do that up here as well for the home route. 204 00:14:33,310 --> 00:14:35,230 And we want to do that on our error. 205 00:14:37,560 --> 00:14:40,530 So we want to give an indication to the browser that 206 00:14:40,530 --> 00:14:43,730 there's no more information coming that is all done. 207 00:14:43,730 --> 00:14:45,381 So let's just try that one more time. 208 00:14:45,381 --> 00:14:50,565 [BLANK_AUDIO] 209 00:14:50,565 --> 00:14:54,565 So this is the homepage, and as you can see it's not doing that anymore. 210 00:14:54,565 --> 00:14:57,730 And let's go to chalkers. 211 00:14:57,730 --> 00:15:02,674 [BLANK_AUDIO] 212 00:15:02,674 --> 00:15:07,635 And as you can see, it shows all the avatar URL, the user name, 213 00:15:07,635 --> 00:15:10,600 badges and, and points. 214 00:15:10,600 --> 00:15:13,420 And let's go to an error page. 215 00:15:15,500 --> 00:15:17,270 And as you can see the header is still the same, 216 00:15:17,270 --> 00:15:20,660 but in here we've got the error message. 217 00:15:20,660 --> 00:15:24,100 And the search form again, so we can search for 218 00:15:24,100 --> 00:15:26,020 another user name if we get it incorrect. 219 00:15:27,160 --> 00:15:27,790 So there we have it. 220 00:15:27,790 --> 00:15:30,810 We've got our views being read from the file system and 221 00:15:30,810 --> 00:15:33,070 then put into the response. 222 00:15:33,070 --> 00:15:33,570 Cool.