Learn How To Deploy a React App To a VPS | Ubuntu 20.04 Server With NGINX

foreign stays high today we're going to learn how to deploy a react app to a GPS so on Ubuntu server within Jinx web server and this is going to be a step-by-step guide and the first step is going to be creating a react.js app well if you already have a react app that's ready for deployment you can just skip this step if you don't let's go and create a new react app so I'm going to go and open a terminal I'm a Windows 10 by the way so I'm going to go and see the end to my desktop and then I'm going to run npx create react app I'm gonna call my app my app I'm gonna hit enter this will take a while so I'm just gonna go and speed up this all right now I'm gonna go and clear this and then CD into my new created project and now I'm gonna go and open this project in my vs code so I'm gonna type in code dog and then hit enter foreign npm start so here is my app now I'm just gonna go and do some like changes to this app so like I'm just gonna go and change the logo here so I'm gonna replace it let's take a look and there it is I'm just gonna go and change this text all right let's say strong so code explained how this says hi I'm also going to change this link so let's say youtube.com and then code explained now after I have done all the changes I want it's time to deploy our app so let's go and move to the next step and now it's time dry push my new react app to a GitHub repository so I'm gonna go to my GitHub account and create a new repository I'm going to call this my react app I'm gonna click on create repo and now I'm gonna go back to my terminal and Sega add all and then get commit I'm gonna add a message that says first commit and then I'm gonna go back to my uh to here and I'm just gonna go and copy this lines of code so I'm gonna go here and then paste demand hit enter and wait so I'm gonna go back now to my repo and then refresh and now my react app has been successfully pushed to my GitHub repo and now let's go and move to the next step and now it's time to go and create a VPS but if you already have one you can skip this step so I'm gonna go and choose hostinger as my VPS provider you can go and choose any provider out there you're free if you're using hostinger you go to hosting and then click on VPS hosting now you're gonna click on start now choose a plan and then choose a period and then create your account you can either do that by using your email or one of your accounts here then select a payment method and then here click on have a coupon code and type in this coupon codes explained then click on this button and the coupon code will be applied and you're gonna get a discount now fill in your credentials and click on submit secure payment and your VPS will be created as soon as you do that we'll be ready to go to the next step and now it's time to log into our VPS so I'm gonna go here and login into my hostinger account and then on the VPS I'm gonna go and click on manage to manage my VPS so here this is my server status and some other settings so here the operating system I'm going to be using is Ubuntu so you can go and choose Ubuntu from this list and click on Save changes but be careful because if you change the operating system you're gonna destroy all your current data so now to actually connect to our server we're going to use SSH and for that we're going to use an SSH client for Windows which is body so you can go and download it from this link for me I'm just gonna go and open it and here it says the IP address of our server so I'm just going to go and copy that and then paste it in and click on open now it says login as so we're going to go and log in as root so I'm gonna say here root and I'm just gonna go and make the font a little bit bigger so appearance then change then 16 pixels okay and apply and we're good now for the password here I'm gonna go and like generate a new password so suggest a strong password and I'm gonna go and copy this group so here I'm basically changing the root password so I'm going to click on Save changes and wait now the root password was changed I'm gonna go back to buddy so here the password to like paste in the password we copied you can either do that by right click with your mouse or you can press shift and insert at the same time on your keyboard and then hit enter and now we've successfully logged into our server now let's move on to the next step and now in this step I'm gonna go and install engine sweep server so by default the web server installed here is Apache so if I go and say system control and then status adding Apache you can see that Apache survives is running so what we need to do before installing njinx web server is removing Apache 2 so we don't get any conflict between the two so I'm gonna go and clear this and then I'm gonna first go and say system control and then stop Apache too and now after stopping Apache 2 I also need to like disable Apache to survives so the next time Apache survives won't be automatically run on boot time so I'm gonna disable Apache service and now I can go and say ap2 remove Apache too and say yes and then I'm gonna clear this now we have removed Apache from our server and now we need to install engines but first we need to like say apt clean all to clean the old repository and the second thing is update our repository to load latest packages information so I'm gonna say apt update and the third thing is apt test upgrade and this will perform a full upgrade to upgrade all the installed packages now I'm gonna go and clear this out and now it's actually the time to install engine server so I'm going to run apt install engines and hit enter I'm going to say yes now our web server engines has been successfully installed and now what I'm going to do is I'm going to go and go to this IP address using my web browser so I'm gonna hit enter and now you can see this page here which is the Apache 2 default page which is the server or the web server we've been using and we removed it and now we're running engines so why this happening so if I go and City into VAR then www then HTML which is the default public folder for both Apache 2 and engine so if I hit enter and then list the files inside we find two HTML files the index.h demo which is this page here and there is this index.ngstibian.html file which is the default page for engine sweep server so if I go here and go to that file you can see here welcome to engines so we are running in Jinx web server here not Apache so Apache has been removed and now I'm gonna go and install node.js so I'm going to run apt install node.js I'm gonna say yes and now I'm gonna go and install a so install npm node package manager I'm gonna say yes and now I'm gonna go and install get yes all right now let's clear this out I'm gonna go and CD into home and I'm gonna create a folder called react projects so I'm gonna CD into my react projects folder and here I'm gonna use git to clone the repo our repo so I'm gonna go to GitHub and then code and then copy this link here so I'm gonna go back to body and then shift insert and then enter now I'm gonna go and CD into my projects so which is called my react app and then I'm gonna run npm install so this will take some time so we need to sit back and wait for it to complete now I'm gonna go and clear this out and I'm gonna run npm run build so I'm going to hit enter and now what I'm going to do is list the files inside my folder and now we have with this spelled folder so what I'm going to do is I'm gonna go and copy all the files inside the build folder to our public folder which is VAR w w HTML and I'm going to hit enter now if I go and CD into VAR then ww then HTML I'm gonna list the files and you can see that our files are all there so now if I go to my web browser and then open again our IP address and I'm gonna refresh and now you can see that our react app is live so now anyone can access our app by using the IP address so in the next step we're going to learn how to link a domain name to a VPS so now what I'm going to do is I'm going to go and Link this domain name to my VPS so I'm gonna make this domain name bound to my VPS so I'm gonna go into my DNS settings for this domain name first and then I'm gonna add an a record so the host is going to be at which is this domain name here I'm just going to be pounding to our server IP address so I'm going to copy this and then paste it in here so I'm gonna hit save and this may take up to 48 hours but after two hours it's gonna be working or less than that so I'm gonna go and copy this and then paste it in here so I'm gonna use http and then hit enter and now you can see that we can access our react app using this domain name now we also need our subdomain www.codexplain.org to be parenting to our VPS so I'm gonna go to my DNS management and I'm gonna add an a record so the host is www and this also will be powered to our VPS IP address so I'm gonna hit save and this will work but we can simply doing the same thing using a c name which is I prefer so the host is going to be ww and then it's going to be pound to ads and I'm gonna hit save now if anyone uses our www.codexplain.org subdomain you can find our app right and now let's move on to the next step where we add an SSL certificate to use https protocol so as you can see it says not secure so the connection to our website is not secured so if I try to go to https and hit enter this will come with an error so because we don't have an SSL certificate installed so we need to install that and we're going to use let's encrypt which is free so the first thing we're going to do is like install insert third part and also we need to install a module which is the engines manageable for search pod so it's gonna be python 3 then third part then and Janks so I'm gonna hit enter now after the installation has completed I'm gonna go and add an SSL certificate to these domains so I'm gonna use third bot and then engines our web server and then the domain name is code explained that .org and the other domain name which is actually a subdomain name WWE dot code explained dot org so and I'm gonna hit enter and I need to ask some questions here so it's like a configuration for the email address I'm going to say code explained or at gmail gmail.com so please read the terms Etc so I'm gonna say angry and would you be willing to share your email so no uh now it's obtaining a new certificate waiting for a verification now it says to choose whether a redirect HTTP traffic to https or not so we need to redirect HTTP traffic to htps so I'm going to go for two and hit enter and congratulations so your certificate and chain have been saved Etc so now if I go back here and refresh you can see now the icon here and it's a connection is secure so we're done here so if I actually go to here it's also going to be secured if I try to remove https and it's going to be secured it's going to be redirected to https all right guys now we have reached the end of our tutorial your app now is going to be live and secure so take care don't forget to like the video and subscribe and see you in the next tutorial

Channel: Code Explained

Views: 30,831

Keywords:

Id: w3RFk35synM

Length: 18min 42sec (1122 seconds)

Published: Wed Jun 16 2021