So now we got this basic app.js file.
Before we now dive into writing more code,
let's set up a basic project structure.
At least that is a step I typically like to begin with,
because I know that we will certainly
have a couple of views, a couple of controllers, and models.
Since we will use the MVC pattern,
the Model View Controller pattern.
And we're also going to add more folders and files,
but at least the views and then the models,
and then the controllers folder,
these three folders make a lot of sense to be added.
The node_modules folder, as you learned before in the course
was not added directly by us,
but instead indirectly by installing third-party packages,
because that is the folder that does hold those packages,
and we don't need to work in it itself.
Now we could also create a couple of sub folders
or files already,
but the only thing I wanna do right now
is in that views folder,
I will actually add an auth sub folder.
And that is something I haven't done before in this course.
In this course, up to this point,
I basically had all my view files
directly in the views folder.
And then I only had an includes folder for included files.
Now in this course project we are working on here,
will have a bunch of views, a lot of views,
and therefore, to bring more structure
into all those views, I'll structured them by feature.
So the auth folder in the views folder
will hold all the authentication related views.
I'll also add an admin folder,
which will hold the administration-related views,
which we will add later.
I will also add a products folder,
which you guessed it, will hold the product related views.
And then also a cart folder,
which holds all the cart and maybe also order-related views.
And we could add more, but this is a general structure,
which we can already set up.
And which I wanna discuss right now,
so that it's clear that I will be using those sub folders
to clearly structure my different view files.
Because as you will see from the this course section,
the project we're working on is rather big,
and therefore, keeping your code and your files
organized is key, otherwise working on your code
will become very cumbersome in the future.
And therefore, that's the base structure I'll use.
Now, another folder,
which we can already add to our project set up
is a routes folder because we'll have different routes
and I wanna organize them across different files,
so that I have one file
with the authentication-related routes,
one file with the admin-related routes and so on.
So basically that's the idea for the overall project,
organizing our code, splitting our code.
And since I wanna start with the auth feature,
let's maybe start by going to that routes folder
and adding an auth.js file in there.
Actually that file would be perfectly fine,
but I'll name it auth.routes.js,
not because this is any kind of special file extension,
it's a regular file name still,
but simply so that later in the project,
once I'm working with tons of different files,
I don't have an auth file here,
and auth filed somewhere else in the project
because we could have auth controller,
which has all the named auth.js.
And this can become confusing,
therefore I'm naming this auth.routes.js.
I could have also chosen auth-routes.js,
I just preferred the dot notation.
But now this is the file
that will hold my auth-related routes.
And hence in this file here,
we now do what we learned before in the course.
We use express router to register a couple of routes.
And then in the next step,
we'll wire that up to our app.js file.
So in here, we first of all again,
start by requiring express,
and that's important by the way.
Of course, you'll learn that from the course already,
but I wanna emphasize it here again,
since the idea oft his course section
is to practice everything again.
We did already require express in app.js,
so you could think that you don't need to do it again,
if you also wanna use it in a different file,
but that's not how NodeJS works.
If you wanna use a certain package,
a certain object, or feature that is being exported
by another file, or package in some file,
you always have to require it,
you always have to import it.
It's not enough to require express once in app.js,
that only makes express available in this file,
not in any other file.
So if you wanna use features from the express package
in another file as well,
you have to require the express package in that other file.
And that's why I'm requiring it again here
in all auth.routes.js.
Now, once it is required,
we can construct such a router object
by accessing express.Router,
which is a function as you learned.
And this simply creates such a router object.
That's how the express package works.
Then we can configure our router,
we're going to do this year.
I'll replace this comment soon.
And in the end, we wanna export the router
and you'll learn that in node applications
and node websites, you can export
by using module.exports.
This might look a bit weird, but this in the ends,
tells NodeJS which features, which objects,
or functions that are defined in this file
should be exposed to other files as well.
And here all exposed the finished router.
So to router with all the configuration we wanna have.
Now, of course at the moment,
it doesn't have any configuration yet.
That's what we'll add now.
Here, we can now use the router which we created in line 3.
And you'll learn that this router object
now has a couple of methods for registering different routes
you might wanna support with your website.
You can, for example, called the get method
to accept get requests to a certain path.
Or the post method to accept post requests.
And you also actually learn about other HTTP methods,
like patch or delete.
I talked about those before in the course already.
Just briefly, but I mentioned them.
And you could all the register routes
for these HTTP methods.
And indeed we'll do that later in this course,
but for the moment, we're going to start simple
with a get request with a get route.
Here, you then typically define the path.
So to part after the domain,
for which this route handler should become active.
And that could be /signup so that this is our signup route,
the route you visit for getting the signup page.
And that's why it's a get request
because this is not the route for getting the user data
and for storing the user data anywhere.
Instead, this is the route for just serving the signup page.
Now you did then learn in this course
that all these route handlers,
which you define with help with express router,
take middleware functions as arguments after this path,
which you set up as a first parameter value.
And indeed, you could now add multiple middleware functions
that will be executed left to right,
for all the incoming requests
that are get requests targeting this path.
But here we only need one final middleware function,
which will handle the incoming request
and which will send back a response.
And we could do this
by creating such a anonymous function here,
that is one thing we could do.
But I will not do that here.
Instead, we learned about the MVC pattern
and therefore, I wanna create a controller for that.
So in that controllers folder, I'll add a new file,
and I'll name it auth.controller.js.
And again, I'm using this naming pattern
only to avoid confusion,
not because you have to,
this could be named auth.js,
and so could the routes of file be named like this.
Also, if both files have to same name,
but live in different folders, it would be fine.
But here I'm working with auth.routes.js,
and auth.controller.js to make it a bit easier
to tell those files apart.
Once I have them open up here at the top and so on.
Now in this auth.controllet.js file,
I wanna create the function that should become active
when a get request reaches /signup.
The function name is up to you,
but all name it getSignup to make it clear that here
we get the signup page, the signup view in the end.
Now this function will get a request and a response object
because it will be a regular express middleware function.
And you'll learn that those functions get request response
and next parameter values,
where next is does special func you can call to send
the incoming requests to the next middleware in line here.
We don't need next at the moment,
so I'll just accept request and response.
Now the function doesn't do anything yet.
We're going to add this.
But it's also not too useful at the moment.
It's just sitting here in this file,
and of course, that's not too useful.
We wanna use it in a different file instead.
So therefore, again, we use module.exports
and they could not adjust export to this function,
but actually I'll define more functions in the near future.
And therefore, I will instead export an object,
which we can use to group multiple values
or functions together.
And in this object, I'll add a getSignup key.
And the value for that key is a pointer
at this get sign up function here.
So we don't execute the function here,
we have no parentheses,
instead we just point at this function.
And this makes it available outside of this file as well.
Now that we're exporting this getSignup function,
back in this auth.routes.js file,
we can require our auth controller
because you always need to require the things you wanna use.
And for this, I'll create a constant named authController
and store the imported value.
So this object, which I'm exporting
in the auth controller file in there
by ../controllers/auth.controller.
Now, in case you forgot,
this ../ here means that I'm going up one level,
and then here at the end, I don't have .js
because with this require statement,
you are allowed to emit the file extension.
Now, for this going up one level thing, I need to do this
because I'm requiring the auth.controller.js file
from inside the auth.routes.js file.
They are not in the same folder,
so logically, I first need to go up one level,
so that I'm in the main project folders, so to say.
And then I can dive into the controllers folder
where I then find the auth controller.
And with that,
we can now connect /signup to authController.getSignup,
so that this function is triggered,
whenever we get an incoming get request to /signup.
Now we can also duplicate this route now
and do the same for /login,
so it would be all to serve a page with the login form.
And for this and auth.controller.js,
I'm quickly going to copy this function,
and name it getLogin,
and also expose it by using a key of getLogin
and pointing at getLogin.
So that here in the auth controller,
getLogin is also defined and export it.
And in auth.routes, we already require the auth controller,
so here for the get login route,
we can now simply point at getLogin like this.
I'm also not executing the functions here
because express should execute them,
once we got incoming requests.
And with that, the routes are defined here,
or at least the first two routes are defined here.
Now we can go to app.js and also make this file
aware of these auth routes
because that is something we have to do here.
In this file, in app.js,
I'll import my auth routes
by again, requiring something,
and since app.js already sits in the main project folder,
we don't need to go up a level here.
Instead here, we can directly create a relative path
with ./routes/auth.routes.
A ./ simply means,
please look in the folder I'm currently in.
So look for a routes folder in the folder I'm currently in,
so in the project folder.
For the packages, the third-party
and built-in packages you're importing,
you don't have ./ or ../,
you just have to package name there,
but for your custom files,
you always need to define a path like this,
which either starts with ./ or ../
if you need to go up one level first.
You can also have multiple ../ of each other
if you need to go up multiple folders.
That is always a possible.
And now with the auth routes imported here,
before we start listening,
we can register them with app.use,
which is a built-in method in the express app object
that allows us to add a middleware
that will be triggered for every incoming request.
And we do wanna check for every incoming request.
If this request is for one of these two routes.
So therefore, we wanna use our middleware
for every incoming request,
and we do it like this.
This makes sure that the auth routes middleware functions.
So our router functions in there
are evaluated for all incoming requests.
Of course, our controller functions
will then only be executed if the incoming request
matches the criteria laid out here,
so if it's a get request for one of these two paths.
Okay.
Now with that, we got the routes set up,
but of course our controller functions
aren't doing anything useful yet.
The next step is to add a couple of views,
so that we can return pages for signing up and logging in.