All right.
And actually, at this point, we're done with the project.
Yes.
Eventually we will add the React query.
But technically, at least in my opinion, that's an extra.
So essentially we're done with the main project.
And now, of course, we just want to deploy it now before we deploy the project, we do need to complete
a few steps and for starters, I want to navigate to a login and register and I just want to remove
those default values.
So yes, it was useful while we were developing, but there's really no need once we push our project
to production.
So let's navigate to the pages.
For starters, let's look for register.
You know what?
Let me close all of these first and then one by one.
So we're now going to add default value of John.
Of this one.
I'll also remove this one.
And this one as well.
I think that should do it for.
Register.
Think I removed all of them.
And pretty much the same for login.
So let's navigate over here.
And again, I don't want.
Both of these values.
So let me remove this one as well as this one.
Then we want to navigate to the client and essentially build a production ready frontend.
Now how we can do that, we want to navigate to our console.
Let me clear everything.
And of course if you want you can set up a script in a package.json That's also an option.
But this time I'm just going to do it manually where we want to go with CD client.
So now we navigate to the client folder and then if we want to set up a production ready application
and we want to go with NPM, run and build, so let's build our application and then we will essentially
move the files to our public in the server.
So this is very, very important.
Remember when we were setting up the image upload functionality, we created a public one and on the
server we made sure that.
It's publicly available.
Basically, we went with express static and then path dot resolve.
We're looking for Dirname and then we make our public one publicly available.
So once we run NPM, run, build and once everything is in place, now we want to navigate to a dist
folder.
And you know what?
Let me just set up everything from scratch over here.
So we're looking for client and pretty much our production ready front end is going to be living in
this dist folder.
So we have multiple options.
You can copy here from the VS code, but in my case I'll actually navigate back to my desktop.
I'll open it up so I have dist over here and you don't want to move the folder.
This folder, essentially you want to take everything that is inside and you want to place it here in
the public.
Or I'm sorry.
My bad.
Scratch that.
Not in a public here in the client.
You're looking for the public one that's in the server.
So essentially, you're looking for the uploads.
So copy and paste.
So now notice this is going to be our front end.
Correct?
So now let's navigate back to our server and not only I want to make the public folder publicly available,
but also I will need to set up a path.
And essentially after all of our routes, we want to direct the user to the index.html.
So if we take a look at the public, we'll see over here this index.html.
So this is going to be our entry point to the front end application.
And the reason why we want to place it after all of the routes, but before the error out is because
from the front end we will still use our back end.
So this is going to be only for all of the get routes.
We want to point them to index HTML and the way it's going to look like we're going to go with app dot
and get.
So pretty much for all of the routes.
But again, we're talking about our front end.
So if, for example, we'll be requesting something from the server, we'll hit these ones first, then
we want to add a comma so we'll have req and res.
This is going to be our controller essentially, and we just want to go with res dot and then not send
date.
We want to send the file and now we are looking for the public one and then index.html.
So in here pretty much the same.
How we were doing it over here with path dot resolve.
Now we want to add the index one so we'll look for path dot resolve.
Then underscore, underscore dirname.
We already have the code for it.
Correct.
Then forward slash public and then comma.
And now we want to look for index HTML.
So index and HTML, let's save it.
And now we don't want to run this from the client.
So first of all, let me move up now.
I'm actually back in my route.
I want to clear everything and instead of running NPM run dev, we want to go with Node and then we're
looking for server since this is the file we're going to use.
And when it comes to a browser, we're actually looking for localhost and then 5100, that's where our
project is located.
So again, we're not spinning up concurrently right now.
We're actually spinning up our project.
And let me mention something very important.
The project needs to work locally on Port 5100 or whatever port you have.
If it doesn't work, it's not going to magically work once we push this up to a render platform.
So please, if you have any issues, troubleshoot them, use the course Q&A.
Otherwise, if you push the project up to render with the bugs, it's going to be way harder to troubleshoot
them.
So now let me navigate back to my browser again.
I'm not looking for 5173 actually want to go here and I want to look for 5100.
So this is where my project is located.
Now, I'm not going to test each and every functionality, but I do want to log in first as a demo one
just so I can see whether everything works.
Notice I can still nicely get the jobs, the pagination works.
I can take a look at the stats, I can take a look at the profile if I try to change something here.
I shouldn't be able to because I'm a demo user.
So now let me log out.
Let me log in as John.
So again, I'm not going to be registering.
I think it's faster if I just log in and let me go with my famous password.
Let's submit.
Yep.
Login successful notice I still get the image and all that so everything is correct.
And let me just try to add the job in here.
I'm going to go with front end.
And the company again is going to be Apple.
Let's click on Submit and check it out.
I can also create the jobs.
So pretty much once I can see that the main functionalities work, it's pretty clear that everything
else is also going to work.
So now we're ready to push this up to production, essentially deploy our entire project.