Now we would like to go into the server.js.
Now let's try to make this production ready so that we could deploy that.
And what I mean by that.
So when we visit, let's say our backend URL or domain, we would like to both run the client from here
and the server.
Okay.
So when we visit this route we should be able to see the homepage from our front end.
And if we visit a route like login, we should be able to see the login page or the sign up page.
So on and so forth.
But if we send a request to these endpoints, then it should give us the endpoint result that we have
in our controllers.
So to be able to do this we need to make a couple of things.
But even before that let's just optimize this port first.
Let's say this is going to be the for the port variable.
We would like to get it from Process.env.
And if this is not available that's going to be this value.
Let's make this backticks and then just put that dynamic port.
Okay.
So let's go into the dot env file and create that port.
That should be uppercase.
And then like this.
So with that in place let's try to do uh what I just mentioned.
We would like to run the server and client at the same domain.
So here I will create a variable.
I'll say const underscore underscore their name.
And that's going to be path dot resolve.
Now let's import the path from path which is coming from node js.
And if you console log this so I'll say dirname.
Open up our terminal.
Now this is the root route that we have in our application right.
We are not under the front end or back end, but we are just exactly at this point.
And from here we like to go into the front end to run our react application.
So after these routes I'll just say app dot use and we'll call express dot static.
And we're going to just join this path.
So let's say path dot join.
And now here we'll just say underscore and dirname variable that we have which is we are in the root.
And we'd like to go under the front end folder.
And then we're going to have the dist folder not the build but that should be dist.
And this is what we have got when we build our front end application.
And that's what we'll be doing in our, uh, when we deploy our application as well.
Now these are our static assets and let's add our other routes other than these.
So that's going to be like our login page, the home page or any other route that we have in our front
end.
So I will say app dot get and we'll just put a star or asterisks, which means the wild card.
So request and response.
So when we hit any other routes other than these, we're going to send a file from our react application.
So rest that send file and would like to say path.join their name.
And I'll just make it um comma separated.
So under the front end.
And then comma we'll click to go under the dist and then the index dot HTML file.
And this will be our react application.
So let's save.
And we'd like to just delete this for the homepage.
We don't want to get this server is ready message.
But instead we'd like to have the homepage from our front end.
So I'll delete this part.
And if we save hopefully that's going to work.
I will kill this terminal and then the front end as well.
And in our, uh, server.
I'll just say npm run dev and let's try to test it out.
We got the server is running MongoDB connected.
And here we can see now we're going to go into the localhost uh 5000 which is our server.
But here we can see we have we are in the home page.
If we visit a page like login first we need to log out.
Um okay.
So this is not working as expected because we didn't build our application.
Right.
We don't have the latest version of our react application.
And that's why we see this boilerplate.
Um, so the hardcoded value, we cannot log in, log out or anything like that.
Let's go ahead and run this npm run build in our front end.
So npm run build to get the latest build of our front end application.
Okay, so it has been completed.
It is built in seven seconds.
Now let's kill the back end or we already killed it.
Let's say npm run dev so that we could just get the latest version.
I'll refresh and now we are logged out.
If we try to log in.
So here it says this site can't be reached.
And it is because we need to update this OAuth.
Um so this homepage URL now we don't have this homepage URL because we are using this one as our client
as well.
So let's try to add it actually in the deployment.
So we have too much tabs open.
So I'll just close them and just only keep this one I'll close this one this one and all of these maybe.
Now let's go into the render.
Dot com.
If you don't have an account, just try to sign in or sign up.
I already have an account so I'll just go ahead and log in.
So here I have logged in and this is the application that I was testing out like it has been deployed
three days ago.
Let's try to create a new one.
We'll say web service.
And we'd like to build and deploy from a git repo.
And first you need to create a GitHub repo and push your code.
So I'll just go ahead and try to create a new one.
So I name this one as Mern GitHub app.
And I'll say this is going to be a public and I'll say create repo.
Now here we'll just push this code to existing repo.
I'll copy this.
And in your case your master branch might be main.
So don't worry about that.
Just copy this command and go into the root.
So just paste that.
And maybe you need to press enter so that it is going to take this code and push it, but we forgot
to add the latest commit.
So let's try to just say git add all and git commit m and we'll say build.
Um, let's say optimized for build.
But this is not the case.
We forgot to add update the package.json.
So here we are going to add two uh commands.
So one to build the application.
So two to be able to build it.
We need to install the packages.
So npm install.
That's going to be uh installing the packages for the backend.
Okay.
So we will run this in our render.com account.
So it is going to install the node modules for the backend.
And then we would like to install.
So let's say npm install the packages for the front end.
Now we'll just say prefix front end.
That means run this npm install script under this front end folder.
And once you have done that, we would like to run the npm run build command as well.
So npm run build for the front end.
So say dash dash prefix and then the front end.
Now we need also.
We also need to have a start command for script I'll say start.
And that's going to be node under the back end folder.
We would like to run this server.js file.
So with this I could save this file and add all of them from scratch.
So I'll just say git add all the files and git commit m package JSON updated.
And maybe I'll just say server.js updated.
Okay, so package.json and server.js server.js files Updated.
So git commit and git push.
Let's try to see that in our application.
I'll just refresh now.
Here we here we just got the latest commit.
It says package.json and server.js updated.
So we would like to deploy this repo.
We're going to go here and let's say build and deploy from a GitHub repo.
And we're going to get the latest repo that we have here.
I'll say connect.
So here it says name I'll just say Mern GitHub app.
And then we could just leave them as it is.
So npm run build.
That's going to be our build command.
And then for the start command we'll just say npm run start or basically npm start.
That's the same thing.
We're going to go with the free tier.
And we need to add our environment variables one by one.
So here I'll just take this to the maybe like this.
I'll just shrink it and I'll say GitHub API key.
Paste it.
And then.
And then the value.
And I'll do the same thing for all of them.
So we have the Mongo Uri.
I'll just copy all of it and paste it.
We have the port.
Let's say it's going to be this value.
And then we will have the client base URL.
The GitHub client ID.
And for the client base URL we'll just skip it for a second.
Okay, we already added the port.
We could delete this and we're going to add the client base URL once we deploy it.
So we have added all of our environment variables.
Now let's say create the web service.
And hopefully that's going to work.
And that's going to take a bit of time.
So let's just wait for it.
Now it says build was successful.
Now it's trying to deploy this.
And again we need to just wait for it.
So finally it says your site is live.
Let's click to it.
And here it is not going to work as expected.
And we're going to fix it.
Now this is our entire URL or domain I'll copy this.
And we need to update our OAuth application.
So now homepage URL is not this one because it is not in the local but it But it is this one.
And this is again for authorization callback URL.
It is going to be this route where we just deployed our application.
So we're going to update that and update the application.
And then also we need to go into the render where we just need to add an environment variable.
So we had this one client base URL.
So I will add it.
So let's say add environment variable that's going to be client base URL.
And then just paste the value which is our application.
Right.
And just delete the slash at the end.
Now we'll just say save the changes.
And I think it is going to deploy it.
Let's go to the dashboard.
Okay.
So automatically it's going to try to deploy because we have changed the environment variables.
Let's wait for it to be completed.
And once it is done I'll just get back.
So it has just been deployed.
Let's test it out now.
So we are going to refresh.
And now if we try to log in, hopefully it is going to work as expected.
And here it fetched this profile.
Let's try to log in.
Now here it says internal server error.
And the reason is we need to just update one thing in our.
Let's see I think inside the password where we just say callback URL.
Instead of this value we're going to put our entire URL.
So that was let's go to the render comm.
Oops.
It is here.
So this is our entire application URL right.
I'm going to copy that and then just paste it to here.
Um okay.
This will be the callback URL.
We just need to type it uh the full URL.
So I will save this file.
And now I'll just try to uh add a commit.
So git add and git commit m.
Him callback URL, update it and I'll just say git push.
Now again it is going to take and deploy this latest commit as well.
So here let's just wait for this as well.
Okay.
So it has just been deployed.
Now let's test it out one last time.
We're going to go into this app.
And here we are in the homepage.
Let's try to log in with this account.
So it is going to take us to back into our application.
And there we go.
Now we have been logged in and everything works as expected.
Let's search for this user.
Here we can see this is their profile if we try to like it here it says user liked.
And you could also add a loading spinner for this with a state.
But if we try to like it again it is going to give us an error that says user already liked.
We could go into the likes page here.
We could see this user has liked our profile, which is the today's date Estate and here we could see
the explore page.
Everything just works as expected.
And yeah, that's going to be our application.
Now the deployment part was a bit tedious so I put some notes for you.
So here I'll just add it in case you would like to see that.
And in case it was a bit confusing.
So inside maybe here I'll just say deployment.
Dash steps.
So deployment steps.md.
And I will copy and paste that.
So we first need to set up the Server.js file where we just added the express dot static middleware
and rest dot send file for our react application.
And also we need to add this their name.
Right.
So let's delete this comment by the way.
And here after that we have added our built in start scripts in package.json so that we could run them
in our render application.
And then we deployed with env variables, where we just copy and paste all of them one by one.
And then we update the GitHub app where the homepage URL and callback URL that was the localhost.
But we added our entire URL or domain.
And then we added the client base URL as environment variable on render.
And lastly, we have updated this client callback URL with the full URL.
There we can see.
So this was.
These are the steps that you need to do for the deployment in case you would like to have it I'll just
uh leave it in the repo.
So this is going to be it for this application.
I hope you were able to follow along up until here.
Now, you could just take this application and just take it to the next level where you could add messaging
functionality.
You could add lots of different things that are related to front events.
You could follow profiles and follow them.
And thanks for watching.
Hopefully I'll see you in the next one.