1
00:00:00,330 --> 00:00:06,060
We have our Express server in place and we have our four routes set up for each we're sending back a

2
00:00:06,060 --> 00:00:09,500
text response which gets shown in the browser.

3
00:00:09,510 --> 00:00:13,080
Now in reality we're never going to just send back a string.

4
00:00:13,080 --> 00:00:18,510
We're either going to send back HDMI all designed to be rendered in the browser or we're going to send

5
00:00:18,510 --> 00:00:22,230
back Jason designed to be consumed and used by code.

6
00:00:22,560 --> 00:00:25,640
Let's go ahead and explore how we can get both of those done.

7
00:00:25,770 --> 00:00:29,890
And the answer is once again still using response dot send.

8
00:00:30,030 --> 00:00:33,000
We just change what we pass inside.

9
00:00:33,000 --> 00:00:39,720
So imagine that I wanted to render some HDMI out I could remove the contents of the string and put some

10
00:00:39,720 --> 00:00:42,510
HDMI All right inside of the string.

11
00:00:42,510 --> 00:00:46,370
Now if you're not familiar with AGL that is a ok.

12
00:00:46,440 --> 00:00:52,310
We're gonna be covering the basics as we explore the web server setup process.

13
00:00:52,410 --> 00:00:58,410
Right here we're going to use an h1 tag to set up a nice large title.

14
00:00:58,410 --> 00:01:02,070
So I'm going to open my tag using the following syntax.

15
00:01:02,220 --> 00:01:09,720
Then I'll close the h1 tag using the following syntax and right inside I'm going to put my title content

16
00:01:09,950 --> 00:01:14,860
so right here for the H one element I'll just say something like whether.

17
00:01:15,030 --> 00:01:21,230
Now if I save the file the server has restarted and we can view our HD CML in the browser.

18
00:01:21,330 --> 00:01:26,880
I'm going to go from forward slash whether to the root of my application and what do I see.

19
00:01:26,880 --> 00:01:30,180
I see whether showing up in nice big font.

20
00:01:30,360 --> 00:01:37,050
So if I want to send HDL back I can simply provide it right inside of the string I pass to response

21
00:01:37,200 --> 00:01:44,040
dot send Express is going to detect that and it's going to get everything sent back correctly.

22
00:01:44,040 --> 00:01:46,230
Next up we can also send it back.

23
00:01:46,230 --> 00:01:52,530
Jason this is going to be useful especially when we want to send back data that's intended to be consumed

24
00:01:52,650 --> 00:01:55,300
by code down below for the moment.

25
00:01:55,380 --> 00:01:58,520
Let's go ahead and do that for help though in the end of the day.

26
00:01:58,560 --> 00:02:04,160
Help is indeed going to render an HDL page right here to do that.

27
00:02:04,170 --> 00:02:10,520
All we do is we provide either an object or an array as the value to send.

28
00:02:10,530 --> 00:02:15,450
So as an example I can pass to send an object and I could set up some properties.

29
00:02:15,600 --> 00:02:17,970
Let's set up some properties about ourselves.

30
00:02:17,970 --> 00:02:21,640
So name Andrew and age twenty seven.

31
00:02:21,840 --> 00:02:26,150
Now when we visit this page we're gonna get a Jason response back.

32
00:02:26,250 --> 00:02:33,210
EXPRESS Is gonna detect we've provided an object it is automatically going to string ify the Jason for

33
00:02:33,210 --> 00:02:39,690
us and it's gonna get it sent to the requester correctly with this code in place and our files saved

34
00:02:39,930 --> 00:02:46,950
I can navigate over to forward slash help right here forward slash help and when I visited what do I

35
00:02:46,950 --> 00:02:54,150
see I see my past Jason by our Jason for matter extension I could always view the raw version right

36
00:02:54,150 --> 00:03:00,990
here this is the raw response this is the string of IDE version of the object we created and once again

37
00:03:00,990 --> 00:03:03,660
the past response showing up.

38
00:03:03,660 --> 00:03:09,750
So now we know how to send back H to you now and we know how to send back Jason it's important to note

39
00:03:09,810 --> 00:03:15,540
that this Jason could be an array if we needed it to be I can set up an array let's call this an array

40
00:03:15,540 --> 00:03:22,890
of objects and I could have objects with name for each so I could have name Andrew for the first object

41
00:03:23,220 --> 00:03:28,970
then I could add a second object to the array with something like name right here Sarah.

42
00:03:29,010 --> 00:03:36,000
Now if I was to refresh the page I would still see my Jason showing up I have my array of objects each

43
00:03:36,000 --> 00:03:41,820
with the properties configured and I can use the chrome extension to navigate them right here.

