‫Let's now completely refactor
‫our application that we have so far,
‫and create a lot of new files,
‫and a whole new file structure.
‫So remember from the last video
‫that we wanted to separate our routers
‫into different files.
‫And so that's gonna be the first step that we will do here.
‫So I'm gonna create a new folder called Routes now,
‫and then in there I will have one folder for tour routes
‫.js, and then user routes,
‫.js as well.
‫Okay, and so this is gonna be the first time
‫that we will really work with different modules,
‫okay, and actually use them in a very meaningful way.
‫So, let's start with the tour router.
‫Copy it here, then take this tour router here,
‫and put it here.
‫And so, next we need actually Express here,
‫because we're using that variable,
‫and so we need to import the Express module.
‫So express,
‫require express.
‫Okay, it's kind of a convention to simply call this router,
‫and not tourRouter.
‫So router, and now we will export the router,
‫and then import it into our main application, okay?
‫So, remember how we do it
‫when we only have one thing to export?
‫Well, we use module.exports,
‫and then put the router on there.
‫Give it a save, and of course, we still get some errors,
‫but that's because the tour router
‫is not defined in our main application file.
‫Okay, also what's not defined in this file
‫is all of these functions here.
‫Okay, so let's very quickly get them,
‫and put them in the router file.
‫At least for now, we will later create
‫a new file for that as well.
‫So it starts here.
‫Careful, not copying everything.
‫Yeah, so just like this.
‫And actually, I'm gonna put them before the routes.
‫Give it a save.
‫And so that should work now.
‫And now do the same for the user.
‫So get the router.
‫And don't worry about all these errors that we're getting.
‫Again, that's just because we are missing
‫some variables in some places.
‫So again, we'd express here,
‫then we call this here just router,
‫and then we export it.
‫Okay, and now I'm also getting the handlers.
‫Okay, so we can get rid of these route handlers now.
‫Okay, and actually this one here is missing
‫in our tour routes,
‫so this piece of code where we actually read
‫the tours from the JSON file.
‫So put that right at the top here.
‫And now finally, we actually need to import
‫the tour router and the user router
‫so that these routes here continue to work.
‫Okay, but that should be fairly easy, so let's do that.
‫So with the tour router,
‫is at require,
‫routes/tourRoutes.
‫Okay, and we don't need the JS,
‫and then the same for the userRouter.
‫So tourRoutes actually is here, the userRoutes.
‫Now you might be wondering why I actually called
‫the variables the userRoute,
‫but then the file is userRoutes,
‫and well that's because this folder here is called routes,
‫and so in there we have the tourRoutes and the userRoutes.
‫Okay, but what we actually export from that file
‫is simply the router, alright?
‫But I believe it makes more sense
‫to actually call this folder here Routes.
‫Okay, and so that's why we have this small difference
‫between routes and router.
‫Now we still get some error here,
‫and so fs is not defined,
‫so let's take that, and actually we don't need it here,
‫so let's put it in the tour routes right here.
‫We get another error.
‫And this time, because this folder here is now not defined,
‫because our dirname is now the routes.
‫So we need to get out of that.
‫So go up one folder, and then in there,
‫go into dev-data, data, and tour-simple.
‫Now don't worry about getting all these errors.
‫That's kind of normal when we are doing all this refactoring
‫'cause we're changing stuff all over the place,
‫so it's normal that stuff breaks.
‫Anyway, it's now back to working,
‫and so we are now in the place where we can
‫retest our routes here.
‫And indeed, it works.
‫The same for the users, let's suppose.
‫And so everything is correct.
‫So we have our routers now each in one different file,
‫and we can say that each of them
‫is one small sub-application.
‫So one tour application and one user application.
‫And we then put everything together in our global app file
‫by importing these routers,
‫and then mounting the routers
‫on the two different routes
‫that we have currently implemented, okay?
‫So again, this is where we mount our routers.
‫And I know that this concept
‫can be a bit difficult to grasp,
‫but don't worry about that.
‫The longer that you keep working on this project
‫and the more code you keep writing,
‫the clearer everything will automatically become.
‫For now, the most important thing to keep in mind
‫is that we created these different routers
‫for each of the resources to have a nice
‫separation of concern between these resources.
‫So basically creating one small application for each of them
‫and then putting everything together in one main app file,
‫which is of course this one.
‫So this app.js file that we have here
‫is usually mainly used for middleware declarations.
‫So we have all our middleware
‫that we want to apply to all the routes.
‫So in this case, we have these four middlewares here.
‫So one, two, three, four.
‫These middlewares, we want to apply it for all of the routes
‫and then for this route,
‫we want to apply the tourRouter middleware,
‫and for this route, we want to apply
‫the userRouter middleware.
‫Okay, so again, these two routers are actually middleware,
‫which is why we can use app.use in order to mount them.
‫Okay, and with that being said,
‫let's take it one step further,
‫and actually remove these route handlers
‫from the routes file.
‫Okay, and so let's again create a new folder here,
‫and this one will be called controllers, okay?
‫So I've been calling them route handlers,
‫and so it would make sense to create a handlers folder.
‫But later in this course,
‫we will start using a software architecture
‫called the Model View Controller,
‫and in that architecture, these handler functions here
‫are actually called controllers.
‫And so that's why I'm going to call the folder,
‫and also the files in there, controllers.
‫So let's now create the tourController.js,
‫and the userController.js.
‫Okay, and this will make a bit more sense
‫once we reach the part of the course
‫where we actually talk about the MVC,
‫or Model View Controller pattern.
‫Alright, so let's now take this code,
‫and put these handlers into the controller folder,
‫or file actually.
‫So all of this code.
‫It's the tourController, yeah, that's the one.
‫Also, we need this FS module here,
‫obviously at the top.
‫And here we go.
‫Now, we want to actually export all of these functions
‫from this module, so how do we do that?
‫Well, in this case we do not only have one export,
‫so we're not gonna use module.export,
‫but instead we will put all of these functions
‫on the exports object, okay?
‫And so let me select all of these,
‫consts, so that I can actually
‫replace them all at the same time.
‫So exports.deleteTour, and .updateTour,
‫createTour, getTour, and getAllTours.
‫Okay, so that exports everything from this file.
‫And so now, let's go into the tourRoutes,
‫and simply import them.
‫So const, tourController, equals require.
‫Okay, now we're in the routes folder here, right?
‫So we need to move up one level,
‫and then go into controllers,
‫and into the tourController.js.
‫Okay, this is not correct, and alright.
‫Now, remember that when we export data from a file
‫using the exports object.
‫So just like we did here.
‫When we then import everything into one object,
‫then all of the data that was on exports
‫is now gonna be on tourController.
‫And so we will have tourController.getAllTours
‫.createTours.getTour,
‫and really, all of these, okay?
‫So this object here will be the equivalent
‫of the exports that we have here.
‫Remember that?
‫And so, it's really simple.
‫All I have to do now is to create
‫tourController., and that's it.
‫Now I could have also used the structuring,
‫which I also showed you before.
‫So just to demonstrate,
‫I could have used it like this,
‫and then specified the exact same names that we have here.
‫So getAllTours, and then createTour, and all of these,
‫and then I could have used them directly here
‫without having to write tourController, and dot.
‫Okay, but I actually like it like this,
‫and I see no problem of having it like this.
‫So it makes it nicely visible
‫that all of these functions here actually come
‫from this tourController module.
‫Okay, so I saved it now, and so it should keep working,
‫so let's test that, and yeah, it does.
‫So, that's working now.
‫Let's actually close it up, and now the same, where is it?
‫Ah, here.
‫Now the same of course with these functions.
‫Put them here,
‫and then export all these guys.
‫So exports.
‫Yeah, so that's correct.
‫Now here, we just imported module,
‫and the same as before, we need to move up one level.
‫We go into controllers, and userController.
‫Now finally, just add that here.
‫Give it a save, and test it for this guy as well.
‫And indeed, it works.
‫So everything we did here was correct.
‫So we're starting to have a bunch of files now,
‫and so it's important to really get familiar,
‫where exactly all the different pieces
‫of the application are located, okay?
‫So just to recap, the flow goes like this.
‫We start receiving the request in the app.js file, right?
‫It will then depending on the route
‫enter one of the routers, so let's say the tour router,
‫and then depending, again, on that route,
‫and of the request, it will then execute
‫one of these controllers here,
‫and so these are in the tourController files.
‫And that's where then finally the response gets sent,
‫and finishing the request-response cycle.
‫Okay, so we have now three files,
‫instead of having everything just in one file.
‫Alright, but that's still not the end of the story,
‫because I'm adding one more step here.
‫So what I'm gonna do is to create a server.js file as well.
‫So server.js.
‫And why am I doing that?
‫Well, simply because it's a good practice
‫to have everything that is related to express in one file,
‫and then everything that is related to the server
‫in another main file.
‫So starting now, server.js will actually be
‫our starting file where everything starts,
‫and it's there when we listen to our server.
‫So let's actually go ahead and copy, or cut,
‫this part from here, and move it into the server.
‫Now of course, this module here doesn't know about app,
‫and so we need to import it.
‫And to import it, we need to first export it.
‫So we use module.exports,
‫and we export our application from this file.
‫Okay, and so now we have everything
‫that is basically the application configuration
‫in one standalone file.
‫Okay, so back in the server, let's now import that.
‫Require, and since it's our own module,
‫we need to use this ./ to say
‫that we're in the current folder,
‫and here's it's simply app.
‫So, simple as that.
‫And later on we will actually have other stuff
‫in this file that is not related to express,
‫but still related to our application.
‫So stuff like database configurations,
‫or some error handling stuff, or environment variables,
‫all of that stuff will live in this server.js,
‫which is kind of our entry point, okay?
‫So let's now finish the process that we have here,
‫because now we do no longer run nodemon app.js,
‫but instead, we need to run server.js.
‫Okay, and actually since we're doing that,
‫let me create an npm script for that.
‫Closing that guy very quick.
‫And so let me add here, npm start,
‫nodemon server.js.
‫Because this way, I no longer have to really know
‫which is the file that I actually want to run.
‫So all I have to write is npm start,
‫and there's no doubt that it's gonna work.
‫Otherwise, I might have to think,
‫hm, is it app.js, or server.js, or what?
‫What do we have to start here?
‫But like this, I don't have to think,
‫all I have to do is npm start, and it's gonna start.
‫Okay, so just like this,
‫and here we are back running our application.
‫Close that guy, and by the way, this works,
‫even without having nodemon installed
‫as our dev dependency,
‫because I have nodemon installed globally.
‫So we did that in the first section,
‫and hopefully you did it there as well.
‫If not, then go ahead and in another tab
‫do npm install nodemon,
‫so if for some reason you skipped that section,
‫you type npm install nodemon,
‫and then you can either install it globally like this,
‫or you can install it as a dev dependency,
‫like this, alright?
‫So just make sure that you have nodemon installed,
‫no matter if it's globally or as a dev dependency,
‫okay, in order to make this work.
‫So final check, just to make sure,
‫and want this one, and yeah, indeed.
‫We have our app correctly refactored.
‫So these were a lot of changes in one video alone,
‫so after you finish this one,
‫please go ahead and analyze everything that we did
‫and really try to trace a path
‫that a request will do inside of our app
‫from start to finish.
‫This way you will really get a feeling
‫of how everything here works.
‫And I'll see you after doing that in the next video.