We've never really wrapped up billing on both the back end and the front end of our application.
And I think that maybe right now before we go onto the next feature we should do another deployment
of our application to Heroku just to get everything fresh up there and make sure that our deployments
are very current.
Now so far in this course we've deployed to Heroku together two times in both of those cases.
We were really just concerned with deploying the our express server because in both those cases we had
only put together the Express server.
So in this last little bit of code of content that we've gone through we have added in a major architectural
piece to our application which is the client side app.
So the entire client side app has now been integrated into our overall application and we now need to
think about how that kind of affects our deployment process.
I'm going to tell you right now it is going to be a somewhat big change.
So it's not super straightforward and we're going to talk about a couple of different topics that are
going to help you understand some of the considerations that we need to have now that we have the Create
re-act outside of our application in here as well.
So there's two big topics we're going to discuss here.
The First off is how our server works inside of production versus development and then we're also going
to talk about the build process that we use on the client side of our application.
So two big topics we're going to go into pretty good detail on both of them.
So the first one again we're going to talk about how the Express server's behavior is going to slightly
change between production and development.
Now I want to first start off by showing you a diagram that we've looked at many times throughout this
course.
So we had said that this is how our application works in development mode.
We had said that whenever a browser goes to localhost 3000 the browser is essentially saying hey I need
stuff from the re-act side of the application like I need an HD mail file.
I need some javascript I need some CSSA whatever else the Create re-act out server that exists inside
of our client directory right now inside of our project would see that incoming request and would say
Okay fantastic.
I got you covered.
Here is your HTL document.
Here is the javascript files.
There you go.
The application then booted up and made some API requests and eventually that got handled by the Express
API.
You know we don't really care about that so much.
I really want to focus on that first step for right now.
The fact that the Create re-act up server was responsible for serving up all of these assets like the
HMO files and the javascript files.
So this is development mode and that's how our application has been working thus far.
So now as we start to move into production things are going to change just a little bit.
So now we're saying that when our application makes requests to Heroku app dot com which is what our
domain is in production right now the kind of you know the assumed flow or how we kind of want things
to work here is to make sure that when the browser reaches out to the server and says hey I need an
aged female file and I need a javascript file we are hoping that the Express server is going to somehow
respond with all of the relevant assets because that whole create react up layer has now disappeared.
Its gone.
It doesnt exist anymore.
When we are working inside of the production world.
OK.
So this is kind of what our whole discussion is about how do we make sure that the Express server rights
year understands that when its running in production mode it needs to be in charge of handling all of
these assets.
That's the big point of discussion.
Number one that we're going to discuss now we are going to look at a couple of different diagrams very
shortly that's going to help you understand that before we do I want to remind you of one very quick
little thing.
Now at some point in the course earlier we had very quickly ran a little build script inside of our
client project.
And so I really just want to kind of reiterate on what this public assets thing right here is you'll
recall that at our command line if we change into our client directory and then run the script NPM run
build.
And this is a script that is implemented by Create re-act up.
So we didn't put the script together.
It came with our STARTING package.
This will build a kind of production version of all of the assets inside the client side of our project.
So you can see very cleanly or very plainly right.
You're creating an optimized production build.
So when we want to deploy at some point in time we have to run this command right here and make sure
that we generate these kind of production assets that are really capable and the ones that we want to
serve.
When the app is in production so what reminds you about that.
Now here's hoping.
OK.
So it's all done right there.
So when we run that build command and run build it dumps these files.
So this main javascript file in this main CSSA file right here into a directory of build slash static
slash CSSA slash main and then essentially the same thing for the javascript file as well.
And so if we try to find that inside of our project structure Here's our server directory.
Here's the client folder Here's that build folder.
Static.
J.S..
And.
OK.
There's the actual javascript file that we want to serve up to our users.
And then you'll also notice inside of the static directory itself is our index.
Each HTML file the one that we actually want to serve that is kind of the root h DML document.
So again I just want to remind you that we have to run that NPM run build command and all the output
from that is put into client slash build slash static.
OK.
So that might Let's look at a diagram that's going to help us understand why it's going to be kind of
a challenge to get the express side of our application to serve up these public assets.
OK so we're going to look at this diagram right here.
So I'm going to zoom out for just a second so you can get a overall picture of what's going on here
in this diagram.
We have the browser at the bottom we've got the Express server right here.
And then we can kind of imagine that up here are some actual production assets that we want to serve
up to our users.
So let's walk through this process and try to understand why going through all this and getting our
express server to serve up these assets will be a challenge I'm going to zoom back in.
There we go so right here I've got one request kind of diagrammed out and there's three requests on
here in total.
I want to focus on this first request right here.
Now at this point we were just working on a request handler inside of our express application that would
take a post request to API slash Strype express would say Oh you're trying to give me a stripe token
it would process the request.
We had some logic.
And at the end of the day stra express said OK response complete.
I'm going to send something back.
So essentially if we made a post request to API slash Strype to our express server the Express server
would say Oh fantastic I gotcha.
We're good.
I'm going to take care of this request and reply back to you like there's some very clear configuration
inside of our express server that handles this route in particular.
Now as we start to think about some of the demands that are going to be placed on our express server
here very shortly life is going to get a little bit more complicated.
So what happens if we make a get request to the path slash surveys inside of our application.
You might say Stephen when you talk about slash surveys that's not a route that's defined on our express
server and that's totally accurate.
We have not defined a route handler called slash surveys on our express server.
We have defined that route.
So your local host 3000 right here slash surveys.
This is a route that is defined inside of our re-act router configuration remember.
So if we go into our client SIRC components apt Jr's file inside of here we had a bunch of configuration
for re-act rhetoric here.
And so here's a route of like Slash surveys and a route of surveys slash knew.
And so it's really the assumption here is really that they're are going to be some routes that are being
handled by re-act router inside of our application.
And then this other set of routes that are being handled by the Express server.
So what we have to do we have to instruct the express server that if it ever sees a request for some
route that it doesn't actually know about we are going to make the assumption on the express server
that whoever is making this request is probably trying to access a route that is defined by re-act router.
So the express server is going to say Oh you're making a get request for surveys.
I have no idea what that route is.
I assume that you're trying to get a route that is defined by re-act router.
So I'll tell you what you're looking for Slash surveys.
The best thing I can do for you.
Like the only thing I can really do is to hand you back the index HVM elth file.
So the express ever hands back the index each G-mail file so goes back to the browser.
Then inside of that index HTL file there is a script tag to load up our javascript bundle.
So then the index file in the browser says hey if I'm going to work correctly like as the e-mail file
I really need this javascript file is also also hosted by the server.
And so then the browser says OK I guess I got to fetch this other javascript file.
And so it goes back to the Express server asking for client build static J.S. maynt.
J.S. again we have to instruct the Express server in some fashion that if it doesn't recognize this
route it should forward it on and grab this javascript file right here and send it back to the browser.
And so at that point in time the browser now has access to the HTL document to the react side of our
application it flows both of them up inside the browser re-act router looks up or loads up excuse me
react rodder sees the current you are l of something like Heroku out dot com slash surveys and the reactor
router says OK based on this you are well I'm going to decide to show the dashboard component so I know
that everything we just went through as I just described it was very quick and I said it very quickly
and I didn't go into a lot of detail.
The reason for that is that we are going to go through this whole set up process and then when we finally
finish the whole deployment you will see this entire process in action and it'll start to make a lot
more sense outside of like me just showing you diagrams all day.
OK.
So just one more time I want to clarify that the big challenge right now is getting the Express server
to recognize that there are some routes that it is responsible for.
There are some routes that it should say.
I don't know what to do with this.
I'm going to send you to our index page html document.
And then there are even more routes that are trying to access very specific development Sumi very specific
assets like the main JSA file.
So there's these three type of types of routes that express now has to be aware of just to be really
clear like there is a very big distinction between these two routes right here.
One last surveys right here express has to understand that it's going to send back the HMO document
and the other one express has to understand that don't send back the HMO document.
This is a reference to an actual file so sent back this actual file rather than the HMO document.
OK.
So if this all seems kind of nasty right now.
Yeah I probably should.
This is some pretty darn confusing stuff.
But again once we start to wire everything up I'm very confident it's going to start to make a lot more
sense.
So now that we've kind of discussed what the problem is let's take a break.
We're going to come back in the next section and we're going to out in some code to our express server
to make it understand that there's these other routes that it needs to be aware of inside of our application.
So I'll see you in just a minute.