Okay.
So finally we would like to deploy our application.
And this is the current state of our app that we have.
So we are running the server at 5000 port.
And we are running the react application under the 5173.
And this current setup wants us to handle the course.
And it is kind of hard to deploy this in this way because we need to go ahead and deploy this one separately
and deploy it separately.
Then I'll just handle all the requests, forward them back to this domain, and instead of handling
all that, what we can do is basically serve both of them under the same domain.
And it is just going to be a lot easier for us to deploy, because we don't also need to handle the
course errors.
They are under the same domain.
And let's see how we can handle this.
So first we're going to go into the back end under the server.js file.
And we would like to import a package from node.
So this is the built in, uh, module let's say path from path.
And we'll click to get the let's say the dear name variable.
So this is going to be path dot resolve.
And we're going to see what this does.
Now since we'll be in the production we don't really need the course.
Uh like course.
Uh how do we say it.
The course configuration I will go ahead and wrap this with an if check.
I'll say if the process dot env not env if it is equal to development.
So here I'll just say if it is not equal to the production only then go ahead and configure this.
And this node env is something that we already have.
Now we'll be testing out in production.
Let's just say production.
Uh we will fix this.
Make it to be development just in a second.
But we would like to test this out in production.
So let's save.
And we're going to go ahead after all these routes we would like to make our react application to be
our static assets.
Now, what does that mean?
When you let me just actually delete these, like open up and just show you how how it's going to look
like in the production, you're going to go ahead and build your react application.
If you say under the front end npm run build, it's going to give you a dist folder, right.
So this will take a little bit of time, but we should be able to get a dist folder.
There we go.
This is the, uh, production grade optimized version of your react application.
And from here you have the index.html file, which is the entry point for your react application.
And we would like to make this to be our front end application basically.
Right.
And this is what we call the static assets.
So I'll say if the process dot env dot node env if it is equal to production, we would like to make
this static assets to work right.
So if we are in the production, we would like to use this middleware which is express dot static.
We say the Dirname from here you would like to.
Okay.
Sorry I think we should use Path.join.
We will say use the underscore dirname which is going to be in the root okay.
So we are here now and from there we would like to go under the front end folder.
So let's say slash front end slash the dist folder that we have right.
And we would like to now just handle our routes.
We'll say app dot get any routes other than these that we have above.
So these were our API endpoints.
Other than these we would like to hit this controller where we would like to send a file rez dot send
file.
Let's again get the path.
So we'll say path dot resolve.
And this is going to be first under the route.
So their name go under the front end under the test and serve the index.html file.
So with this now we are serving both the react application and our API under the same domain.
Right.
So these were our APIs.
And now in the production we will also get the react application.
Okay let's save and try to add our script.
So when we deploy our application initially we are not going to have the nodemodules.
Not from here and not in the front end.
So let me just show this.
I will delete this.
Just give the permission now and I will say delete it permanently.
Okay.
Let's do the same thing for this one and delete the dist folder as well.
So they would take a little bit time but hopefully they should be gone.
Okay so this is how we how we are going to have our code base when we try to deploy it.
And we would like to have this build command where we would like to first install dependencies for the
backend.
And we would like to install it for the front end.
So we can say prefix front end.
This basically says run this command under this folder.
And we would like to build our front end application as well.
So let's test this out.
I will shrink.
I mean kill my terminal and open up a new one.
I'll say npm run build.
So it would get the node modules for the back end first.
Then it's going to get it for the front end right.
Then it's going to get the dist folder because it is building it for the front end.
And once this is done, we should be able to actually, um, test our application in the production.
We have our uh environment variable to be equal to Vehicle to production.
We're going to hit this check and it should be working out.
Now let's wait for this to complete.
Once we get the dist folder, we should be able to run the.
NPM start to be able to visit our application.
Okay, so it has just been completed.
It took about.
17 seconds.
Now let's say npm start or npm run start.
It is the same thing.
We should be able to.
Visit our entire application under the localhost 5000.
So here let's just even test this out.
Now this is not going to work.
If you refresh you don't really have this port anymore because we.
Are in the production now I'll say localhost uh, 5000.
Now let's visit it here we can see.
Even though it is the server port that we had previously.
Right.
This is what we had.
But now we can visit our react application under the.
Same place and we can mark our notifications as read or delete.
It is working.
That means our API endpoints are also working.
So this is going to be it for the, uh, deployment setup.
We would like to now just push this code to the GitHub and deploy it on a platform.
So I'll go ahead and create a GitHub repo and push this into it.
So here I am in my GitHub dashboard where I said create a new repo.
And I almost forgot this.
We need to handle the git ignore.
So let's shrink everything.
Now we have two different git ignore files which we don't really need.
I will cut this entire content and delete this file.
I'll just paste it into here and I think I'll just delete everything from here.
Paste it and we'll take the add the dot env file.
Now into here because it doesn't have it by default but it has the node modules the dist.
They all would be ignored.
Okay now I will I think, also go into the front end.
There is one thing that we forgot.
So if we are in the production, we are not going to have the localhost, right?
This is going to be your domain.
Let's say my LinkedIn clone.
It's going to be maybe.com okay whatever that is.
So we don't we want to hit this instead of localhost 5000.
And this is how we can make this to be dynamic.
We will say import dot meta dot mode.
If it is equal to development then we would like to hit this localhost.
But else we will take the hit whatever the domain is right then slash api slash v1 okay I mean v1 okay.
Hopefully this should be working out in this case.
Um, this would be important in the production when we deploy our application.
Okay.
So now I'll just say git init under the current uh directory.
So under the root and we can add our first commit I'll say git add all.
And now just take a look at them.
They are been ignored.
And this and node modules are also being ignored.
And let's just check if we have any todos left.
So here are the things that we said.
Check if we need to invalidate, but we don't really need it.
So I'll just delete these.
And here we said also we handle this as well so we can delete that.
I will just say git add all over again.
Okay.
Now we can commit our changes.
Let's say git commit m project completed.
Okay.
So let's try to create our repo I will say LinkedIn clone.
I'll make this private.
When you're watching this video it's going to be public.
But for now I will go with the private until I publish this video.
Let's say create the repo.
And we would like to just push it to our account.
I'll just paste that.
Now if we refresh, it should be here.
Okay.
This is our code.
Let's go ahead into the render comm, which is going to be the platform that we'd like to deploy our
application to.
And it is free to get started with.
You don't need to put your credit card or anything like that.
So let's see.
I'll just say deploy a new web service.
From here we would like to select our LinkedIn clone let's say connect.
And we would like to add our environment variables basically.
Right.
So first I think we can handle the scripts.
The build command is going to be npm run On built and for the start we will say npm run start.
These are the scripts that we have in our package.json file.
And we would like to go with the free plan so that we don't really pay anything.
And let's say add environment variables.
We can add it one by one or just say add from a dot env file.
Let's go ahead and copy everything.
And just say add from dot env file.
Paste it.
So port is going to be this one.
Your mongo uri.
Um your secret note env is going to be production and your mail trap token as well as the like your
sending domain and your name Cloudinary secrets.
And for the client URL we don't have the localhost right.
We are going to set this up once render gives us a domain.
So for now just delete it and just say add variables.
Now we can go ahead and deploy this web service.
This is going to take a little bit of time.
And once this is ready we should be good to go.
So I'll just wait for this to complete and come back to the video.
Okay.
So in my case it has failed.
And the reason is we are setting the node env to be production.
And since this is production it cannot install the dev dependencies.
So let's go ahead and delete this.
Just say save and deploy.
Now it should be good to go and render will know the node env should be production by default.
So if you go here it is trying to deploy.
Let's click to this and just wait for this to complete successfully.
Once this is done I'll just be right back.
Okay so it looks like it is successfully completed.
We got a URL and here it says your service is live.
Server is running in MongoDB connected.
Now we can really click to this one and just see our application in production.
But now the only thing that we are missing is the client URL.
So I'll go ahead and copy my domain.
And under the environment I'll click to add that client URL.
So I'll just say add client underscore URL and paste it.
So once you add it you'll just say save and deploy.
This is going to deploy your application one more time.
And the reason that we have added that client URL is because we are using it in our emails.
So let's say client uh underscore URL I'll just close everything.
So here in the auth controller, when we send the welcome email we are using the domain slash profile.
And then the username.
So when they click to it they would take them to the actual application slash their profile.
So I'll just show you what that means just in a second.
Once this is completed successfully.
Okay, so it is live.
Let's just test this out.
I'll click to this.
This would take us to our application.
And now I'll go ahead.
Just open up a new tab.
Uh, let's just make it to be incognito tab.
And I'll just get the URL so that I can try to log in as Beth.
So this will take us to the login page let's say Beth Doe.
Let's put the wrong password.
Invalid credentials.
Let's put the correct one and we should be logged in.
Now I'll go ahead and uh, I mean send a connection request to this user.
Okay.
It says pending.
It is sent.
Now I'll just say connect this.
Right.
And we got the notification by the way.
So this is connected.
Now we should be able to get an email from our inbox.
So let's say uh go ahead and take a look at it.
It says Barstow accepted your connection request.
And now, if you just hover over this on the bottom, you can see we are getting the client URL slash
profile and then the username.
If we click to it it's going to take us to the profile page.
So this is why we have updated the client URL right.
This is our actual application's URL.
And now as you can see even though we are connected with this user here it says still connect button
which means we have a bug in our code.
So let's try to fix it in the profile header.
So we'll go here.
And what I have done is just updated this dot env to be development.
Okay.
So just keep it like this so that you can test this out in your uh, local development.
Basically here you are not in the production.
So just remember this.
You would like to go into the profile header.
And now we have this error is because this is not being run correctly.
Whenever the status changes, it should rerun this again.
So we can run this with a use memo.
So I will go ahead.
Maybe just cut this function say use memo import this hook and we're going to paste it into it.
Okay.
And as the dependency array we'll say if is connected changes or the connection status changes you should
uh recalculate this.
So that's going to be it for this component and for the notifications I think we don't really have any
spaces in between.
So let's try to fix that as well.
I will go ahead and maybe in the notifications page here after the padding two we can just say margin
y is going to be four.
So this is another fix that we have done in the very last fix is going to be under the Axios file.
So this is actually undefined.
I made a mistake here.
This should be meta dot env dot mode and all.
It should be in uppercase.
This is the actual value that Veit gives you.
So it's my bad.
Uh, this doesn't exist.
Just keep that in mind.
It should be looking like this.
So let's save.
We have just changed three different files and we would like to deploy this once again.
So let's kill everything basically and just say git add all.
Git commit dash m small fixes and we'll just push our changes.
Okay.
Let's just wait for this to complete.
And once this is done we can just test this out once again.
Okay.
So it has just been deployed.
Now let's click to it and let's visit our application to see if it is working as expected.
So let's take a look at the profile of Beth.
She was our connection.
Let's collect it and looks like we have another error.
Let's see.
In the terminal it says k is not a function.
So let's see I think we have some kind of typo here.
Okay.
Now this is not a function right.
This is a variable at this point.
So we can go ahead and delete this.
So these kind of things happen.
Sorry about this.
But this is real world programming right.
You got some errors in production all the time.
So this is not a function anymore because we wrapped it with Usememo.
So we need to save this and just deploy it.
Once again I'll say git add all.
Git commit.
Let's just say one more fix.
I'll just say okay let's just try to push this.
And again once this is done I think I'll just be right back.
This should be in the pending state.
Okay.
Deploying.
I'll just be back.
Okay.
So this is live.
We can test this out, but I just know there is one thing that we are missing.
Like, this shouldn't be underscore ID.
This connection is already a string.
So we're going to go ahead and delete this.
And I feel terrible right now.
We just encountered multiple issues in the production.
I didn't expect it to be like this.
But you know it just happens.
I'll go ahead.
Save this.
And we should push this as well.
That was just some kind of really bad and tiny fix, but we just have to do it.
Like this.
Just pushing multiple times.
But you just have to do it.
Let's say git add git commit.
And I'll just even feel bad to say one more fix, but I'll just say last fix.
Hopefully, and we'll just push this.
So once this is published, we should be able to test this out.
And let's see how it's going to look like.
Okay.
So it has just been deployed.
And let's go ahead and test this out for the last time.
Hopefully it should be working out.
I'll go ahead and visit the profile of path which is our connection.
And here we go.
Now we can see that we are already connected with this user and we can remove it from our connection
list.
Let's just say connect with this user.
Send the request.
Now we should be able to go ahead and see it, accept it and just have this state again here it says
you are connected.
Now let's try to update our profile.
And by the way we can also read them as like mark them as read all of our notifications and we can delete
them.
You can also show some kind of loading state while it tries to read or delete, and we can just say
edit profile.
Here I'll just say choose Software Engineer two.
In this case it is being updated.
We can add a new profile image.
Let's just try to do it actually.
Here I'll select this user and just say save profile.
And it has been updated in the database.
That means even if you refresh you'll be able to see the latest info that you put.
You can add an experience, you can add education, or you can even add skills and even delete them
if you really wanted to.
Okay, so that's going to be it for this entire tutorial.
I hope you liked it, even though we had some issues at the end where we need to just fix a couple of
things in the profile header, but other than this, I hope you like the tutorial in general.
Thanks for watching and I'll see you in the next one.