Deploy Node.js and React Apps | Full Deployment /w Nginx VPS, SSL

hello friends today we are gonna deploy our node.js and react applications on a server and connect them to each other and also we are gonna use a domain so you will be able to display your applications in different domains or sub domains with https certification in this project we are gonna use three different applications this is my netflix app if i go to the admin sub domain the admin app is gonna show up and we are gonna deploy our node.js application to do api domain and fetch data from here for this project we are going to be using hostinger it's one of the most popular hosting providers and the sponsor of this video of course you can choose any other provider the tutorial will be exactly the same and independent from any brand but when it comes to price and performance i highly recommend you to use hostinger let's check out the vps servers i've been testing these servers around one month and i could say servers are really strong and connection is super fast and the price is really really affordable you can deploy here tons of apps let's check one of them as you can see it starts at really cheap price if you don't want to that long term you can choose just one year or something and if you click the link in the description below or click here and use la model code you are gonna have an extra discount after choosing the payment method and the information your server will be ready to deploy our apps and by the way if you are creating relatively small applications your designs or less complex applications you can also check the shared web hosting option you can deploy 100 projects and you are going to get a free domain and free ssl is such a good deal after this video i'm gonna create also another deployment tutorial on free services if you are a beginner still trying to learn the basics and just want to see your apps on any browser and share them with your friends you can choose free services but if your goal is landing any job i highly recommend you to prepare a decent portfolio page and use a real server so it's your choice let's continue okay after all those process you're gonna see this screen i already created a vps but if you didn't create you can just choose last version of ubuntu as you can see there are many options here but we are gonna be using ubuntu this version can be different after this video but make sure that it's the latest version okay and this creation takes couple minutes and after that you are gonna see this page and as you can see there's a domain here it's not important it's just random domain it doesn't mean we are gonna use this domain and here to connect your server we are gonna be using this server ip and if you want to you can use your password but there is a more secure option which is ssh key we are gonna connect with our key so how we are gonna do this let's come here is official repository of the channel you can see this branch and here i created really detailed documentation you can find everything here that you need okay let's create our ssh key if you are using macos linux or windows 10 of course if you have open ssh only thing you should write is this command let's open up our cmd or terminal in your macos just paste here your comment and i will enter you can give any name i will say just lama and as you can see it's asking any passphrase it's kinda our secret key i'm gonna write here lama again as you can see it's not appear here and after that it's ready if you go to your folder you can see your key here and this is gonna be our key let's copy this and here in our server in this area i'm gonna paste this key let's update by the way if you are using mac or linux you can just copy this command and paste and it's going to copy your ssh key and you can directly paste here ok and one other solution is using putty if you have some trouble to create your ssh key here you can download putty and pathogen i'm gonna open up k generator and here i will say generate you should mouse over this area otherwise it's not going to generate and after that as you can see this is our key if you copy this and paste here and update and after that you can write here your secret key i'll say lama and i'm gonna say my private key you can save that file anywhere and after that i'm gonna open up my putty software and here i'm going to write my ip address let's copy and paste here and everything will be the same and after that you can click ssh and alt and here you should choose your private key which you created it's here as you can see i will choose and by the way i'm just gonna increase this font size so you can see better i think i will open we are going to login as root and as you can see it asks our secret key which is lama and we are connected awesome let's see our server on the browser i will copy again and paste here and as you can see we have apache server but we are not going to use apache instead we are going to be using nginx so how i'm going to delete it let's come here and in the deleting apache server section as you can see firstly we should stop it i will copy and paste here and after that i'm gonna disable it you can directly remove this apache but i don't recommend before stopping or disabling and after that we can finally remove i'll say yes okay we deleted our apache but in any case it can be some dependencies related this apache to prevent this i will say auto remove as you can see there was no problem but just in any case and right now what i'm gonna do is cleaning my server and updating it i'll say apt and clean all and after that i'm gonna update everything i will say apt by the way we are not writing sudo or something that because we are already admin so if you are using any user you have to write sudo before every comment so i will say apt update right now we are going to install our nginx server so i will say apt install and engine x i will say yes and it's gonna install but if you come here and refresh the page we still keep seeing this page it doesn't mean we are using apache that because the main folder still has this page this html file and css files so let's check out that folder i will say cd wire and www and don't forget this folder it's gonna be our main folder that shows our htmls and css and javascript files so we are gonna upload everything inside this folder so let's see what we have i will say ls which is list as you can see we have html here if i go to html and say ls oops sorry html and ls as you can see this is the index.html which displays this page so we don't need this html file anymore let's come back and what i will do is deleting this html folder i'm gonna write remove dash rf which means delete everything inside this folder and finally i will say html after that let's write ls and as you can see it's empty perfect and if i go to the my page and refresh the page as you can see 404 not found because we don't have any index.html perfect as you remember when we create our note applications or react applications and when we start them we can see them on any port like 3000 5000 if i write here 3000 as you can see there is nothing right now so if i release my application in this page in this port number we can see them but it's not a good idea to reach any application by writing here any port it might be really dangerous so how i'm gonna prevent this i'm gonna set a firewall and i will say apt install and ufw and if i write here ufw and enable we are going to enable our firewall and it says it may disrupt your connection i will say yes it's not gonna disrupt okay we are still here and right now even if i run any application in any port i'm not able to see them right now i just want to make sure only port i should see is my http port which is 80. so how i'm gonna allow people to make only http requests to do that you can write any rules inside your firewall there is a shortcut for this i will say vfw and hello for example you can say only 80 you can say ssh which allows to ssh connections but but instead of writing them one by one there is a shortcut i will say engine x i'm full i will enter oops i have a mistake again i'll delete okay let's see again you have w and status as you can see our rules are here okay perfect as i said we can't see anything here let's create our first page i'm gonna create here new folder let's say make directory and let's say netflix and i will enter and inside this folder i'm gonna create my html file i will say no no and if you want to you can use vm also it really doesn't matter and i will say netflix folder and inside create index html and we are gonna edit this and here i will say hey this is my first page i will save and i'm gonna exit as you can see is a shortcut command or control x let's check out i will say cd netflix and ls as you can see our file is here perfect but how i'm gonna see this page let's come here our documentation i forgot here actually okay first page as you can see we have a default configuration of our nginx server if i copy this and i will say nano and open up this file and this is our default file as you can see we created a server it's listening http which is 80 and there is nothing else if you want to you can write everything inside your default file but if you are using server it's not a good idea because you are not going to create only one application maybe you are going to upload 20 30 applications and for each of them coming here and editing them is not a good idea so i'm going to delete this file we are not going to use default i will exit and i'm going to say remove this file and one more thing we don't have only sides available we also have sites enabled let's check them out i will say cd and this time it's going to be enabled and if i say list as you can see we have default here also it's exactly the same file inside your available folder when you make any changes inside your default file it's instantly updating this file also and our nginx server just looks into this default file inside sites enabled and it's gonna configure our applications so what i will do is deleting this default configuration also so i will say remove and default let's say ls okay it's empty perfect so let's create another configuration instead of default i will copy this actually from here and let's paste here and by the way as you can see it's not working like rvs code it's a little bit strange for example you can't click here to write something you have to use your keyboard like this one by one okay so let's say netflix so inside let's come here we are gonna create our server first and it's gonna listen our http it was exactly the same but there was no configuration this time we are gonna add a location if you go to the main folder which is only our ip look inside this folder remember we created netflix folder and inside index file we wrote something what i wrote i don't remember it's my first page or something like that and look inside this folder if there is index or index.html or index hdm just reflect this to our browser and there are some proxy headers i'm not gonna deep dive into everything i will just copy this and paste my new configuration okay i will save command or control s and command and control x okay perfect so inside site's available folder we have our netflix configuration but inside sites enabled we don't have anything so i'm gonna use this command it basically links every file inside this folder to this folder so when we make any changes inside netflix configuration it's gonna be automatically here we don't have to write anything so i will copy this and paste here okay so if i say list and as you can see it's here perfect so we can leave here let's say root so what i'm gonna do is testing my nginx i'll say nginx and t as you can see syntax is okay test is successful so we don't have any problem but we didn't start our nginx let's start i will say system control and start and engine x and if i say system and status let's check as you can see it's running and our nginx everything is okay and whenever you make change inside your nginx i recommend you to just reload it did i write here okay it doesn't matter we just started but after that each time we are gonna just reload our nginx i will just refresh the page as you can see our first page is here perfect so this time instead of this static file we are gonna run our node application but how i'm gonna upload my node application and react application inside my server it's really easy actually we are gonna use github and we are gonna fetch all data here but firstly we should make some changes here because we created everything for development mode we are going to deploy our applications so first thing i will do is adding here just course policy so what i mean by that i will say cd api and yarn add course so basically it's gonna allow only this ip to make some requests remember our api we were writing api and for example users and when we make this request it's gonna allow only this ip and here i will say const course and require course and here after these mongos i can use this course i'll say app and i will say course and okay for now it's enough after that we are gonna change here we are gonna write our origins our ip address or domain but it can stay like that for now that because we are going to change our domain later so that's all i think our ip okay and don't forget your emv file remember we have and secret key for our jwt it's not going to upload this emi file but just keep here after that we are going to create other emv file inside our server and we are going to copy this and paste inside our application in the server okay so what about this client and admin site firstly if you remember we were using proxy here but it's just for development mode we don't need that i'll delete and here i will come here it's not private i will say home page and it's going to be just dot it's important because if you don't use it it can be some problems inside your react router though so don't forget this okay we have emv file here remember inside we have port but also i'm gonna write my api url i will say react up and don't forget if you are using react in your emv file you have to write react app first and i will say api url for example and it's gonna be just this url because i'm gonna deploy my mod application inside this url okay so what else if you remember we are using axios and we always directly made our request according to proxy inside our package.json but this time we are not going to use any proxy that means we have to change our axios url with this api url so i will copy this and for example inside home remember we are getting movie lists and we are using our proxy but we are gonna change it so you can come here and write your process eme and url but you can do one more thing actually i should have done before but i just forgot i'm sorry let's do right now i'll say const and let's say axios instance and i'm gonna create new instance axios and create and here i'm gonna write my page url and it's gonna be process and emv file and my url okay this time instead of axios i'm gonna use my axios instance and let's copy this and do the same thing for other files we are using in register for example let's copy this and take this axios instance and paste it and for others where we need it featured movie i'll copy this again i know it's not good idea doing this right now but i'm sorry i just forgot it's it's not a big deal we don't have many components so basically you can create your axios instance and change your axios here and in our context api calls remember here we are making our login process so i will paste okay that's all so what about admin site so i will come here for the emv it's gonna be react api url and it's gonna be my address and for package.json let's come here and write home page and dot and delete our proxy here you don't have to delete but you don't need why it should stay so so far here home let's copy this it's gonna be exactly the same thing so i don't wanna waste your time so it's gonna be a little bit quick here okay everything is ready i think right now i'm gonna create my repository i already have but for you i'm gonna create new one let's go to the github and i'm gonna create new one let's say how about furry broccoli it's really cool let's copy this and paste okay and public and i'm gonna create my repository and to reach this repository we are gonna use this url so i'm gonna go to the main folder and here i'm going to say git init i'm going to initialize my github and after i'll say git add but before make sure that you edit your emv file inside the git ignore file for example here make sure that you have dot emu file here and for each application for example this is for admin this is for api and this is for client side [Music] we don't want to upload our emu file here so i will say dot and it's gonna every files every folder so finally and then i will say git commit um and just say commit by the way i just assume that you already know basic github commands i'm not going to explain everything so finally i'm going to paste my url and i'm going to push everything to this repository so i'll say git push origin master so as you can see our all files are here right now we are going to fetch its applications to our server so let's open up our terminal and here firstly i'm gonna need git so i will say apt and install and git i will say yes okay so i'm gonna create folder here make there and it's gonna be netflix make sure that you are in the root and after that let's go inside cd netflix i will come here and copy this address so i will say git clone and this address and it's going to be in this folder so it's not going to create new one i will enter okay let's see as you can see our all folders are here perfect so let's deploy our api first i'm going to open up my nginx configuration remember we are gonna use this command all the time so let's open up and this time i'm gonna create another location let's paste and here my location will be api and this time since our application just then rest api we don't have any root any index any html any css so we don't need them let's delete but this time we are gonna need our port number remember we are releasing our application port number 8800 so i will write here proxy pass and it's going to be http you can write here localhost or your server ip doesn't matter and it's gonna be 8800 okay we don't need these try files also we don't have any file let's delete okay let's try i will save and quit let's quickly check our nginx everything looks great and i'm going to reload my nginx okay it's gonna work but but we don't have anything inside port number 8800 firstly i need node.js so i will say apt install node.js and also we are going to need npm so let's say apt install mpm and by the way remember our mongodb remember it was allowed from everywhere so this time it was zero zero so everyone could reach your mongodb but this time i will just copy my ip address here and add here so instead of this server no one can reach your data perfect so let's open up our api and i will say npm install so it's going to install all dependencies because we don't have node modules so okay and remember we don't have any ema file let's open a new one i will say nano and eme my application here and inside my let's close them it's really crowded here okay i'm gonna copy this and paste here okay let's close i just saved and it's red lighting let's run our application i'm gonna say note and index.js we are not using nodeman anymore so it's working perfectly so let's open up our browser and my ip i'll open here as you can see it's our home page and if i say api okay that because i forgot this slash here it should be only my port okay let's save and i'm going to refresh my nginx again i will run my application and as you can see it works perfect if i go to the users you are not authenticated perhaps it works so if i go to the home page we can still see our homepage here but this time i'm gonna add here my client site so i can delete this page but before i wanna show you something else because if i close this ssh station here it's gonna kill this process which means we are not gonna see our applications on the browser anymore so instead of writing note index.js all the time or keep open this station we can install another package which is pm2 i will say npm and install but it's gonna be global because we can use this everywhere so it's gonna be pm2 so let's create pm2 instance to do that i will say pm2 start and we can give any name here i will say just api and it's going to be our index.js let's do this our api works if i go to browser and right here again api as you can see it worked but it's exactly the same thing how i'm gonna keep awake this operation it's really easy i'll say pm2 and startup and ubuntu if i do this it's gonna work all the time let's see pm2 and status as you can see our api works even if i close this window it's still going to work so let's deploy our react apps i will go to the client site and i'm gonna install my dependencies so i'll say npm install i will copy my emv file this is api and my client site okay i'm just gonna copy this i hope there is no mistake i will add here just slash okay let's create yummy i will say nano and dot emmy and i'm gonna paste my me here i will save and this time i'm not gonna npm start or pm to start that because we are gonna have our index html css files js files if i start this like my node application we are gonna see our application here but probably it's gonna be 15 or 20 megabytes and it's not the best practice so we are gonna create our build folder to do that i'm gonna write here npm run and build and it's going to be probably less than 1 megabyte and we are going to show this on the browser of course it's going to create this build folder inside our client but we are gonna move this to wire and www remember everything we are gonna display here should be in that folder to do that let's come here i'll get i'm sorry i didn't follow here but it's exactly the same thing pm2 startup as you can see okay and here i deleted my index.html and after deleting this index.html i'm going to create another folder which is client and i'm going to move my quilt folder inside this folder perfect let's come here i'll paste this first and create new folder and finally move everything to that client make sure that there is no slash here or we are not writing netflix client and build that because we are already inside this folder netflix and client so we can directly write here build ok let's do that i will enter so after that i'm going to add new location instead of previous one let's open our configuration where was it this one and here i'm gonna paste and instead of just netflix it's gonna be client folder ok i will save and reload my nginx let's see i hope everything is ok i will refresh and it works navs but we have problem here in our movies probably i just made some mistake i just made them quickly i didn't test anything so let's check here inside it's my list item actually axios instance oh i didn't save this as you can see there is dot here so i'm gonna copy this if you make this quickly it happens you never ever should do something like that before testing for the tutorial it can be acceptable okay so let's go to the nano and source and pages it was pages or components components i think and list item and list item jsx list okay as you can see it's not here i'm just gonna paste it and i'm gonna use this instance i will save but in this case we have to build our application again that because we made some changes i will say npm ram build and it works perfect as you can see if i go to series and movies and my watch page perfect we can see this page that because i have a user in my application section let's come here and as you can see i already saved my user here that because i tried before you if you open your application it's going to be your register page and after you can log in and see this page perfect so we can do the same thing for admin panel when we write your admin we are gonna see our dashboard application but i don't wanna waste time you understood writing instead of this we are gonna use our domain right now i already have a domain it doesn't matter which provider you are using only thing you should do is going to dns settings and here as you can see i already created for the home page you should create a record and right here add and finally value will be our server ip address how you are gonna do this you are gonna come here and choose a record add for main url and you can create any subdomain like api like admin and after that you are gonna write your ip address and you are gonna save i've already done this that because it takes 20 minutes half hour i just didn't want to waste any time so right now i can use this domains i will come here and again let's choose our nginx config here i will copy okay this time instead of writing one server and different locations i'm gonna create three different servers that's because we are not gonna use any location it's gonna be only home page for each sub domain i will copy this and i'm gonna delete like that and i'm gonna create another server by the way you don't have to create server inside this netflix file you can create another configuration and separate them but doesn't matter let's write your server and it's gonna be again listen 80 and i'm gonna paste here oops when i click this it's just copy this so i have to write this again so i'll copy here let's paste when you use remote server it's not easy to use it's not like vs code let's delete here and index and i'm gonna add here my proxy pass and http where is my ip address let's come here and copy this and it's gonna be my port okay so we don't need that okay i can close my server and i'm gonna create one more to do that i can copy this client site it's easier i think i will copy here and let's come and paste here this time it's not going to be client our route will be admin we are going to create our build folder and pass inside this folder so i will say admin so let's make sure we are writing here our domain so how i'm gonna do this it's really easy it's gonna be server underscore name and i'll write him my domain and and w version so i can copy this and for the api and this time i'm going to indicate my sub domain which is api and for the admin panel let's paste here and it's gonna be admin dot my domain okay i hope everything is okay i will just save and i'm gonna test my nginx okay something is wrong because we forgot this semicolon let's correct this again we need semicolon here and by the way you saw how important to test your nginx each time okay i will save let's test again okay perfect so i'm gonna refresh my nginx and this time i'm going to admin panel i will say cd and admin and i'm going to build my but before npm install so i'm going to install my dependencies okay it's ready so i will say npm run build by the way i forgot changing my emu file so i will say no no and dot dmv let's come here and for the admin panel yeah me i will paste here this time actually instead of this ip address i can say my domain and it's going to be api dot my domain of course api endpoint don't forget this it's really important so and i will do the same thing for client side but before let's save and run build okay it's ready i can copy my folder to main index folder so i will say copy and r is going to be my build folder and everything inside this folder var www and netflix admin let's run okay it's not a directory because we didn't create let's create i will say make there and it's gonna be my folder netflix remember we don't have any admin folder here let's create and after that i can copy okay let's go to the client side and do the same thing for emv file i will say cd and client i will say no no emv file and as you can see it's our ip address let's change this and api okay i will save and quit i have to run and build npm run build okay i can copy my folder i will come here right now it's going to be client and finally i'm going to reload my nginx and we are gonna see i hope everything is okay let's come here and write my domain here okay client site works but let's check our admin panel by the way now okay it works i'm going to movies every movies are here lists okay it works so there is something wrong with my client site let's check this out i will open my console maybe it's about my user let's delete this and i'm gonna refresh [Music] i will check whether it is login process works or not i will write my email and password let's check okay okay guys i just make selling mistake there was not.com here so i corrected and after i just built my application again and copy everything to my main folder and reload my nginx and it works perfectly right now as you can see series movies and any movie here as you can see awesome so what i'm gonna do is creating https so it's gonna be secure connection let's come here it's the ending as you can see there is a pretty certification so i will copy this and paste here yes and after that we are going to check our status we have actually done that but in any case and after that we are going to apply this https certification to our main domain our subdomains api and admin let's do that i will paste and as you can see our engine x full rules and after that let's copy just here and it's going to be my domains and the api dot and finally the and admin dot safari dot com i hope i didn't make any slim mistake again and so i will answer so it asks some email address let's write here address okay i agree are you willing to share your email address of course not and it's going to apply all certification for each domain and after that it asks if you want to redirect all requests to https or not so it's gonna be yes which is two and it's ready and as you can see it's gonna expire less than one month so after one month you should come here and renew it but if you don't wanna do this you can set just a timer and it's going to automatically renew your certification so i will paste here and run this sideboard twice daily okay perfect okay and let's reload our nginx and let's check i will refresh and right now as you can see is secure of course we can see them that because our api address is http we are going to change it but for others let's try for api as you can see it works and for admin and it's secure right now okay guys i changed my emv file as you can see it's https right now and it works perfectly and our connection is secure so it might look a little bit confusing but if you check the instruction here and follow the video you are gonna see how easy it is by the way you might have some errors because your application and mine is not the same but it's totally normal because deployment is another word you cannot make sure whether it's gonna work or not unfortunately it's like this but if you understood how nginx works and how you can upload your folders it's totally enough i think you're gonna figure out the rest and don't forget to check out hostinger deals if this prize is for you you should definitely check this out and don't forget to use lama dev code you're gonna get discount and that's all i think in the next tutorial we are gonna deploy our applications but this time it's gonna be in heroku or netlify this kind of free options so i hope you liked the video if you learned something new today please like the video and write some comments and don't forget to follow lama dev social media accounts you can ask your questions get inspiration from other users it can be really useful for you so i hope i will see you in the next lesson goodbye

Channel: Lama Dev

Views: 29,507

Keywords: deploy, deployment, vps, vps deploy, react deployment, node deployment, node js deployment, mern deployment, full stack deployment, ubuntu vps deployment, deploy app, deploy node app, deploy react app, deploy react, deploy node, nginx, vps nginx, react nginx, node nginx, nginx configuration, mern nginx, mern app deploy, pm2, ssl, node ssl, react ssl, ssl sertification, nginx ssl, let's encrypt, how to deploy, hostinger, digital ocean, hosting, lamadev, putty, ssh, vps ssh

Id: Nxw2j1-srVc

Length: 52min 4sec (3124 seconds)

Published: Fri Jul 23 2021

Reddit Comments

[u/nesikim]

Full documentation: https://github.com/safak/youtube/tree/mern-deployment