Okay.
And once we're done with our initial deploy up next, let's make some improvements to our app.
For starters, let's build our front end programmatically.
You see, our current setup works, but every time we'll make some changes to our front end before we
push our project up to a GitHub and essentially deploy it.
Because at the moment we do have continuous deployment, which means that every time I'll push this
up to a GitHub render, we'll start rebuilding our project, which is really, really awesome.
But if we make some changes to the front end before we push it up to a GitHub, we will need to manually
build our front end first, just like we did in the previous video.
Basically, we will have to navigate their build the front end and then move it to a public one.
Otherwise.
Well, as far as the front end is concerned, we're still deploying the old one.
Correct.
And obviously, that's not something we want, so let's fix it.
So for starters, we essentially want to set up a new script in the package Json, and then in the server
we'll just change the path.
So if we navigate to a package Json.
Of course, you'll notice our setup project one.
And what are we doing over here?
Well, we go with PMI.
So we install dependencies on the server.
Then we navigate to a client and then we also install dependencies.
Correct.
So this is for setting up the project.
And essentially I want to keep this command because this is very useful if I pull it from the GitHub.
Now the change I want to make is to add one more command and that is npm run build.
So essentially I want to copy and paste.
So at the moment, of course the name is the same, but I'm going to change this around.
I'm going to go with setup.
Production.
Hyphen app.
And in here.
Like I said, I only want to add one more thing and that is NPM run and build.
So npm run, build.
And now essentially.
Every time we run this command, not only will install dependencies, but will also immediately build
our frontend.
And once we have this in place, now we can navigate to a server and instead of pointing to a public
one now I'm going to point to a client Dist, since that's where my newest frontend is going to be located.
So this is very, very important.
Don't keep the public one.
As a side note, we'll actually remove the public one when we fix our update user functionality, but
I don't want to do it right now, so make sure that you change here.
This static one, it's not going to be public.
It's actually going to be our client and then list and the same is going to be with this index.html.
So let's try it over here.
So instead of dot forward slash public, we're going to go with dot forward slash client forward slash
and then Dist again.
This is where our newest frontend is going to be located.
And essentially we want to do the same thing here with this index HTML.
So instead of pointing to the index.html which is located in the public one, we're pointing to a client
dist.
And before we push this up to a GitHub.
And change the command in the renderer.
I want to test it locally and this is super, super important.
Again, it's always easier to troubleshoot bugs while you're still working locally.
It's much harder to do it when you push something up to production.
Yes, if there are no bugs, project is going to work locally and then we can push it up to a GitHub
and then of course Render is going to rebuild our project.
So let me start over here.
Let me clear everything.
And basically in order to test it locally, I want to navigate to a client.
We're going to remove the node modules since of course we'll run our command.
I also right away want to remove the dist now.
I already removed it in between the videos, but make sure you do that.
Make sure that you remove the dist so you don't have the old one.
Then let's navigate to a server and let's remove the node modules.
And this is totally optional, but it's always my preference to also remove the package lock.
But again, you don't have to technically do this, so let's remove those files then Let's run our command.
Remember, what is the command?
We want to go with NPM run and then set up.
Production.
An app.
Let's run this.
You'll notice that not only we installed dependencies, but we also right away build our front end.
So just imagine that you made some changes to a front end and essentially now you want to build it from
the scratch.
So we installed dependencies, we navigate to the client, we installed dependencies over there and
also we right away perform NPM run, build.
Now this might take a little bit of time, so I'll stop the video and I'll resume once everything is
complete and once the command has finished running.
Now we want to again clear in my case and we want to go with node server.
So not NPM run dev, we're not spinning up concurrently.
We're going with node and server.
And as far as the browser, we're looking for port 5100.
So not again our 5173.
We're looking for localhost and then 5100.
And again the application needs to work, so everything should work over here locally and only then
we push it up to production.
Now again, I'm not going to test each and every functionality, but I do want to take it for a test
drive.
All jobs, stats and all that so everything looks correct and effectively.
Like I said, we have continuous deployment right now.
What that means.
Well, we can push this up to a GitHub and render is going to rebuild our application, which is obviously
super, super cool.
Now we can push everything up with the help of integrated terminal so we can provide the command or
we can use the VS code.
So notice over here this tab.
Essentially, this is a source control.
It shows me right away all of the changes I made in my project.
And essentially we just want to provide over here the commit message, then commit and then push it
up to a GitHub.
So in here I'll say fixed or fix front end.
Then let's commit this and notice over here, once I click on those three dots, I have this option
of push.
So essentially we just push this up to a GitHub.
And now if we navigate to a GitHub, if everything is correct, we should see the latest commit message.
Now we're not done.
We also need to go to a render and change our build command.
So let's navigate to the render platform.
We're looking for our application, then we're looking for the settings and we just need to keep on
scrolling, keep on scrolling.
And remember our initial build command was this one NPM install.
But of course now we want to run NPM run setup production app since we want to build the front end on
render as well.
So let's go here with NPM run setup.
Then production and app.
Let's save the changes.
Let's navigate right now to I guess, the logs since I want to showcase how everything is taking place.
So now let's navigate over here.
Notice we can deploy the latest commit or we can nicely clear the build cache and deploy from the scratch.
So let me click on that.
In here.
We nicely see the command render is running and again, that is our NPM run setup production app.
And essentially what's happening right now, we're programmatically building our front end on render.
It looks like it was a success.
So now let's navigate to the URL and again, I'm just going to test with the demo user.
Yep.
Take a test drive and again have the stats.
I have all jobs so everything is correct.
And with this in place we can start working on the next step.