Now that we've hit a milestone with our application I think that this is probably a good place where
we can start to refactor the code inside of our index file.
So remember we had said that we were going to stuff all of our passport stuff in here right now and
then later refactor it out to a couple of different files and folders.
And so that's what we're going to be doing inside this section.
Now before we do this I want to mention that there's really not a great convention in the Express community
on how to structure projects.
So I want to show you one possible way of doing this.
I'm not going to claim that it's the best way.
I'm just going to say that it's a way that's going to work very well for us.
So let's take a look at a diagram that can help us understand how we're going to organize our project.
So we've got our overall server directory.
We already have a config a whole folder which is going to hold all of our API keys and maybe any other
settings or configuration information that we might need.
We're then going to add in two additional folders.
The first one will be the route's folder which will have one file for each gen set or a group of routes
that we have.
Right now we have two handlers inside of our index jazz file and they both have something to do with
authentication.
And so I think that we probably have a single file inside of our routes folder to handle both of these
handlers because they are very similar in function.
Next we will also create a services directory which will house a bunch of logic that just kind of helps
out our express application or kind of configures it to work the way we expect.
And so in the services directory I would expect to probably have a passport.
JS file where we're going to put in all of our passport configuration like the passport used statement
right here that configures the Google strategy.
Do note that even though this seems like it's very closely related to our route handlers down here really
this block of code is about setting up or configuring passport.
And I kind of view passport as like a service to our application.
Now we're going to have several other folders that we will add over time.
But right now I think that these additional two will help to break up our index not just file it a little
bit.
So let's get to it.
Let's do this refactor.
I'll start off by first creating the controllers are indeed the routes directory.
So make a new folder called routes and then inside of there I'm going to make a file called off routes
that Giants.
So here is auth routes then inside if you're going to find are two route handlers inside of the index
file.
So here's the first one in the second one I'm going to highlight them both and I'm going to cut them
then change over to the new Auth. routes file and paste both of them.
Now we do have to do a couple of require statements in here for stuff like passport and whatnot.
But we will move all of our code around first and then handle all of the updated require statements.
Next we're going to make our services directory so your services and inside of there are going to make
a file called Passport JMS which will Halas all the configuration for passport inside of our application
so I can go back over to our index dot G-S file or find the passport statement.
I'll highlight the whole thing.
I'm going to cut it and then paste it inside of passport.
Yes OK.
So now we'll take care of some of the different require statements.
First off we'll start with the index not file.
Now inside of here really the only require statement that we need at this point is for the express library.
This file no longer makes use of passport or to the real strategy or the keys file.
So I'm going to take all three of these require statements.
I'm going to cut all three of them and I will move all three over to the passport.
J.S. file at the very top.
So here is Passport passports being used right there.
Here's the Google strategy which is being used right there and then Archy's file which has been used
here and here.
Now one more thing to take care of inside this file.
Notice that we have the require statement for keys which looks in the same directory as the current
file.
So now that we've moved this passport file into the services directory that the require statement right
here the path no longer will correctly point to the config file because dot slash right here means look
in the current directory which would be in the services folder.
So to fix that up we're going to add on one more dot like so.
So this is now interpreted as go up one directory into the server folder then into the config folder
and then find the keys G-S file inside of there OK.
So this philes looking pretty good.
There's one last thing to take care of regarding the passport not file though just because we have that
passport taught yes file inside of our server directory does not mean that the file is going to be automatically
loaded up and executed.
So if we ran our server right now nothing inside of the passport file would be executed because we are
not requiring it anywhere into our project structure.
So to make sure that all the configuration inside of that file gets executed and actually ran at by
our server we have to make sure that we require it to at least one location inside of our project.
So in the index file right underneath the require express statement we'll say Konst passport config
equals require go into the services directory.
So dot slash services and then get the passport file.
OK.
Now just one more thing.
Inside the passport file We're not actually exporting any code out of here.
There's nothing in here that says hey make this little function or this object available to some other
location inside of our project.
So we don't really care about requiring the passport dodgiest file and pulling any code out of it.
We just want to make sure that this file is executed.
That's all we care about.
And so the reason this is relevant is that you can see with the required statement right here.
I'm saying require the passport file and then sign anything out of that file to the passport config
variable right here.
But this is not returning anything.
So there is nothing to assign to passport config.
So because we are not actually assigning anything to it we can just condense it down to be a require
statement like so
OK.
So that's it for the passport file.
Now we're going to make sure we take care of the routes not just file as well.
So going to close the passport dodgiest one.
Take a look at the author routes.
Now inside of here.
We're making use of the passport library so we'll make sure that we import passport at the top will
say Khan's passport equals require passport like so so do note that the passport requires it right here.
It has nothing to do with the actual passport.
J.S. config file that we put together in this case we are requiring in the original passport NPM module
right here.
OK.
So one other big change that we need to make inside of here.
If you look at these two route handlers so we set up.
You'll notice that both of them are working on the Express app object.
So here is apt get an apt get.
However we do not define the app object inside of this file.
Instead the app object is defined over here inside of index.
Yes.
So we're going to use a little trick to get this thing to work correctly.
We need to make sure that this app object somehow makes its way into the Author outs file and gets these
routes attached to it.
So that's the challenge here.
So here's here's the trick Here's what we're going to do.
The first thing we're going to do is create a new Arrow function and export it from this file.
So I will say module.
Exports equals an arrow function.
And then as the body of the function I'm going to wrap both of our route handlers.
So here's the opening curly brace and a closing down here at the bottom.
And then I will indent the entire function body like so.
So now we are exporting a function from this file.
We are going to assume that we will call this function with our express app object.
So I'm going to add the app as an argument to the function that I need to save this thing and then for
the last step I'm going to change back over to the index js file at the top.
I will import that all routes file so will say.
Our throats equals require routes auth routes.
So now auth routes right here is a function that takes our app object and attaches these two routes
to it.
So as a last step will make sure that we call auth routes with the app object like so.
OK so this is looking good right here.
And we certainly could just leave it here and say that's it we're all done.
But there's one Lassally factor we could do to make this even a little bit more concise.
Notice how we are requiring that function from the author routes file assigning it to the author it's
variable and then immediately calling that function right here.
Well it kind of feels like this author route's function this variable right here is a little bit superfluous.
In other words we don't really need it.
It's really not necessary.
Instead we'll delete that author route's variable.
So going to delete it.
I'm going to delete it down here as well.
And then here's the real trick.
Here's the interesting thing.
I'm going to take the required statement.
I'm going to delete the semi-colon and then I'm going to put the require statement in front of that
app like so.
OK so let's talk about this.
We've got all require statements.
We've got one set of parentheses and then a second set with the app..
So this is completely valid javascript triger completely valid no problem with it whatsoever when we
require the author route's file it returns a function.
Right because that's what we returned or that's what we exported from that file.
So this requires Steven right here.
Returns a function with an immediately call that function with the AB object.
So the second set of parentheses immediately invokes or immediately calls the function that we just
required in.
So and just the same way the app is passed into that arrow function.
We attach the two handlers to it and the OP is all happy because it got two new routes.
So that's pretty much it.
That's our whole refactor now.
One last thing I want to do to make sure that everything is working correctly.
We're going to change on over to our terminal and make sure that we don't have any errors over there
so we're going to make sure we don't have didn't make any typos or any mistakes.
So over at my server directory or in my server folder I need to start up my server with NPM run Dev
and chances are yours was already running.
I ended mine so whatever.
So at this point I'm able to successfully start up my server.
If you made any typos during that refactor you'll probably see an error message here so it'll say like
hey unknown variables so and so.
So if you see that that means you probably made a typo somewhere.
I really encourage you to read the error message very closely and see if you can't debug the issue.
Now if you tried debugging yourself and you can't figure it out feel free to go over to the discussion
boards and just post and let me know how I can help but remember if you put a thread over there you've
gotta tell me what the areas is so please attach your statement or attach whatever debug information
you're getting over here and then ideally make sure you upload your project to get job as well so I
can look at your code.
OK so that's pretty much it for refactor again.
Over time we will add in a bunch more folders inside of here and we're going to add in a lot more files
to these existing folders as well.
But we've now got a pretty concise indexed J.S. file that we can easily expand over time and keep this
thing nice and light and still legible.
So let's continue in the next section and move on.
In our application.