44
00:03:41,850 --> 00:03:44,820
Once again we have the raw version as well.

45
00:03:44,820 --> 00:03:50,790
So now we have our HDL and our Jason responses in place and we're going to move on to the challenge

46
00:03:50,790 --> 00:03:53,030
for this very quick video.

47
00:03:53,040 --> 00:03:59,340
The goal here was to just show you how you can use send to send back other types of information all

48
00:03:59,340 --> 00:04:05,340
of which we'll be exploring more extensively as we build out more complex express applications.

49
00:04:05,340 --> 00:04:10,170
Right here I have your challenge for the video you're going to update the two routes you created in

50
00:04:10,170 --> 00:04:11,080
the last one.

51
00:04:11,220 --> 00:04:16,950
So for the about route you're going to set that up to render a title using HDL.

52
00:04:16,950 --> 00:04:23,520
So you want to render about but as a large h t AML title then for whether you're going to set that up

53
00:04:23,520 --> 00:04:28,700
to send back a Jason response and that's actually what weather is going to end up being.

54
00:04:28,800 --> 00:04:33,520
That is how the front end of our application we'll get the weather from the back end.

55
00:04:33,540 --> 00:04:39,330
Now for the moment we're just going to spoof the response by setting up a static object so make sure

56
00:04:39,330 --> 00:04:46,650
to send back an object with a forecast and location string as properties so the location would be something

57
00:04:46,650 --> 00:04:52,650
like Philadelphia and the forecast could be something like it's 50 degrees though we'll use our complete

58
00:04:52,710 --> 00:04:59,230
forecast string and location string a bit later when we actually integrate everything together.

59
00:04:59,430 --> 00:05:02,420
Last up to your work when you visit forward slash about.

60
00:05:02,420 --> 00:05:08,090
You should see your HDL title when you visit forward slash whether you said she your object with those

61
00:05:08,090 --> 00:05:09,380
two properties.

62
00:05:09,470 --> 00:05:12,320
All right pause the video and when you're done click play

63
00:05:16,360 --> 00:05:17,200
how'd that go.

64
00:05:17,200 --> 00:05:22,130
I'm going to kick things off by setting up an HRT email response for about right here.

65
00:05:22,180 --> 00:05:29,470
I'm gonna remove my standard string text and I'll put HDL inside of here instead I can open up my h1

66
00:05:29,470 --> 00:05:34,620
tag I can close it off and I can put my title right inside for this page.

67
00:05:34,630 --> 00:05:37,420
I'll just use about with this in place.

68
00:05:37,420 --> 00:05:40,180
We can now go ahead and move on to weather.

69
00:05:40,180 --> 00:05:42,250
For this I wanted you to send back some.

70
00:05:42,250 --> 00:05:43,020
Jason.

71
00:05:43,120 --> 00:05:49,180
That means we're going to provide either an array or an object in this case we called for an object.

72
00:05:49,180 --> 00:05:53,410
So right here I'll set up an object with those two properties forecast.

73
00:05:53,710 --> 00:05:57,280
I could just say something like it is snowing.

74
00:05:57,280 --> 00:06:00,100
As an example for now it actually is.

75
00:06:00,220 --> 00:06:05,380
Then the next one is the location property and I'm currently filming from Philadelphia.

76
00:06:05,410 --> 00:06:09,840
So I'll toss that into the mix now that we have both of these in place.

77
00:06:09,880 --> 00:06:15,190
I'm going to remove the challenge comments and test both out to make sure they're working as expected.

78
00:06:15,280 --> 00:06:21,250
So over in the browser that's going to be forward slash about where I should see my about title.

79
00:06:21,250 --> 00:06:27,970
And I do then forward slash weather where I should see my Jason response and that is exactly what I'm

80
00:06:27,970 --> 00:06:30,270
getting now that we have this in place.

81
00:06:30,340 --> 00:06:36,220
We can send back regular text we can send back Jason and we can send back each team out.

82
00:06:36,220 --> 00:06:40,160
That's where we're gonna stop for this video in the next video.

83
00:06:40,210 --> 00:06:44,370
You're going to learn how you can serve up the contents of an entire directory.

84
00:06:44,470 --> 00:06:50,560
So if we have a really long web page with a lot of HDMI all we don't want to write all of that inside

85
00:06:50,560 --> 00:06:52,870
of our node server inside of a string.

86
00:06:52,990 --> 00:06:54,690
It's gonna become a real pain.

87
00:06:54,730 --> 00:06:58,110
It would be nice to have a separate HDL file.

88
00:06:58,120 --> 00:07:01,030
We'll dive into the details of that in the next video.

89
00:07:01,180 --> 00:07:03,630
So let's go ahead and jump right in.