Know the section we had a long discussion about the use of our express server in the production environment
without create react up sitting in front of it.
We're now going to set up our express server to make sure that it understands that there are some routes
that it will be asked for that it might not have a specific role handler for.
So we're going to change on over to our code editor I'm going to find the very root index.
J.S. file inside of my root project directory.
So here's the index not file.
Here's all of our initial server setup and I'm going to scroll down towards the bottom where all of
our other routing logic is.
Here right here.
OK.
So right underneath this we're going to add in a little bit of configuration to make sure that express
essentially behaves correctly when it is in the production environment.
Now the code that we're going to add here is only supposed to be re on inside of production or when
our application is at Heroku.
So to ensure that it only runs this code when it's at Hoku we'll add in a simple if statement will say
if process got EMV dot node underscore EMV is equal to production then run the code inside of here.
So you'll recall that this is an environment variable right here that is automatically set by Heroku.
So if we are on Heroku noti underscore D-NV must be the string production.
And so the code inside if you're only going to run if we're in production.
Now inside the actual statement there's two little things that we have to do to make sure that express
handles everything in production correctly.
The first line of code that we're going to add right here is going to be making sure that express will
serve up production assets like our main dot J.S. file or main dots SS file.
So it's going to be the first little piece of configuration we do.
The second piece is going to be a little bit more crazy.
This other one is going to say Express will serve up the index dot h to mail file if it doesn't recognize
the route.
Now these two right here probably seem like they might be somewhat closer related.
So this first piece of configuration right here is meant to handle the case that the browser is asking
for some production asset like some javascript file or some CSSA file that is hosted at a very particular
route on inside of our express server like inside of our project directory.
So in this case I've got a note right here of client sosh build static G-S main that references a very
particular file inside a particular directory inside of our express project.
So here's client built static J.S. maned.
J.S. Right here.
And yes I know it's got all the numbers on there don't worry about those for right now OK.
So we'll take care of this first piece first and then we'll talk about how it's different from the second
one over here.
So for this first piece of configuration we'll say apt use Express dot static and we'll pass it a string
of client slash build.
OK.
So this first line right here says if any get request comes in for some routes or some file or absolutely
anything to our application and we do not understand what it's looking for.
Like if we do not already have a route handler set up for this thing then look into the client slash
build directory and try to see if there's some file inside of there that matches up with what this request
is looking for.
So in other words if someone comes looking for client build static J.S. main look into client slash
build and see if there is a file at static G-S main and if there is go ahead and respond with that.
So that's what this first piece of configuration is doing right here.
Now onto the second piece.
Now the code around this one is going to be a little bit more intense.
So just bear with me as we go through this after we write the code.
We'll then talk about exactly what it's doing.
We're first going to require in a module called Path and then immediately after that we'll say apt get
inside the string or here we're going to put a star like so then we're going to add in a callback or
a arrow function say rock rez it inside the body the function will say rez dots and file path don't
resolve
underscore underscore.
This is two separate underscores.
Write your name and then we're going to pass in a couple of different strings.
Client build and then index dot HMO and I'm going to zoom out for just a minute so you can see the whole
line.
OK so what's going on with this one.
Of course you can read the comment right.
You're essentially this says if someone makes a request for a route that we do not understand just serve
it up the HMO document.
If we don't know what this route is we will just assume that the react route or side of our application
is responsible for this route.
So we're just going to kick the user over to our client side application.
Now your very first question here might be well Stephen if we've got this thing that says if you don't
understand the route give them the HMO file.
How are we going to make sure that express does doesn't do this instead of giving whoever making the
request some file that they are actually asking for it.
And my answer to that is that it's all about the order of operations here.
So when a request comes into express express we'll first check to see if there is some specific file
that matches up with what that request is looking for.
If there is it's going to answer the request with this line right here if there's not express will then
continue on down and we'll find this next route handler which we can essentially think of as the absolute
catchall inside of our application.
This route right here this code right here this line basically says if we have nothing inside of our
author out file and nothing inside of our billing routes file and there's no file inside of our client
slash Bill directory that matches up with what this request is looking for.
Well then fine.
We've exhausted all possibilities.
Fine.
Just give them back the index HMO file.
So this is essentially the catchall case right here.
That assumes that all previous attempts to match up the incoming request with some actual resource has
failed.
OK.
So this is kind of like part 1 of handling some of the changes we have to do for getting our application
to work on Heroku.
So just one last time I know that we've kind of covered this like three times now.
But remember the entire idea here is that there are some routes that can be answered or some requests
that can be answered by the Express server some that are looking for very specific files that exist
inside of our client build directory and then there are some that have to be answered by the index studies
small file because the assumption is that re-act router knows what to do with this route.
OK so we've now done kind of part one of configuration here.
We're going to take a break right now at this point.
I want to remind you that if this still seems like weird and confusing as soon as we deploy this to
Heroku I am just really positive that as you kind of play around with this a little bit you're going
to get a much better sense of what's going on here with those configuration.
So at this point let's take a quick break.
When we come back in the next section we're going to make sure that our client project is properly built.
When ever we deploy to production so I'll see you in just a minute.