In previous video we successfully configured nginx.
Now we just need to upload our project inside our server and the first step that we need to do is to
build our React application.
This is why here inside our folder of React quiz, I will just write Yarn build or if you are using
NPM, you can write NPM run build.
It will be exactly the same as you can see it calls react script build which will generate for us our
build.
So actually here we get a message compiled successfully and here are all our files in build folder.
So let's check this out.
I will open our editor and here inside our folder we have now a build folder.
And here we have static files.
As you can see here we have CSS and JavaScript.
And here the most important for us is index.html.
As you can see, it is all minified, but actually this is our project.
So what is interesting for us is index.html and inside static.
In JavaScript we have main runtime and so on, which actually means we must upload the whole build folder
and it will work out of the box.
The next step that we must do is attach a domain to our server.
So actually when we are talking about real project in production, normally you will buy a domain and
then inside your registrato configuration you will provide the IP address, which actually means all
people can just write here, React, Dash Quiz and here.com and they will jump inside our project.
The main point is that it doesn't make sense to buy a domain just to finish our course.
This is why we actually can hack it a little bit.
The idea is that you can change the configuration on your machine, so just your machine will jump inside
your server when you will type react quiz.com.
And in order to do this you need to modify your hosts file.
And just to remind you, this is exactly the host that we wrote inside our engines configuration.
This is why nginx waits that we will request exactly this host So in order to modify our hosts file
inside Linux or Mac OS, you can simply open Etsy slash host file.
But if you are on Windows you can just Google it or here is the example, you can open your disk windows
system32 drivers and here is host file.
So here I opened my host file and now at the bottom we can provide a new line.
So the idea is that on the left we provide our IP address just like we used for SSH or inside our browser.
And then we put space here and provide a host that we want to use.
In our case it was react-quiz.com.
And when you save this file on your machine, when you are jumping inside this host, it won't just
try to find it in some registration.
It will jump in this IP address and this is our server.
But it is important to remember that it will work like this only on your machine.
Let's try this out.
I am just writing react quiz.com now inside browser and we are getting 403 forbidden and actually this
is completely fine because we don't have the index.html file and as you can see this is a nginx error
which means this is already our server.
So the last thing that we want to do is copy the whole folder inside our server.
So as you can see here inside terminal, I am inside the root directory.
So here I can see my build folder that I want to applaud.
Now in order to upload all our files to remote server, we must use a command.
So here I'm writing minus R now the name of our folder and it will be built, but we don't want to copy
the folder.
We want to copy all files inside.
This is why here will be slash and then star symbol, then space and here goes our remote server.
So it will be root ad and here will be IP address of our remote server after this colon.
And here will be the path and full path will be slash var slash w-w-w slash react quiz.com/html where
hit and enter and we are getting the prompt for password of our server.
Now, as you can see when I'm hitting enter, I am getting such logs which actually means that everything
was uploaded fine and we can check that it is working.
So let's jump in browser and reload the page and bam.
As you can see, everything is working.
So we are on react quiz.com and it goes to our own server and we can see that our quiz is working correctly.
Also, the interesting part is the source code of the page.
As you can see, it is completely minified and here we have our minified CSS logo and all the stuff
that was generated from Create React app.
And as you can see, our quiz is working exactly like on local machine because as you can see, this
data were fetched from our trivia API.
So here I can select.
Something hit next.
Now, again and again.
And here we can come to our end page.
And now, after finishing the quiz, we can see congratulations, you finished our quiz and you've got
five of ten answers correctly.
Now we're hitting restart and we're fetching data again.
And after this we see new questions, which means we successfully uploaded our React project to production
and it is working fine.