So how do we now turn this static site,
which only consists of pre-written HTML,
CSS and JavaScript code into a dynamic site
that's served by app.js?
Well, for this, let's first of all think
about what we wanna do.
In the end, we wanna define a couple
of routes here, a couple of paths
that can be reached with GET requests
for which we wanna return different HTML pages.
Before the HTML pages themselves were the paths
that could be accessed,
now we will just wrap them with these extra routes defined
with app.get but the goal will still be
to, in the end, just return these HTML files.
In a second step later,
we will then turn some of these files
into dynamic templates,
and I'll come back to what that is
but the first step is to just return these files.
And to do that, we can now start
by, first of all, defining the different routes
that we wanna have.
So we already got this root route here
as it's often called for slash nothing
after the domain.
And that could be the route which we use
for serving index.html.
So for serving our starting page.
Then we should have a route for serving a list
of shared restaurants,
a route for letting users share new restaurants.
This route here,
which will actually just show a confirm page
after a restaurant has been shared.
And this about route.
And for this, I'll add a second route here,
again for a get request.
And it's up to you which path you wanna use here
for which path in the URL a certain page
should be displayed.
But let's say we're talking about the list
of restaurants, then indeed,
/restaurants could be a path that makes a lot of sense
because we wanna show a list of restaurants
if the user visits our domain,
so localhost:3000 during development
or later after deployment,
our customdomain.com/restaurants.
And then here therefore, in this function,
we now wanna send back a response as we did before
but this response should actually be this HTML file.
And thankfully that is something
that can easily be done with Express.
Now, to do that,
I'll just restructure my files here a little bit
and I will add a new folder in this project,
which I'll name views.
Now, you don't have to call it views,
but it's a name that's commonly chosen
because this folder should hold the files
that are served to the browser,
the files that contain the HTML content.
And we typically call those files views.
And hence, I'll now grab these HTML files
from the frontend-site folder
and move then into that views folder.
I'll just drag them here into views
so that they're no longer in frontend-site.
For the moment, I'll keep scripts and styles in there
but we'll move those later as well.
But now we got that views folder
with our different HTML files,
and now here in this restaurants route,
I wanna return the restaurants.html file.
Now, as I mentioned,
thankfully Express makes that easy for us
because we have this response object
and we don't just have the send method here
for sending back a response like we're doing it here
with some text content
but we also have the sendFile method.
And you can probably guess what this function does.
It sends back a file as a response.
And actually, it's even a smart method
that will look into the file
and it will basically see
if that file contains HTML content,
and it will then return this file
such that the browser automatically understands
that it receives HTML content and treats it as such.
So if we pass a HTML file to sendFile,
it will work just like that.
Now, the important thing now just is that sendFile
don't just wants the file name,
so we don't just write restaurants.html here,
but we need to provide a full path to that file.
Express won't automatically scan your entire project folder
for that file.
And therefore, we need to construct a path
just as we did it before
in the previous course section as well
with that built-in path package
that can be required like this
and that's built into NodeJS.
With this added, we can build a path to this file,
and then store it in a constant
that could be called htmlFilePath.
And we then call the join method here again,
and start with __dirname
to get the absolute path to this project folder.
And then views to dive into that views sub folder.
And then as a third and last parameter value,
the file name, which is restaurants.html like this.
And now we've got this htmlFilePath here
and that's what now should be sent back as a file.
And that should be all.
If I now save that,
the server automatically restarts
because we have nodemon up and running,
and if we now go to localhost:3000
and enter /restaurants here,
then we see the restaurants.html file
for the moment without any styles
because these styles here,
which are still in frontend-site
aren't loaded correctly
for one because the link here
in restaurants.html is not valid anymore.
This link seen relative
from the restaurants.html file is not correct.
It would look for a styles sub folder
in the views folder, which doesn't exist.
But even if you would move your styles over to views,
it wouldn't work.
If I do that, then theoretically,
this link here in restaurants.html is correct.
It points at a styles folder,
which sits next to the HTML file, which is the case.
And then to the restaurants.css file
but still with that change made, if I reload,
it still wouldn't work.
And it wouldn't work because if we open the developer tools,
in the Network tab, we see that loading this CSS file
in the end fails.
It fails, it's not working.
And we'll fix this soon
but for the moment, the most important thing
is that this is how we can return HTML files.
And with that, we already got a great improvement
because with that,
we don't have to write our HTML code
in strings as we did it before,
but we can use regular HTML files
with all the features we learned about
and it just works,
except for the styles which we'll fix soon.
Now, therefore, my challenge for you
is to now also migrate all these other HTML files,
choose some fitting route paths
and send back those files,
and then in the next step,
we'll ensure that styles and scripts work again.
So did you succeed?
Let's now do that together.
Now, for that, I need to register more routes
and also rewrite this root route here for slash nothing,
and I'll start with that.
There I wanna send back the index.html file,
and therefore, I'll also construct the filePath here
as I did it before.
Hence I'll just copy that code.
But I wanna load index.html.
And then, of course, here I also just send back a file
and the file I wanna send back is htmlFilePath.
And that's not all though,
I will now also copy the restaurants route
and register one route here for recommend.
So for this recommend route here
where I send back recommend.html.
And then I will also copy that again
and register my confirm route
where I send back confirm, oops, confirm.html.
And then, last but not least,
we have the about route,
so I'll add /about and send back about.html.
Now, that's all nice.
One additional change that needs to be made
is now in the HTML files.
There, I've got a couple of links.
For example, in the navigation.
At the moment, I'm still linking to the HTML files here
and that's not correct anymore.
That was correct when we basically served the static files
where the HTML files themselves
were the different paths that we could enter.
Now we get a custom server
that expects paths like this, /confirm, /about,
not HTML file names.
And therefore, we should adjust these different links
and instead of linking to restaurants.html,
we should ink to /restaurants.
The leading slash here is important, by the way,
since this will generate an absolute path,
which means that this will always be appended directly
after the domain.
Even if we already are on a route like /recommend,
it would replace /recommend with /restaurants.
If you only had restaurants here without a slash,
if you would be viewing the recommend page at the moment,
then this would be appended after /recommend.
It would be treated as a relative path seen
from the page you're currently on.
And that's not what we want here,
hence the leading slash is important.
And then here we have /recommend
and here we, of course, have /about.
And now we'll have to repeat it a couple of times.
Here on the logo, by the way,
it's just slash to go back to the starting page.
And we have to repeat this.
Also here in the mobile navigation
where we go to /restaurants
and then here /recommend,
and then here to /about.
And we'll have to do this in all the HTML files.
Thankfully, the structure's always the same though
so we can just copy this aside
and then here this header,
so we can copy all of that like this,
and then just go to recommend.html
and just replace the header
and aside with that.
And then on index.html, it's the same.
Here we can replace header and aside with that.
And if that seems a bit cumbersome and annoying,
it is and we'll find a better way
of handling this a little bit later in this module.
Now, here on index.html,
we also wanna go to these links down there
in this actions unordered list
and also point at /restaurants here
and /recommend here.
And then we go to confirm.html
and also replace the header and aside here
with our updated header and aside.
And do the same in about.html.
Replace header and aside.
If you do all of that and you save everything,
if you reload, it should still work
and you should be able to use these links,
and as you see, even though the styling is missing,
the pages do change.
If I manually enter /confirm, that also works.
We see this confirmation page.
And hence now we did successfully migrate our HTML files
to this Node Express backend
because we are now using Node and Express
for serving these HTML files.
Now let's make sure that we can also serve these styles
and scripts again.