In the last video we spoke about a couple of different options we could use to build the client side
project and start it up and make sure that it gets served by the Express server.
So we settled on Option number two right here.
Let's look at another diagram that's going to break down this flow in greater detail and get a better
sense of how this is all going to work.
OK.
So here we go zoom in a little bit.
So this is the flow that we're going to go through.
This isn't exactly how we're going to wire it up.
This is how the flow is actually going to work when we deploy our application.
So we're going to commit all of our files to get we're going to push those files to Heroku when we push
to Hoku.
It's going to automatically install all of our server dependencies just as it did before.
So this is a step this right here this step was already occurring.
This was something that's already happening inside of our project.
Now the new stuff is down here.
So we're going to say that after Heroku runs all of the server dependencies it's going to attempt to
automatically run a script called Heroku post built inside of that script.
We can give Heroku additional instructions on how to set up and start running our application.
And so inside of this Heroku post build script right here.
We are going to tell Heroku that it needs to install all of our client dependencies like all of them
including all the development dependencies as well.
And then tell it that it needs to run the command and run build from within our client project directory.
So that's going to start up the build process.
It's going to make all the production version of our assets.
And then when this whole command right here finishes her is going to go along its way and continue trying
to start up our application.
So couple of steps here.
It won't be that bad.
Honestly the code that we write here is going to be straightforward.
The reason it's difficult is understanding why we're writing the code and exactly what we're writing.
So you really have to dig in.
Heroku is documentation a little bit to understand exactly what's going on with these steps.
OK.
So let's get to it.
The first thing I want to do is look up some documentation on Hoku where we can figure out how to tell
it that it needs to install all client dependencies including all the development modules as well.
So I've already pulled up that documentation.
I'll scroll to the top here really quickly if you want to you can find the article called Roku no JSE
supports and it will give you a bunch of different you know stuff in here for exactly how you customize
no data on Heroku.
So we want to find I zoom in here really quickly for you.
We want to find the section somewhere around like on road customizing build process.
So right here.
So customizing the build process you can read very plainly says if there is a build step that you want
to run when you deploy.
You can use a post install script inside the package not just on file.
So we've worked with that script section quite a bit and we've already defined the NPM start script
right here.
So Heroku is telling us if you define a script called literally post install it will automatically run
that after or soon will automatically run that after installing all the server side and modules.
So this post install right here will be automatically called for us.
Now even in the example you see right here is an example of building a client side project.
Bauer is a client side javascript dependency management system and Grundt is a module or a task runner.
Not unlike web pack which is what we're using behind the scenes to build our application.
So very clearly like yeah we're doing the right thing right here by using Heroku to build our project.
Now if we scroll down a little bit you'll see that it says Heroku specific build steps.
And so it says While no jazz has standard scripts sometimes you may only want to run this before or
after builds on Heroku.
For example you might want to configure Heroku dependencies blah blah or very specific to us.
Here is the real key right here.
You may need to build production assets after dependencies are installed.
So that is pretty much us right here.
We're going to add a script that is only executed after NPM modules are installed for the server side
of our project on Hoku.
We only want to do that on Hoku.
So the reason that we're going to use this script right here rather than just the generic post install
is that post install right here will be executed if you run and humans install on your own local machine
as well.
And so obviously if some new developer clones or grabs your application and runs into install to set
up the server you don't want them to also automatically start building the client side project as well.
So by using Heroku post build we ensure that we are only running this thing on her oku.
OK so I know that I just said that we were going to talk about how to install the client side dependencies
so we kind of skipped there a little bit to talking out the script.
So let's continue looking at that document and I will show you how we tell Heroku to install all client
dependencies.
So if we scroll down a little bit here is dev dependencies.
And so essentially if you want to install dev dependencies to your project which are dependencies in
use for solely development purposes and that's exactly what we want to do here then you can run this
line of code right here.
Now if you look closely at this line this says set an environment variable on our Haruko instance that
says NPM config production equals false.
And so what this does right here is it makes sure that any time you install any NPM modules on Roku
you get both development and dependency modules and so that would also affect how our server side dependencies
are installed as well because we're setting this kind of global flag here with this line.
So we're going to do something similar to this but we're going to make sure that it does not affect
our server.
We're going to make sure that it only affects the client side of our project.
OK.
That's a lot of talking.
OK.
So we've essentially discussed Heroku post bills.
We've discussed how we set up these client side dependencies and then we're going to figure out how
we actually build our project.
So let's get to it.
Let's do the actual configuration here.
Again the actual code we write is straightforward.
It just is knowing what to write.
That is the challenge.
So back inside my code editor I'm going to find my project package not just some file inside of my root
server directory.
Remember that when we push our application to Heroku Heroku does not care at all about the package not
just on file inside the client directory all the Heroku configuration all the Heroku we set up has to
occur inside the server because this is the only package not just on that Heroku cares about.
OK.
So inside if you're going to find my scripts section right here then we're going to add in a new script.
So this is going to be the script that gets called automatically after our server has completed installing
its own dependencies.
So at the end of the line labeled dev going to make sure I put down a comma like so and then on the
line writer Neith it will put down Heroku dush post build.
So this script right here will be called automatically after server dependencies have installed.
So the first thing we're going to do inside of here is make sure that we tell Heroku to install all
MPO modules both in development dependencies and the production dependencies as well.
So essentially this is doing what this section says.
Like I said word is going to do it in a slightly different fashion.
So inside if you're going to say with all capitals NPM underscore config underscore production equals
false.
So by putting this statement right here inside of this script it ensures that this environment variable
will be only set for the duration of this command.
So like I said we don't want to set this kind of change how things are being done on our server.
We want to only have this flag set right here for dependencies that are installed on our client project.
So now after saying equals false I'll put a space and we're going to first tell Heroku that it needs
to install all of the dependencies inside of our client side project.
And then after all those dependencies are installed it needs to then build the client side project.
So I to say NPM install dash dash prefix client
remember dash dash prefix right here client we have to put this on because we want to run the NPM install
command inside the client directory not the current directory.
If we just ran NPM install that would re-install all of the server side dependencies because Heroku
thinks that the server side project is really the only one that exists here.
So we are specifically specifically telling Heroku go into a client directory and install all of the
dependencies that are listed inside of that folders package done Jason.
So this right here is going to install all of our dependencies and we want to make sure that immediately
after that process is complete we then build our project sold to another space.
And yes this line is going to be very long.
I'll show you the entire line in just a minute I'm going to say.
And and so ampersand ampersand NPM run build.
And then again we want to make sure that this script right here this command is executed from within
the client directory.
So again I'm going to say dash dash prefix client like so.
OK.
So a very long script right here.
I'm going to copy the entire thing and put it into a new file just to make sure you can read the whole
thing correctly.
So I'm going to put in some new lines here just so you can read it easily
so in your package objects on file do not put in the new lines just keep everything on a single line
like this right here.
And just to be clear.
So make sure you've got the correct spelling on NPM config production.
Make sure you say it to False.
Make sure you've got the dash dash prefix on both these commands you install.
Just install the next one is NPM.
Run built.
So three words on this command.
Here are the make sure you have two.
Two very important here two ampersands between the two commands.
OK.
So hopefully we got all the typing here correct.
If you made any typo here you're going to know about it very quickly.
When we tried to deploy the application it's going to close this out and make sure that the package
not some file is saved.
That's pretty much it for configuration.
So the last thing we need to do is commit all the changes we've made to our project to get and then
push our project up to her OK.
So I'm going to change back over to my terminal.
I'm inside the server directory right now.
I'm going to look at all the different changes that we've made to our project.
So we'll do that by running get status now very quickly.
I only have a single file right here.
You probably have many files listed.
You probably have a lot of stuff I have just one file right here just because of the way that I've been
managing.
Get inside this project.
I've been having to kind of do a lot of extra steps here just to make sure that I have got a running
record of all the changes that I've made to the course on a video per video basis.
So that's why for me I have one file here but you probably have very many.
So we're going to add this file out.
All these changes to our source control by saying Get add dot within committed with get commit dash
him and I will say added billing and client side out.
We're going to close off the double quote string entered to commit it.
Oops.
There we go.
So I've now made all my changes like so and so now the very last step is to actually deploy this to
Heroku.
And so again you're going to run the command get push Heroku master.
Now when you press enter here and deploy the application everything should work out OK for you.
For me I'm probably going to see an error message again.
So because the fact of the way that I've been maintaining the good side of the repository a little bit
different so I'll probably see an error message.
You very likely should not.
So I'm going to run this and actually I didn't.
Fantastic.
Well I really lucked out this time.
OK so it looks like it's going through the step here.
It's taking all the changes we've made.
And again we're starting to see a lot of output from Heroku right here.
Now some really interesting stuff.
You're going to see popping up very shortly.
You will see a step that says something like building dependencies so installing node modules from the
package not just some file and then you're going to see a message that says running Heroku dash post-flight.
So it's successfully recognized that we added in that new little configuration script of Heroku dash
post-flight And so we should see something like that right there or like this right here is something
and says OK we are now running this command of NPM config files and install blah blah blah.
So here the NPM install process on our client project.
It probably took about 30 seconds or so yours might be slightly faster slightly shorter after the install
was complete and then kicks into the actual build process of the application.
So we saw that message previously you know creating a production built it looks like that succeeded.
And so now our application is completely deployed.
Now I want to tell you at this point that it's entirely possible even likely that you might have made
a typo somewhere along the line if you did.
The easiest way to debug it is to check out an error message.
So during that deploy you might have seen an error message or even right now we can see if any errors
occurred by running the command Heroku logs like so and so if there is any errors during this process
whatsoever we would see them when we run this command Brochu logs.
So for me it looks like everything worked correctly because I see my startup script right here.
I have the two deprecation.
I know these are so annoying messages from mongoose and then eventually I see the message that says
state change to starting up.
So our application is successfully starting up.
So now the very last thing is to test this out inside the browser.
So run Heroku open to see how everything's doing inside server server and lo and behold magically the
application pops up.
OK.
So this is looking pretty awesome.
It looks like the deployment actually worked.
Again if something did not work if you got an error message or if you don't see the react side the application
pop up right here.
I would encourage you to go back to the terminal again and run Heroku logs.
So if you did not see the application pop up here when you tried to access this page inside your browser
it might have caused the server to throw an error of some sort.
And so that's why I suggest running Raku logs again because if you run it again you'll see any follow
up error messages that you might get.
And so when I run Horo gulags you'll start to notice all the extra messages in here that says oh someone
made a request to the route route and they came back and made another request for CSSA file and they
came back and they'd made another request for a javascript file as well.
And then they made a request for the current user and then some font file.
And so clearly you can tell.
Yeah a lot of stuff going on here.
OK.
So hopefully everything works out for you correctly at this point.
Let's take a break.
We're going to continue in the next video and we're going to look at a couple of interesting parts around
our deployed application that should hopefully help us understand a little bit more about exactly how
the Express server is behaving now.
So I'll see you in just a minute.