2.4 Project Organization
Project organization is one of the most important things in software development. In this lesson, I'll show you how to organize your project into smaller, more focused files.
1.Introduction3 lessons, 20:17
2.Building a Web App6 lessons, 1:01:23
3.Middleware and Routers2 lessons, 16:36
4.Conclusion1 lesson, 01:31
2.4 Project Organization
Organization is a very important part of software development. I'm not going to say that it is the most important thing, but it is very high on the list because without it, well, we'll end up with code [LAUGH] that looks like this. Now, this code isn't horrible, but it will get there after the next lesson because we're going to be adding more routes and things like that. So we're going to take some time to organize our project now so that we won't have that headache later on. Now, as far as this file is concerned, we are doing at least two different things. We are initializing our application, then we are setting up the routes. And when it comes to setting up routes, we can't just say that, okay, well, here are our routes. Because we're going to have different parts of our application devoted to different things. Like for example, the routes that we have now I would call the home part of our application. So that's the root, that's the contact. If we had an About page, that would be considered here, and this thanks is there too. So I would call these things as home routes because in the next lesson we're going to add some guitar things and those are going to be guitar routes. So even our routes are going to be separate from one another. So let's start then by organizing our files because as we start breaking these things into different files, we need a decent folder structure for them. So let's say that we're going to put all of our source code inside of a folder called Source. And then we will have a folder called Routes so that we can put all of our routes. And inside of that you'll have a new file called routes.js, and we'll go from there. Now, as far as the code that I want to write. Because I like to start with writing the code that I want to write and then implementing it because I find that I end up with much cleaner code that way. So let's say that we'll just a call a single function called routes. We will pass in our express object, and then that will just set all of our routes. We're done. So let's add that because in order to have this function, we are going to have to pull it in from a module. So we are going to write a module. If you haven't done that, no big deal, it's very easy. So we're going to say routes and we're going to require. Now, that folder structure that we just created Source, Routes and then routes. And that's going to give us our routes. And that means for our routes.js file we're going to have module.exports, and we're going to have a function that is going to accept the application object. And then we will set our routes. Now, yes, we could come in here and we could take our existing routes, which would be these right here. And we could cut them out and paste them inside of this function and that would be fine. But as I mentioned, we're going to end up with routes that are devoted to different parts of our application. So in this case, what I want to do then is have something like home routes that we would then require. And in this case it will be home-routes. So that's inside of this function. We would say homeRoutes, we would pass in the app so that our code is still organized very well. But when it comes to setting up our routes, it's primarily done here in one place actually, it's more than one place, but you get the idea. So inside of our Routes folder we'll create one new file called homeroutes. And we will, essentially, do the same thing, we will have our exports, which is going to be a function that accepts the app object. And then we will paste in our routes, and we're good to go there. So by just doing that we have greatly reduced the amount of clutter within this file. But I would want to take it a step further, and I want to put all of this initialization stuff outside in a different file. So this can go inside of our Source folder, so let's create a new file. And since this is dealing with the initialization stuff, I'm just gonna call it init.js. And we will start by taking out our call to require for express and creating our app. Since that is initializing our application, we'll do that here inside of init. And as far as setting up a view engine or middle wear, we will do that here as well. And what else is there, just this listening part for our application. So here's what we could do, we, of course, need to export something, so let's do module.exports. And let's say that we're going to have a property called express that is going to be our application object. So inside of app.js, what we will have to do then is say app.express. That's going to pass our application object to routes, which is then going to delegate that to the individual route initializers. And then we'll be good to go there, so I think that's going to work just fine. Now, of course, we do need to pull that in. So before we do routes, lets require from src/init, we'll call that app. And then what we could do is abstract this away too so that we could just do something like app.start, and we're done. So that inside of init we're not only exporting our application object, but a method called start, where we set the port. We call the listen method, and that should work just fine. So there we go and, of course, the moment of truth comes to running this. So what do we get? No errors, so that looks good. Let's make sure that it actually [LAUGH] works. So as far as Home, okay, we see Home, as far as Contact, we see Contact. Everything appears to be working correctly and it does, so great, everything's good there. Now, I don't want to just organize our source code because we also need to organize our views. Because as we start adding more things, we're going to need to organize it as well. So like what we did as far as having home routes, inside of views I wanna create a folder called Home. And then we will put our home views inside of that. So let's take our Contact and our Index, let's put those inside of Home. Now, this means inside of our Routes we're going to have to change the path for those views, but it's not that big of a deal. All we're going to have to do then is say home/index and, well, just really home/ in front of everything else as far as the views are concerned. And that should work, so let's make sure everything's still is building okay, it is. So let's go to the browser, let's refresh the page, and now we have a problem. Could not find the include file, our partials. So our partials are going to be referenced differently inside of those views, which isn't that big of a deal. All we have to do then is say include, and go back to the previous folder and then partials and then head. So that should work just fine, and we will do that for the header as well, and then we should be good to go. So let's go back, let's refresh the page, and there we have our views. So by taking just a few minutes, we have organized our project so that it's not a train [LAUGH] wreck, especially as we start adding more code in the next lesson.