Now we would like to deploy our application.
And for this we need to configure this server.js file.
And this is the current state of our application right.
We are running the server under the localhost 5000 and client under the 5173.
What I really want to do is actually take the client also serve it under the same, uh, domain.
Right.
I don't really want to run this separately.
So how can we make this happen and why are we doing this?
Well, the first reason is just to have an easier deployment.
So this is kind of like the monorepo setup.
And we don't really want to handle the course errors.
Right.
So we can just get rid of this immediately because we are serving the API as well as the client under
the same domain.
Okay.
So with that in mind now let's go ahead and take the client and make sure it is also being served under
the same domain that we have.
Okay.
So we're going to go ahead and have a variable Well, maybe down here I'll say const underscore underscore
their name and we'll say path dot resolve.
And make sure you import the path from path.
I'll just go ahead.
Put it up here.
Okay.
Now we'll be using this.
But we will only be using this in the production.
Right.
So I'd like to have a node env where we already have it.
And we will just say after these API routes if the process dot env dot uh node underscore env if it
is equal to production, we would like to serve the react application under the uh under this port.
Right.
So we'll go ahead and just say app dot use.
And we would like to make our client uh directory to be static assets.
And when we uh build this react application we're going to get a dist folder which is the optimized
version of our react application, so we would like to find it and make it to be static.
So we'll say express dot static.
And now we can use that path module.
So we'll just say path dot join.
And we would like to say underscore underscore their name which means that we are in the root okay.
We are here.
We would like to go under the client and find the dist folder.
Currently we don't have the dist folder.
But if we run npm run build we are going to get it.
And this is what will happen in the production.
So we'll just say from the root, go under the client and find the dist folder.
Right now we just made it to be our static assets.
And then we'll say if we visit let's say app dot get um any routes right.
Any routes other than these we would like to, uh, return our react application.
So we'll just say request and response.
We would like to say rest dot send sent file.
And we would like to put that path to the file.
So it's going to be path dot resolve.
And we are going to go ahead and find the use the Dirname variable.
And from here we would like to go under the client into the test.
And there will be an index dot HTML file that we would like to serve.
And this will be our optimized version of our react application.
So with this that should be it.
And the only thing that we are missing is going to be our scripts.
So here we are running this in the development.
But now in the production we need to build this entire application.
And what do we want to do first I just have a build command and we would like to install all of our
dependencies for the backend.
Then we would like to install our dependencies but for the client.
So we'll just say dash dash prefix client.
So this basically tells our run this command, but make sure you're under the client folder.
And then once we run this, finally, we'd like to build our react application.
So we'll just say end npm run build.
And let me just shrink this so that we can see the entire line and dash dash prefix client.
So again this says build the client application.
Then if we want to start this in the production we will just have node um let's say api server dot js.
Run this file but not with Nodemon.
Uh.
Instead just run it with the node.
So that should be it for the deployment setup.
We have a to do I believe.
Let's take a look at it.
Yes.
There we go.
Now in the Axios instance we are using the localhost.
But in the production there is not going to be any localhost.
Right.
So we can make this to be dynamic.
I'll go ahead and delete this to do and just have a variable.
I'll say base underscore URL.
And this is going to be dynamic.
So we'll say if we are in the development that could be localhost 5000 slash API.
So I'll just say import dot meta dot env dot mode.
If this is equal to development make sure it is all lowercase.
So development in this case we can go ahead grab this dude.
But if it is production then this is going to be whatever the current URL is slash API right.
So we just make this part to be dynamic okay.
Then we're going to go ahead.
Take this paste it here.
And this is that to do we need to do the same thing for the socket client file I believe okay.
So socket URL is not going to be this.
But instead I will say if we are in the development Then it will be this.
But else.
Um, this is just going to be slash, let's say.
Um, I think this should be slash.
Yep.
Because, uh, this says whatever the current, uh, your, whatever the current URL is.
Right.
This would be our server, and I think that should be it.
We would like to deploy this.
And for this we're going to be using a platform called render com which is completely free to get started
with.
They have paid plans, but um, they have a free plan as well.
So we can go ahead and log in with our GitHub account.
Uh, let me just do this and come back to the video.
Okay.
So I just logged in.
This is my dashboard.
You might not have any projects.
This is the one that I have tested out before recording this video.
Uh, just ignore this.
We are going to go ahead and create a new one.
But first we need to push this code to our GitHub account.
Right?
So I will be like I'll go ahead and create a git ignore file here.
Instead of creating maybe I can take this dude, put it into the root.
And what I need to do is just add a dot env into this file because it doesn't it doesn't include it.
Okay, so now let's just try to add all of our changes.
Now we can just say git init.
So here we can see it has been initialized.
And we can just say git add all.
Um let's say git commit dash m.
Let's just say project completed.
And I think we can just commit this message.
Now we'd like to push this code to the GitHub.
So let's go ahead and log in to our GitHub account.
Okay so I just logged in and I want to want to create a new repository.
I will just call this as Tinder clone and I'll make this private.
But after I publish this video, I'll make it public.
So if you want to, you can go with the public option.
I'll go with the private one then let's say create the repo.
We already have a repo in our local machine.
Instead we would like to push this right.
So I'll copy this and paste it into my terminal.
Hopefully our code should be on GitHub.
Let's refresh.
There we go.
We got everything, but we don't have nodemodules or the dot env because they have been ignored.
So we're going to go ahead into the render dashboard.
I will say add a new web service.
And we're going to get it from our git provider.
And this should be the one that we have just added seconds ago.
So let's connect to this.
And now we need to add our scripts, which was the start, start and build script.
So let's scroll.
Do not change anything above for the build command.
We would like to say npm run build and for the start command we'll just say npm run start and select
the free plan so that we don't really pay anything, even though it has a disadvantage of like it just
goes into the inactive mode if you don't visit it for 15 minutes.
But I think that's completely fine, uh, for a site project.
And now we would like to add our environment variables.
So you can add it one by one.
But the better option is to copy all of them and click to this add uh from dot env file and paste it.
Make this bigger.
And we're going to go step by step.
So we have a port mongo uri jwt secret node env.
We can delete this.
Litres.
It will understand that it is in the production because we are deploying it, right?
Then we have cloudinary secrets and now we don't have a localhost.
So for now we're going to go ahead and delete the client URL.
When we deploy this we're going to get a URL from render.
And then we will update it with that.
So for now just leave it an empty string like this.
Let's say add variables.
And we can say deploy the web service.
Okay.
So here it says it is required.
Let's just say test.
Okay.
Now we'll just deploy this in the first time.
Uh it is not going to work because we need to update the client URL.
But this should be deployed successfully.
So let's wait for this.
This is going to take a couple of time.
Uh, I mean, a couple of minutes.
Then I'll just be right back.
Okay.
So it looks like build was successful.
It connected to the MongoDB server started, and now it should say your service is live.
There we go.
It is.
It is life.
Now we got a URL.
Let's click to it.
Um, it should take us to the application.
Like, even though it looks like it is working.
If you try to log in, it is not going to work, right because the client URL is missing.
So we need to copy this, go into the environment and update this client URL.
So let's say edit for now we have the test.
Let's update it with the actual client URL.
And let's say save, rebuild and deploy.
So again this will take a couple of minutes.
Then it should be good to go.
So here it is deploying once again.
So let's wait for this to complete.
And then I'll just be right back.
So in my case it is failed.
And it is not related to our application.
It is related to render.
Com here you can see it says uh just exited with status code of one which means failure and like internal
system error.
So this is related to render.
We just need to go ahead and deploy this again.
Probably in your case it worked out.
But in my case it didn't for some reason.
Um I'll just go ahead.
Just say maybe manual deploy deploy the latest commit okay.
So this will just try this out once again and I'll be right back okay.
So this time it worked.
Now it says your service is live.
Let's go ahead and try to log in.
So I already had an account called Bob Doe.
Let's put the wrong password.
It should say invalid.
But now if I put the correct one I should be okay.
So why this didn't work?
Let's just say maybe the email address is wrong.
I don't know.
Let's say 123456.
Again it's the same password.
But okay.
So I'll just go ahead, create a new account.
Let's say um Uh, I don't know.
Let's say Beth Doe and just give it an email address.
Beth at example.com.
Password could be from 1 to 6.
Email and mail let's say.
Okay.
We'll just sign up.
Let me just fix the name.
Okay.
This should be 22.
My bad.
The password should be 123456.
Okay, there we go.
Account has been created.
Now I will go ahead and try to update my profile.
Let me just upload an image.
So I will go ahead and select I don't know this one.
And let's just say um coffee addict.
And let's just say age will be 23.
Save.
And here we go.
Everything has been updated.
We can refresh and we will have this same information.
Now I'll go ahead and, uh, sign up with a different account.
So this time, let's have Walt Doe and Walt and example.com password could be from 1 to 6, age could
be 32.
Let's say male female.
Sign up.
And now we'll try to match these two users.
Let me just put them side by side.
Okay.
So I'll go into my home page.
We have the Walt.
Let me just give him a profile image as well so that it looks clean.
Okay.
So this has been updated.
Let's refresh for this user so that they can see the latest image.
There we go.
I will take this to the right and take this one to the right.
Okay.
There we go.
We just got a new match, even though there was a bit delay because this has been deployed.
It'll take a bit time to go back to the database, come back to the ticket server, things like that.
And now if we take a look at it here, they got the, uh, matches instantly.
Let's send some match messages.
I'll just say, hey, Walt, send it.
There we go.
We can just send some more messages.
As you can see, it just works out in real time without any issues.
And it is completely responsive.
Let's test this out.
So this is what we have for the chat page.
Right.
We can go to the home page.
It also works out without any issues.
We can swipe to the right to the left and everything is working as expected.
So that's gonna be it for this project.
I think I'll see you in the next one.