We have our Express server in place and we have our four routes set up for each we're sending back a
text response which gets shown in the browser.
Now in reality we're never going to just send back a string.
We're either going to send back HDMI all designed to be rendered in the browser or we're going to send
back Jason designed to be consumed and used by code.
Let's go ahead and explore how we can get both of those done.
And the answer is once again still using response dot send.
We just change what we pass inside.
So imagine that I wanted to render some HDMI out I could remove the contents of the string and put some
HDMI All right inside of the string.
Now if you're not familiar with AGL that is a ok.
We're gonna be covering the basics as we explore the web server setup process.
Right here we're going to use an h1 tag to set up a nice large title.
So I'm going to open my tag using the following syntax.
Then I'll close the h1 tag using the following syntax and right inside I'm going to put my title content
so right here for the H one element I'll just say something like whether.
Now if I save the file the server has restarted and we can view our HD CML in the browser.
I'm going to go from forward slash whether to the root of my application and what do I see.
I see whether showing up in nice big font.
So if I want to send HDL back I can simply provide it right inside of the string I pass to response
dot send Express is going to detect that and it's going to get everything sent back correctly.
Next up we can also send it back.
Jason this is going to be useful especially when we want to send back data that's intended to be consumed
by code down below for the moment.
Let's go ahead and do that for help though in the end of the day.
Help is indeed going to render an HDL page right here to do that.
All we do is we provide either an object or an array as the value to send.
So as an example I can pass to send an object and I could set up some properties.
Let's set up some properties about ourselves.
So name Andrew and age twenty seven.
Now when we visit this page we're gonna get a Jason response back.
EXPRESS Is gonna detect we've provided an object it is automatically going to string ify the Jason for
us and it's gonna get it sent to the requester correctly with this code in place and our files saved
I can navigate over to forward slash help right here forward slash help and when I visited what do I
see I see my past Jason by our Jason for matter extension I could always view the raw version right
here this is the raw response this is the string of IDE version of the object we created and once again
the past response showing up.
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
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
of objects and I could have objects with name for each so I could have name Andrew for the first object
then I could add a second object to the array with something like name right here Sarah.
Now if I was to refresh the page I would still see my Jason showing up I have my array of objects each
with the properties configured and I can use the chrome extension to navigate them right here.
Once again we have the raw version as well.
So now we have our HDL and our Jason responses in place and we're going to move on to the challenge
for this very quick video.
The goal here was to just show you how you can use send to send back other types of information all
of which we'll be exploring more extensively as we build out more complex express applications.
Right here I have your challenge for the video you're going to update the two routes you created in
the last one.
So for the about route you're going to set that up to render a title using HDL.
So you want to render about but as a large h t AML title then for whether you're going to set that up
to send back a Jason response and that's actually what weather is going to end up being.
That is how the front end of our application we'll get the weather from the back end.
Now for the moment we're just going to spoof the response by setting up a static object so make sure
to send back an object with a forecast and location string as properties so the location would be something
like Philadelphia and the forecast could be something like it's 50 degrees though we'll use our complete
forecast string and location string a bit later when we actually integrate everything together.
Last up to your work when you visit forward slash about.
You should see your HDL title when you visit forward slash whether you said she your object with those
two properties.
All right pause the video and when you're done click play
how'd that go.
I'm going to kick things off by setting up an HRT email response for about right here.
I'm gonna remove my standard string text and I'll put HDL inside of here instead I can open up my h1
tag I can close it off and I can put my title right inside for this page.
I'll just use about with this in place.
We can now go ahead and move on to weather.
For this I wanted you to send back some.
Jason.
That means we're going to provide either an array or an object in this case we called for an object.
So right here I'll set up an object with those two properties forecast.
I could just say something like it is snowing.
As an example for now it actually is.
Then the next one is the location property and I'm currently filming from Philadelphia.
So I'll toss that into the mix now that we have both of these in place.
I'm going to remove the challenge comments and test both out to make sure they're working as expected.
So over in the browser that's going to be forward slash about where I should see my about title.
And I do then forward slash weather where I should see my Jason response and that is exactly what I'm
getting now that we have this in place.
We can send back regular text we can send back Jason and we can send back each team out.
That's where we're gonna stop for this video in the next video.
You're going to learn how you can serve up the contents of an entire directory.
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
of our node server inside of a string.
It's gonna become a real pain.
It would be nice to have a separate HDL file.
We'll dive into the details of that in the next video.
So let's go ahead and jump right in.