In previous video we rendered our production server.
In this video we need to configure it properly so we can deploy our React application.
And the first question is of course what we want to deploy with React application.
It will be really easy because when we build an application we are getting just an index.html file with
JavaScript and CSS, which actually means this is a static files and we just need to serve the static
files inside our production server.
And the most correct way to do it is by using Nginx.
If you don't know what is in Jinx, as you can see in the official website, it is free open source
Http server and reverse proxy.
And actually we will use it exactly like our web server where we will serve our static files.
So for this we need to install it on our server.
So first of all, we need to log in inside our server.
This is why we are writing again.
Ssh root at and your IP address after this we must provide our new password that we changed previously.
As you can see, I am inside our server and now we can make some commands in order to install a nginx
package.
We first of all need to update our local index so we know from where to download it.
And for this we can write sudo apt update and wait to check all mirrors.
After this we can install engines package.
This is why I will write here sudo apt get install and here in jinx.
This is the package that we want to install.
I'm hitting enter and as you can see we are getting such output with all dependencies that we will install
and at the end we see the line.
Do you really want to continue?
We just need to hit yes and enter and it will install for us in Jinx inside our server.
Now, in order to check that Nginx was successfully installed, we can write here which nginx and if
you are getting such output it means that everything is working fine.
The next step will be to create a configuration for our website.
This is why we want to write CD, which actually means change directory.
And here we need such path slash etsy slash nginx slash conf.
And actually, as you can see, we jumped inside the folder of Nginx itself where we can create configuration
for our website.
So to create here a new file we need to write, touch and then its name and let's name it in the same
way how we would name our URL.
So it will be react slash quiz.com dot conf.
And actually this conf shows that this is a config file for nginx.
Now we can type here which is actually list and see what files we have inside this directory.
And as you can see here we have a single file react quiz.com conf.
Actually it means that we successfully created our config file and now we can change it.
And to change it we need to open it with editor.
This is why I will type here nano, which is the editor and now the name of the file react quiz comm
conf I'm hitting enter and we are inside nano editor.
Now we need to provide the configuration for our project.
And actually as you can see, I already prepared the configuration for our website.
So this is the idea.
We have here a section server and inside we have lesson 80, which means that it is listening on 80
part.
Now here is the important part for us.
This is the folder where all our files of React will be located.
As you can see, the path is inside var we have w-w-w then react quiz.com/html, which means we must
applaud our build react project inside this path.
Now here we are saying what file is main for our static?
And this is of course index.html, but here we provide a bunch of them and here is the server name.
Actually, this is important.
This is the name of our host that we will use.
As you can see, I wrote here react slash quiz dot com and w-w-w react quiz.com.
And here we have location slash and this is important.
This actually means that all routing of our application will directly go inside our index.html page.
And as you can see, our config is created.
Now we just need to save it.
For this we must click Ctrl O and as you can see I am getting such output file name to write react quiz.
Com conf.
And this is completely fine.
This is our file.
This is why I'm hitting enter.
And now we just need to go outside of this file.
So here I am clicking control x.
Now let's check that we really changed this file and the configuration is correct.
So we can write here.
Cut and then our file react quiz.com dot conf.
I'm hitting enter and as you can see this is the output, the content of the file.
And it is exactly correct.
Which means we successfully created our config for our project.
The next step.
Here will be to check that engines really can work without configuration.
And for this we can write sudo and jinx minus T, and this minus T is checking configuration.
As you can see, we are getting two messages.
The configuration file is okay and configuration file test is successful, which actually means that
this is the main engines conf file and inside it will include all files inside conf directory and our
file also.
And it means that it successfully includes our file and everything must work.
The next step will be to create a path where our static will be located.
This is why I want to run CD and here var w w w.
As you can see, we have such folder I'm hitting here.
Enter.
And now I'm writing a list to see what files we have inside.
As you can see, we have here only a folder HTML and we must create a new folder here where our static
will be line.
This is why here I will write make directory.
It means creating directory and here the name will be react quiz.com.
And I'm hitting enter now when I'm hitting ls again.
As you can see here is react quiz.com which is folder because it is blue as you can see.
Now we can jump inside this folder with CD react quiz.com.
And here inside we must create one more folder and it will be our HTML folder.
This is why here make directory HTML and we are good to go.
We created location where we will upload our static files.
The last thing that we need to do we must reload in jinx because actually we didn't reload it and didn't
jinx doesn't know our new configuration.
And for this we must write sudo systemctl restart and here isn't jinx.
So actually this command will restart a service of jinx I'm hitting here enter and as you can see there
is no output.
So it was successfully restarted.
Now let's check that our nginx is working and we configured everything correctly.
This is why I will jump inside browser and as you can see I wrote here the URL.
This is just a port of my server.
So actually this is exactly the same port that we used to login through SSH inside server.
And actually you can write here 80 because this is a default port.
It will be exactly the same.
As you can see here we are getting a message.
Welcome to Nginx.
And this means that Nginx is serving now as our server.