Okay, so welcome back to the very last section of this tutorial where we are going to deploy this entire
application that we have built.
Before we do any configuration, I just want to explain this concept where we currently run our server
and client on different places.
Right.
What we'd like to do is just take them maybe under the same domain, because if we now deploy this on
a different place and deploy this on a different place, then we need to send a request from client
to the backend.
And like this is fine, we could do so, but it would be a bit more convenient for us if we just take
them and just have them one place, right?
So let's say this is going to be our server, let's say server.
Let's say uh, the URL for this could be something like Netflix dot, let's say dash simple or let's
say clone.com.
We're going to deploy this in a In a place like this.
And this will be both our server and client.
And this is the concept that I just wanted to mention.
So we are not going to deploy both of them separately, but instead just have them under the same domain.
And here in this case our hero is going to be our server code.
Right.
This is going to be our backend code.
This is going to both serve our API endpoints as well as our react application.
So I know this might sound a bit complicated if you have never used it, but this is just going to make
sense in a second.
So let's go ahead and try to configure this.
I will go under the back end under the Server.js.
And here in this file we will just do a little bit of configuration.
Let's first say import the path package coming from node okay.
This is a built in module.
And we'll click to create a variable called Underscore underscore directory name.
And we'll say it's going to be equal to path dot resolve.
And after all these routes we would like to create let's say an if check we will say if process dot
v dot note underscore env.
And I just remember that we are not using environment variables like this.
But instead we have created this configuration called env vars.
And you can get the node env from here right.
If this is equal to the production then we would like to do this uh code block.
Right.
So what we'd like to do is just convert this front end folder to be static assets.
And in the production we will run this script under the package.json.
Under the front end.
It is called build.
Let's try to do so and just see what is going to happen.
I'll just kill this terminal and kill this one.
Just to make things a bit easier for us, let's say clean the console and just say npm run build.
So this is going to build the production version of this frontend folder.
It is going to put everything under a dist folder.
So let's wait for this.
Once this is completed there we go.
We just got the dist folder.
And this is what we're going to have in the production.
So we will say let's say app dot use.
And we can call this express dot static function where we would like to convert this path to be a static
path.
Basically let's say path dot join underscore underscore their name.
And I'll explain what that means.
We will go under the front end and we have the dist folder.
This is going to be the static assets that we will have.
Which means this would be our client application right.
This is our react application.
And this underscore their name is is means I mean it means that we are under the root, because this
would be the place that we are, that we're going to be running this file.
So from the root, go under the front end and from there go under the dist and make this to be our static
assets.
So if you go here you can see we have index.html all of our image images right.
All of our assets.
And we have the JavaScript code that is being optimized and converted.
Okay.
So this is the first thing that we have done.
And we will say app dot get any other routes in these API routes.
We would like to run this controller request and response.
Let's get this one and we'll just call it like this.
We'll go here.
In this case we would like to just res dot send file let's say path dot resolve their name.
Go under the front end, go under the dist and return the index dot HTML file.
This is something that we have as well under the dist assets.
Um, no, not under the assets.
So under the dist we have index dot HTML.
This is the path.
This is the file that we're going to be returning.
I hope this makes sense.
At this point we just say if we hit API routes then handle it.
But any other routes then these you should show the react application.
And we're going to see this in action.
So this is the entire configuration that we need for the Server.js.
Just a simple if check, we convert our front end folder to be our static assets.
And we're using this folder which is our production ready code.
And we'll go into the package.json.
We have not this one.
We have this under the back end.
Right.
So this is the development server that we just use when we build our application.
But once we deploy our application we would like to have one more.
Just like in the front end this is going to be building our code, right?
Our code base.
So in production, what do we want to do first?
Well, when we deploy this application we are not going to have the node modules because we don't really
push them to the GitHub as you can imagine.
So what we'll be doing is just first say npm install.
This is going to install all the dependencies for the backend.
Okay.
It is going to install this package or this folder.
Then we could say you should install the dependencies but this time for front end.
So we'll just say prefix front end.
And this basically means run this command under the front end folder so that we can get the node modules
for our react application as well.
And once you completed this then you should build the front end application.
We will say npm run build and again prefix front end so that it is going to create this dist folder.
So this is going to be it for the build command.
And finally we will have the start command.
Now that we have built our application, it is time to start it in the development server.
We'll say start.
We will just say um let's say node back end server dot js.
In the development we run with node man.
But here we just run it with node.
So it is going to start it only once.
And let me just take this above.
Put a comma so that I just have the dev start and build in this exact same order.
And when we run the dev, what we can do is just set the node env to be development and copy this.
When we start the application it is going to be the production environment.
So production just like this.
Now let's try to actually build this application and start, uh, start this out in our uh machine.
And then we'll try to deploy.
What I'll be doing is just first delete the node modules for the back end.
Let's say yes, delete this and it is asking for the permission.
Okay.
Delete permanently.
It is gone.
Let's delete this one as well in the front end.
Because when we deploy our code to GitHub this is going to be the exact same thing.
We are not going to have them in the GitHub repo.
And let's delete this as well.
We're not going to have it as well.
Okay.
So when we deploy our code to GitHub this is the code base that we will have.
Maybe here we could add a git ignore.
I am going to take this and put it to the root.
Let's just see we have these folders being ignored.
Let's just add the dot env at the end so that we don't really leak our environment variables to our
GitHub account.
Okay.
So we'll just go ahead and run this npm run build command.
Let's see what's going to happen.
Let's open up a new terminal.
Kill the front end.
We should be running this on the root.
I'll say npm run build and it is going to first install the dependencies for the back end.
We should get node modules folder.
There we go.
Then we will install the packages for the front end.
We should be able to have that one as well.
And it's going to now build it.
So we'll get the dist folder under the front end.
So this is what it is trying to do.
Let's just wait.
So it just install the packages for the front end.
And now it is trying to build it right.
We just run all of them.
NPM install for the back end.
For the front end.
And now it is building it.
Let's see if we are going to get the dist folder or not.
Probably we're going to get.
Okay, so everything is being compiled.
We got the dist folder.
Now we could just say npm run start which is going to start it as the production environment.
I'll say npm run start.
And if we cannot see it I could maybe bring this up here.
So let's see.
Now it is being set to production.
And our server started and MongoDB connected.
Let's visit localhost 5000 I'll go here 5000.
Now if we visit this this is going to be the homepage.
As you can see we are visiting our backend port but we can still get the react application.
It is because we are hitting this.
If check where we say if we are hitting any endpoint other than these, show them the react application.
But if we try to log out then we will send a request to this end point under the oath.
So it just works as expected.
It just runs the controller and log us out.
And now I hope this makes sense.
You can use this logic in all of your incoming projects, where you build and deploy your application
under the server, right under the server.
Basically, you build and install the dependencies for your server, for your client, build your react
application and serve them under the server.js file.
With that in mind, we can initialize a git repo.
I will open up my terminal, kill this and we have some, I think, console logs under the back end.
Let's just see for the auth controllers.
Let's just say console dot log.
If you really want to you could delete them.
Some of them are not really needed.
So let's delete this one.
First we could delete.
This is an error handling.
Maybe we could leave it.
Or maybe we could delete it.
I'll be deleting this.
Deleting this one.
For the search controller we just have the debugging.
I mean like logging for the server.
We could leave them as it is.
Okay, I'll just leave it like this.
Let's try to initialize this as a git repo.
I'll say git init and let's add all of our changes.
Maybe I'll say close all and just make sure that your dot env and node modules are being ignored.
So it is being grayed out.
I can understand they are being ignored and you should make sure that you added this dot env into the
git ignore.
Okay.
So we'll go ahead and maybe say uh git add all and then we'll just say git commit dash m.
I'll just say initial commit.
Okay, so I just committed my changes.
Now what I want to do is just visit the GitHub and push this code.
So now I just want to create a new repo by clicking to this.
Then here let's give it a name I'll say Mern Netflix clone.
And for the description you could leave it empty.
This is optional.
I'll just make it private if you want to.
You could leave it as public.
Right?
I'll go with this one.
And let's say create the repo.
And what I'll be doing is just copy this.
Okay?
Just make sure you copy it.
And we're going to push this.
I'll push an existing code, uh, to this repo that we have.
Right.
I'll open up my terminal and just paste it.
Okay.
I'll just say push.
It should take this code, push it up into our git repo.
Let's refresh.
There we go.
The initial commit has just been done one minute ago.
Now we'll be using render.com to be able to deploy this application.
So let's go ahead and visit it.
If you don't have an account go ahead and create one I already have.
So I'll just log in and go to my dashboard.
I'll say log in with the GitHub account.
Okay.
Now I am logged in.
I'll just say create a new web service.
Let's click it.
Okay.
We would like to deploy this one.
I'm going to be clicking to it let's say connect.
And from here on out let's see it says loading.
We could leave everything as it is for the build command.
It is going to be npm run build and start command is going to be npm run start right?
These are the uh commands that we have added into the package dot JSON file.
So we have Built.
This is going to be installing all the packages and build the front end.
Then uh start is going to start it.
Okay.
This is the things that we just put.
I'd like to go with the free plan.
And the only downside for this is that it just get it just gets um, like inactive.
If you don't visit your website for 15 minutes and once you visit it after 15 minutes, it's going to
take about one minute to load.
Um, I think like it is bad, but for a side project it is not really that much of a problem.
And if you want to get rid of that, you know, uh, inactive state, you could add some kind of cron
jobs.
This is how we type it.
So cron jobs and I have explained these in my previous videos.
You can take a look at the deployment part in the previous Mern stack applications.
So it should take about at most like ten minutes.
I will need to add my environment variables as well.
So I will go ahead and copy this file.
Let's close these or delete these empty places.
Copy it and paste it.
Okay I thought it's going to paste all of them.
But let's just do it manually.
I'll just add one by one.
Mongo Uri.
And then the value for it.
And I'll say add new environment variable.
So I'll be doing this.
Um just pretty quickly let's say port is going to be 5000.
And maybe I could speed up this process now.
Okay.
So these are the environment variables that I have added.
I didn't add the node env because when we run the build command it is already I mean when we run the
start command it is already going to be production.
So I'll just say deploy this web service.
This is going to be taking a bit time, but let's wait for this to complete.
Once this is done, I'll just be right back.
Okay, so there we go.
Without any issues, the build was successful.
It tried to deploy that and here we go.
It just says your service is live and we can see MongoDB connected and server started.
Even though it says localhost but we just got an actual endpoint or a URL.
Let's click to it.
It should take us to this page.
And here we go.
We are here.
Um, for some reason it didn't get the background image.
So maybe we could fix this just in a second.
Let's try to go to the sign in page so we can we cannot still get this.
Um, there might be a issue.
We're going to fix it.
Let's try to sign up here.
I'll just say, um, let's just say I don't know.
For the name.
We could say chris@email.com.
Let's say Chris.
And if we put one, two, three, it should say password must be at least six characters.
Let's put four, five, six and make this to be an email that is already existed.
It should say email exists.
Okay, I think we don't really have that email in the database.
That's why it just logged us in.
Uh, we can test this out again, but there we go.
Now we are in the home page.
We can see the movies, let's say TV shows.
There we go.
It is just being updated.
We can see the TV shows with the categories.
We can scroll to this list.
Let's select any of these TV shows.
It takes us to the watch page where we can see the trailers.
We can navigate them, go forward, go backward and if we are in the first one we cannot go back, right?
We got the detail with the poster path, similar movies or TV shows.
It just works as expected.
Let's try to search for a user.
I'll just say maybe Aaron Paul okay, there we go.
We got this user.
Let's try to search for a TV show.
Let's say how I met.
And it should fetch all the related TV shows, let's say movies extraction and search for it.
Okay, from here we can navigate it, see the watch page trailers.
We can go to the search history.
There we go.
We just got all of our search.
We can delete them.
And it's going to say no.
Search history found.
If we try to go to a page that doesn't exist, it should give us 404 with the image.
And we have the footer as well.
So we have a tiny bit, uh, styling issue.
Maybe you could remove this padding or is it margin bottom?
I don't know, it is pretty basic.
You could remove it.
Um, we can go back to the home page and we can also visit from here.
Right.
So all I, all I am trying to say, it just works as expected.
Let's try to log out.
And for some reason we cannot see this background image.
I think it's because in the front end, um, in the index dot CSS we just say hero dot png.
Maybe this should be slash hero dot png.
What I'll be doing is just open up my terminal and just say npm run build and test this out once again
in my in my local machine.
And if it is working then I'll be deploying this, uh, into the production.
Right?
I'd like to save this file as well.
Let's close this and let's wait for this to complete.
Okay.
So it says it is completed.
Let's just say npm run dev or not dev, but start because now we are in the production.
We would like to see the production build.
Let's visit localhost 5000.
It looks like background image is working.
Now let's try to deploy this.
Once again I will say git add all.
And maybe we could remove this 404 page style.
Let me just fix it.
Um okay.
So we cannot get it because we killed the server.
Let's just start this again and I will refresh this page.
Okay.
Why do we have this styling issue?
Let's go into the not found page.
Did we call it as 404?
Yep.
This is what we have.
Let me just zoom out a little bit.
Shrink this left hand side.
So we say minimum height screen.
Let's delete this.
Um.
So okay um maybe it's because this is positioned.
Absolutely.
Let's delete this for now.
Oh, okay.
So it cannot update even if you refresh this because we are running in the production.
Every time you do a change it is not going to restart this right here.
Just watch me I'll just bring this back.
Bring this back.
Save this.
And it doesn't restart it.
It is because we are in the production environment.
We don't run it with Nodemon, but we run it with node where that is.
Let me just show it.
So since we are running this we call the node.
And this is not going to restart it every time you do a change.
So I think I'll just leave this to you to just, uh, remove this space.
At this point, you should be able to do so.
Right?
I'll say git add all.
Git commit dash m and I'll say index dot css hero bg Fixed and just get push this.
Okay.
So this is going to push this code to the GitHub.
And let's just see the latest commit was just now.
And render is going to see that change.
And it will try to redeploy your application.
So you don't really need to do anything.
It'll take this and try to deploy it.
And you can check your logs and just see if it is going to fail or not.
And once this is done, I'll just be right back to the video.
Okay.
So it just says your service is live.
Server started MongoDB connected.
Let's visit once again and we should be able to get the background both in this page, in the login,
in the sign up.
And we can really try to sign up once again.
Let me just try to sign up with the John email.
I'll just put any name.
If we put this password from 1 to 6 it should say email already exists, right?
But now I can put something like Chris and just say Chris Hemsworth birth.
I think this is the correct name.
Let's just say one, two, three.
Password must be at least six characters.
Let's go from 1 to 6.
Sign up.
We should be able to sign up and it's going to create our account.
Right now we can really navigate everything.
And as I shown you, it just works as expected.
So with this I think this is going to be it for this tutorial.
I think it was helpful where you just learned the fundamentals of Fullstack, where you have your database,
your API, your authentication system, and on the client we had a react application.
Uh, so, you know, like everything that we have built, I hope it was helpful.
Thanks for watching and hopefully I'll see you in the next video.
Okay, so just a quick pause here.
I already said I'll see you in the next one, but there is just one tiny fix that we that we could add
it is that we don't have a loading state when we sign up or when we log in, right?
Let's try to add them.
Even though we created those states, such as in the auth user dot js file we have is signing up, is
logging in, and is logging out.
Let's try to use these states.
If we go into the sign up page well basically we can just grab this state and destructure this and we
can use it in this button.
So instead of just saying sign up let's delete this.
We will say if is signing up then we will just say signing up.
Or let's just say loading.
And we could put three dots and otherwise we will just say sign up.
Let's do the exact same thing in the login page.
I'll go ahead copy this.
And here I'll just say I mean not copy, but we'll go here and copy.
This one is logging in.
Let's paste it.
We could go here and just say loading or.
let's say loading.
Otherwise we'll just say login.
And we could make this button to be disabled if we are logging in.
And let's do the same thing for the sign up page.
This button is going to be disabled if we are signing up.
Okay.
These are the things that I just wanted to add.
And if you want to use this logging out state you could also use it.
But logging out is going to be super fast, so I just don't even want to use it.
I'll just leave it here in case you want to use it.
But as I said, I'm not going to be using it.
And the very last thing I just want to update is going to be the scroll bar that we have in this application.
So let's go into the homepage.
We see this scroll bar is fine but we could really make it a little bit better.
So I'll go into the index dot CSS and I'll provide you a couple of lines of code.
So basically we will have a dark mode rounded scroll bar.
So just like this, this is what we have.
We change the width scroll bar, thumb background color and border radius as well as the scroll bar
track.
Let's save and just test this out.
There we go.
Now we have this scroll bar, um, on the right hand side.
And it is a little bit more elegant.
And let's try to just log in or sign up.
I'll say, I don't know, just put something random.
I'll say Jesse 123 at gmail.com.
And for the username let's say Jesse 123.
123456.
If I click this, I should have a loading state.
Okay, there we go.
Now we are logged in account created successfully and it should have the exact same state in the login.
Let's just try to do so 123456.
There we go.
It just works as expected.
Okay.
So these are going to be the be the changes that we have.
Now, I'll just go ahead and kill the terminal and push this to the repo.
I'll just say CD up and git add all, which we have three different changes.
One of them is under the index dot CSS.
We added the web kit for the web.
I mean for the scroll bar styles.
We added the logging in state as well as the signing up state.
So these are the changes.
Let's say git commit dash m which stands for message.
And let's say loading states added and just commit.
This changes.
And finally I'll just say git push so that it could deploy the latest change that we have.
So this is going to do the magic.
Let's take a look at the render.
If we go into the dashboard it should be able to deploy this from scratch.
So it is going to be working the exact same way in the production.
And with this I think this is going to be the actual time.
I will see you in the next one.