Now, before we now conclude this module,
I want to split my code even a bit more.
And I want to use a new feature
offered by the Express package,
which comes in handy
if you have a lot of routes.
So a lot of handlers as we have them here in app JS.
Often you want to group your routes in different files
by feature or by responsibility.
Now, for example, here in this basic demo website,
we have a lot of routes
that deal with our restaurants
here at the detail page and the recommend page,
and the post route and on.
But we also have some pages
that are of a more general nature,
for example, about or the starting page.
These are very simple routes
that are not directly related to getting
or storing restaurants.
And therefore,
you might want to split these different routes
into different files.
And for this, as I mentioned,
Express has an extra feature that helps us with that.
It has a so-called a router
which allows us to group and split our routes,
which again, can make bigger project easier to maintain.
And for that, I'll add a new folder in this project,
and it is quite common that as your project grows,
you add more and more folders
to hold different code files.
And I'll name this new folder, routes,
because I want to store my routes,
my route configuration in that folder.
And in there I'll add two files,
I'll add a restaurants.js file,
and I will add a default.js file.
Both names are up to you.
Now, default should hold my standard routes,
which are not directly related to restaurants
and restaurants JS on the other hand
should hold my restaurant's specific routes and pages.
Now I'll start with default JS
and I'll get my main route here,
and move that into default JS,
this main slash nothing route.
And I'll do the same here for the about route
and cut this from app JS
and move that into default JS as well.
Now we don't have the app object available in here,
and I also don't want to create it
in that default JS file
because we should only create such an Express app once
and that should happen in our main app file.
So I don't want to move that code.
Instead, to allow us to outsource routes
into different files,
Express has a standalone feature.
And for this, in default JS, I'll import Express.
So I'll again, require Express as I did it before,
but I will not execute it as a function.
But instead, on this Express object,
which it also is, there is a router function
which we can execute.
And this gives us a router object,
which works a bit like app,
but internally is a bit different.
Now, since it works a bit like app,
we can replace app with it.
And just like app router also has get and post methods
to register different route handlers.
So we can leave that code as it is,
and just use router instead of app.
Now I want to export my configured router,
where I added these routes,
from that default JS file
so that I can bring it back into app JS,
so that I can use this router in app JS.
And for this I'll again use module exports
and export router like this.
Router already is an object,
we now just added our configuration.
And now with line here,
we are exporting this configured router object.
Now that's step number one.
Now in app JS, for the moment,
I will leave all the other routes,
but now I want to also merge in my router routes
defined in default JS,
I want to merge them into this app
which also has these other routes.
And that can be done with middleware again.
First of all, I want to import these routes.
So I want to require them.
So right under resData, I'll add my defaultRoutes.
I think that's a fitting name for this constant
which will describe what will be stored in it,
by requiring ./routes/default
without a file extension as you learned.
That will give us that router
that contains our default routes,
hence this constant name.
And now after running through that standard middleware,
which should execute for every incoming request,
I want to add these default routes as handlers
that should be considered,
and that can be done with app.use again,
and here, I just want to make it clear
that every incoming request
that starts with a slash
should be handled by defaultRoutes,
which we simply tell Express by adding this line.
Now what's very important here is
that with get and post and so on,
the path that we added here as a first parameter value
acted as an exact match.
So, this route here will only become access
if we have our domain slash restaurants.
With 'use', that's different.
This first parameter value here then acts as a filter
which only checks for the beginning of the incoming path.
So slash nothing, as I have it here,
will become active for all incoming requests.
And that simply means that all incoming requests
will be forwarded to my defaultRoutes.
So will be funneled through these routes.
And if one of these routes matches,
my incoming request will be done.
Only if none of these routes here
matches my incoming request,
we'll go back into app JS
and have a look at the other routes as well.
And that's how we can define these routes
in a different file
and still include them in my main app,
with help of 'use' and this built-in router feature,
which turns out to be a built-in middleware
that allows us to register our own custom routes
in a different file.
Hence, if you save everything here,
this application works as before,
and the starting and about page also works as before,
but now we outsourced these routes.
And now I want to do the same
for my restaurant related routes.
So I'll grab all the other routes which I have here,
and cut this, and move that into restaurants JS.
Now just as before,
here, I want to use that Express router.
So I will require Express here.
And then create my router by accessing Express router
and executing it as a function.
And then we can replace app with router,
just like that.
And do that for all those routes.
And then at the end, again,
I'll export this configured router
to make it available outside of this file as well.
And back in app JS,
we can now require that configuration file
and the router there as well.
So now I get my restaurantRoutes
by requiring ./routes/restaurants.
And I want to load those as well.
And again, I want to funnel all incoming requests
through these restaurantRoutes.
First, I funnel them through defaultRoutes,
but if I don't handle them there,
I'll funnel them through restaurantRoutes.
We could also change this starting filter
and say only requests
where the path starts with /restaurants
should be handled by these routes.
But that would be something I don't want to do
because then, the paths defined in restaurants JS
would be evaluated after this filter.
So if I start with /restaurants here,
then this route would only become active
if the incoming path is /restaurants/restaurants,
because I have it twice.
The first time here in the filter in app JS
and the second time here.
Now, I could of course delete it here
in the second time, and then this would work.
But for other routes like recommend,
we would have a problem
because this would now only become active
if I have restaurants/recommend,
and that is simply not what my links
in my views, in my templates are configured to lead to.
So we would have to change all these links
to make that work.
And whilst that is something we could do,
it's not something I want to do here.
So I'll change this back
and not apply any filter here.
Now, there's also one other thing we have to do now,
since I moved my route code,
resData should not be included
or required in app JS anymore.
Instead, we are now using resData in restaurants JS
because that is where this route is,
where we use this resData object.
Hence, I'll cut it here in app JS.
And in restaurants JS, below this Express requirement,
I want to require my restaurant-data utility file now.
However, the path now changed
because now this is relative from the restaurants JS file
in the routes folder.
And there is no util folder
next to this restaurants JS file,
instead we have to go up one level first.
And we do this with dot dot slash.
With that, we tell Express
that's the file we're looking for
is in a higher level folder.
We go up one level
and then in that new folder to which we moved,
which is the project folder,
we'll have the util folder where we then find this file.
So that is an adjustment we have to make here.
We also have to move this UUID requirement
and cut this from app JS
and use this in restaurants JS instead,
because that is where I do use this UUID package now.
And whilst we are already moving imports around,
in app JS, we can now also get rid of this FS requirement
because I'm not using the file system in here anymore.
I am still using the path, but not the file system.
And with that, if you save everything,
all these routes still work just fine.
But now we have our new structure
where we split our code across different files.
And again, for a simple project like this,
this might not be required technically,
and we might not gain much,
but this is a crucial, fundamental concept
which you have to understand and get used to
because the bigger your projects will be,
the more you want to split your code across multiple files
to keep your individual files manageable and small.
And in this course,
we want to turn you into real web developers,
hence this is a concept
you also have to understand and know.
With that, however, we are done.
And now we achieved a lot
and we have a fairly realistic,
nontrivial Express application.