Well come back.
So this is one of the more important lessons in the entire course.
But it's also going to be very different than anything we've done thus far.
And the reason that it's different is that I'm going to be showing you a bunch of code that you have
never seen before and you are not expected to understand at all.
The reason I'm doing this is I want to give you a conceptual overview of how all these pieces fit together
.
The database the server GET request post requests the browser.
All of these different things requests and responses.
I want to show all of that with a really simple working application.
So that's what I'm going to do here.
If I was teaching this in person this would be the point where I ask you to put your laptop down to
close your computer.
Obviously not a good idea here.
But the sentiment behind that is that I don't want you to be taking notes on this.
We're going to go over every single line and write it from scratch and make five six seven of these
different apps using these concepts.
So this is just about how the things fit together not the actual details of how they work.
With that said let's go ahead and get started here.
So this application is themed around dogs.
It's very very simple.
No styling at all.
Just a few different pages.
And the first thing we need to talk about is what this entire file is.
So this is our server file.
In my case it's called app dodge.
Yes this is written in Javascript.
And when I run this file it will actually start a server for me.
So when I've mentioned before when we send a request to read it dot com slash search there's code on
Reddit server that is listening for a request to read it.
Now com slash search and then it sends you back the correct data in a response.
When when I say there's code on Reddit server this is the kind of code we're talking about.
So even though read is done in Python and this is javascript This is our code on the server that is
listening for different requests and then responding with different pieces.
There are three big chunks and this up top is just getting our application set up.
So including the right libraries as you can see there's a few dependencies.
Again we'll go over all of them later.
Then we have some database stuff.
So this is setting up our database so that our database knows every dog has a name and a breed and they're
both strings.
And that's all mentioned about that for now.
And then there are these things called wraps which is where we'll spend the bulk of our time in this
lesson before we do that though I want to point out the most important part to actually start the server
which is at the very end here this line doesn't matter the syntax but what does matter.
There's number here three thousand.
What this will do is when we run this application when I run this file in my terminal it will actually
start to server up and our application will be on port 3000.
So let me show you what I mean.
I'm going to start this server up by running the file again doesn't really matter what I'm doing there
.
And you can see I get a message serving dog demo on port 3000.
So what I have my text editor I'm writing the code in here for my server.
Then in my terminal I'm actually running the server.
So now this code is being run all of this code is run and this line in particular started a server on
port three thousand.
So if I go to port three thousand now and the way I get there is local host Colan 3000 I see something
that says home page.
Let's talk about how I'm getting that home page HMO if we view page source.
You can see all that I got as a response was a single H-1 that says home page and that's it.
So if I go back to my server here there are a few things I want to point out.
The first one is that in my terminal where the server has started there's a little message that was
printed out.
And what this tells us is that someone made a get request which is what this says here to the you arole
slash.
So localhost 3000 slash.
So there's nothing afterward.
We call this the root path or just route which is basically what we want our home page to be.
So again I went to localhost 3000 and hit enter.
And that got me some code but if I went to localhost 3000 slash dogs that gives me some different stuff
back in if I view the page source on this
can see if we get some more content that's different than the content we got the first time and that's
because this is a different row or a different route.
So in this case I wasn't just asking for Slash.
I was asking for Slash dogs.
And if you look in the terminal output you can see there's a difference between a get request to slash
or a get request to slash dogs.
This is just showing me so I can show you what's happening but this isn't logic or anything.
It's just a window into the requests that are being made.
OK so that's the request side of things.
When I hit enter I make a request.
Same thing here.
I'm just making them to two different places.
And of course I can make those get requests with postman as well.
So let's make and get request to localhost 3000 just like that.
Take a moment and think about what you expect us to see when I hit send.
There we go I just get the exact same H-1 and if I do local host 3000 slash dogs which is a get request
and I hit send I get the same HD mail that we got when I made a get request in the browser by hitting
enter.
Now let's talk about the logic that makes all of this happen on the server side.
So I'm going to go back to sublime and focus on these three parts right here and in particular these
two.
I know I'm a broken record on this topic but the syntax is not the important part.
We will be spending so much time on actually writing these routes that that's not significant.
What is significant is that in this first little chunk this code is listening for a get request to slash
so get slash.
And when that happens we are rendering a page called home.
So again when a get request is made to slash localhost 3000 slash nothing else then we're going to render
something called home.
And over here I have the file called home.
Doesn't matter what the Ejay yess.
And inside of it there's an H1 that says homepage.
So let's add something else in there a paragraph low just like that and save.
And now when they make a get request only a get request to slash I get the contents of that file home
sent back to me and in order for those changes to work I actually have to restart my server.
So I'll start now and watch I'll put this over on the side and I'll go back to Chrome get my server
there again.
I'm going to make a get request to localhost 3000.
As you can see it tells me a get request was made to slash.
And we got this content back.
So again our code here is listening for we get requests slash and deciding what file to send back.
Now here's another more complicated version of that where we're listening for a get request to slash
dogs.
And then there's some other code that's happening here.
And I'll just read a comment.
All that happens here is get all the dogs from the database so I have some in our database already.
And then the next part is render the dogs file and we'll just leave it at that for now.
So we're getting all the dogs in the database and rendering the dogs file which is right here.
And this one looks a little bit different.
It's not just him.
We have some weird stuff here that we haven't seen before.
But at the end of the day what happens is when I go to slash dogs our app is listening for a get request
to slash dogs.
When it gets one it retrieves all of the dogs in the database and each one has a name and or breed and
then it makes a little lie for each one.
So each one of these is an ally with a name and a breed.
So again we have two routes slash as a get request and slash dogs as a get request and we get two different
files and a little bit of logic when we go to slash dogs versus when we just go to slash.
There's no logic happening nothing's happening with the database.
It's just giving us a static page.
But this is not static.
This depends on what's coming from the database.
Go back to the server here to our code and I'll talk a little bit about this line here.
So we're rendering a page a template called Dogs which is what's written right here dogs.
Yes but we're passing data to this template because this doesn't have an ally here that says resti dash
mutt and it doesn't have another one afterwards in the template that says why it dash golden as you
can see that's that's what we're getting in the browser.
But our file doesn't have any of that.
And that's what makes it dynamic.
This file can be different every single time that it runs depending on what's in the database.
So what we actually do is define a template or a pattern for what we want to happen which is for every
dog dog stuff for each we want to make an ally where we're going to make the name bold or strong dash
the breed just as plain text.
So that's how we end up with this for every dog in the database that we retrieve we're going to loop
through and make a single ally with the name in bold dash that breed not in bold.
So leave it at that.
Let's summarize now.
So we have our code that creates the server right here.
All of this is the only code responsible for making our server.
We have some set up code doesn't really matter.
Some database code doesn't matter much either.
And then these two routes and those do matter a lot.
So this is how we get different code and different files depending on the you are all that we request
we make a request to slash as it get request.
We get one file home we make a get request to slash dogs and a little bit more happens behind the scenes
.
It finds all the dogs in the database and then it renders that dogs file.
But the dogs file is dynamic because it takes in a bunch of dogs and for each one.
It makes an ally.
So if we had 10000 dogs in the database we would end up with 10000 allies.
And the very last point I want to make is that we have a text editor here that I have a terminal where
I'm running the server and then I'm going in the browser and visiting that web page by making a request
.
Those are the three tools that we need.
So those three things the text editor where we write the code at terminal or somewhere where we can
start the server and have it listening.
And then finally a browser where we can actually go and make requests.
So we don't have to use a browser We could use postman but nobody uses postman to actually interact
with our web page in the next few videos when we start writing our own web applications.
We'll have those three same tools.
So we're going to have a text editor a browser and a terminal or somewhere to run the server.