1 00:00:00,000 --> 00:00:04,737 [MUSIC] 2 00:00:04,737 --> 00:00:09,718 As part of the HTTP specification, or how servers and browsers agree to talk to each 3 00:00:09,718 --> 00:00:14,580 other, there are values that are hidden from the user called Headers. 4 00:00:14,580 --> 00:00:18,670 These headers can be programmatically created by the clients and the server. 5 00:00:19,910 --> 00:00:24,180 Once each headed that the service ends, it's called Content Type. 6 00:00:24,180 --> 00:00:29,390 The instructs the browser how to handle the string of information in the response. 7 00:00:29,390 --> 00:00:32,960 The browser would have no other way of knowing what to do with it. 8 00:00:32,960 --> 00:00:37,390 The data in the response looks the same to the browser, just a string of data. 9 00:00:38,800 --> 00:00:41,070 Let's take a look at our code right now, 10 00:00:41,070 --> 00:00:47,220 to see why our response is being handled as plain text and not as HTML. 11 00:00:47,220 --> 00:00:51,140 Okay, so let's take a look in our renderer, and 12 00:00:51,140 --> 00:00:54,130 see that we've got this here. 13 00:00:54,130 --> 00:00:57,200 The content type with text plain HTML. 14 00:00:57,200 --> 00:01:02,839 Now, this is repeated in multiple places, so let's create a common header. 15 00:01:02,839 --> 00:01:12,839 [BLANK_AUDIO] 16 00:01:15,297 --> 00:01:16,840 And. 17 00:01:16,840 --> 00:01:22,060 Set that variable to what we have everywhere in our code. 18 00:01:22,060 --> 00:01:27,006 So, there we go and 19 00:01:27,006 --> 00:01:32,950 there we go. 20 00:01:32,950 --> 00:01:35,110 So at the top here we've got common headers and 21 00:01:35,110 --> 00:01:38,540 we've go the content type set to text plain. 22 00:01:38,540 --> 00:01:40,582 But what should we change it to? 23 00:01:40,582 --> 00:01:47,406 So let's look in Google and see what it comes up with. 24 00:01:47,406 --> 00:01:55,850 So internet content types. 25 00:01:55,850 --> 00:01:59,440 And the first is the internet media type on Wikipedia. 26 00:01:59,440 --> 00:02:00,150 Let's take a look. 27 00:02:02,450 --> 00:02:06,090 So, if we scroll down, we should see a list. 28 00:02:06,090 --> 00:02:11,970 So, we've got Type application, we've got Type audio, we've got Type example, 29 00:02:11,970 --> 00:02:16,830 we've got Type image and those are all the common image formats, Type message, 30 00:02:16,830 --> 00:02:19,860 Type model, Type multipart, Type text. 31 00:02:19,860 --> 00:02:22,420 And we've got text/html. 32 00:02:24,204 --> 00:02:25,400 So let's copy and paste that. 33 00:02:26,950 --> 00:02:30,640 And go back to our code, and 34 00:02:30,640 --> 00:02:34,960 swap out text plain to text/html. 35 00:02:34,960 --> 00:02:36,890 And let's start the app. 36 00:02:42,020 --> 00:02:44,520 And go to port 3000. 37 00:02:44,520 --> 00:02:46,030 And there we have it. 38 00:02:46,030 --> 00:02:47,600 We've got the search page. 39 00:02:49,080 --> 00:02:50,778 We've got the profile page. 40 00:02:50,778 --> 00:02:55,184 There's me. 41 00:02:55,184 --> 00:02:56,950 And. 42 00:02:56,950 --> 00:02:58,070 We've got an error page. 43 00:03:01,940 --> 00:03:02,620 Cool. So it is, 44 00:03:02,620 --> 00:03:04,610 there was an error in guessing the profile of chalkers123. 45 00:03:04,610 --> 00:03:05,340 Not found. 46 00:03:09,330 --> 00:03:11,320 So let's go back to the content side. 47 00:03:11,320 --> 00:03:15,625 Before we have the browser thinking that it was textual data because 48 00:03:15,625 --> 00:03:18,240 the content type was text plain. 49 00:03:18,240 --> 00:03:21,330 So we changed it back to text/html. 50 00:03:21,330 --> 00:03:25,380 Now on this page here is probably all the content types that you'll 51 00:03:25,380 --> 00:03:27,460 ever need to programatically do. 52 00:03:27,460 --> 00:03:32,403 So there's application/pdf for example, 53 00:03:32,403 --> 00:03:37,690 which will launch a PDF document viewer. 54 00:03:37,690 --> 00:03:39,540 This image/jpeg. 55 00:03:39,540 --> 00:03:41,760 Which is for JPEG images. 56 00:03:41,760 --> 00:03:45,100 Image/gif, image/png, and so forth. 57 00:03:45,100 --> 00:03:49,980 So if you're ever need to serve these types of files, 58 00:03:49,980 --> 00:03:51,710 you may want to change the content type. 59 00:03:52,760 --> 00:03:57,090 Or if you dynamically generating a PNG or 60 00:03:57,090 --> 00:04:00,320 a JPEG, you may want to set the content type. 61 00:04:00,320 --> 00:04:05,080 So in your web development career, you probably want to reference 62 00:04:05,080 --> 00:04:11,120 something like this when you're programming dynamic things like JSON. 63 00:04:11,120 --> 00:04:12,510 If you're making an API for example, 64 00:04:12,510 --> 00:04:18,100 you'd want to do application JSON, or you'd want to do XML. 65 00:04:18,100 --> 00:04:20,120 In doubt, various different formats, so 66 00:04:20,120 --> 00:04:25,530 if you were creating a RSS atom feed, you would use application atom plus XML. 67 00:04:25,530 --> 00:04:30,680 So this is what you would do when you're creating larger websites, 68 00:04:30,680 --> 00:04:33,215 but since we're just dealing with HTML right now, we'd, 69 00:04:33,215 --> 00:04:36,350 we'd just using the text HTML content type.