How To Deploy MERN ECommerce On Ubuntu Using Hostinger VPS

hello and welcome to my coding tutorial to build and deploy my main e-commerce website amazona on Linux Ubuntu operating system using hassinger VPS server in this tutorial we will learn how to buy and configure VPS and domain on hosinger clone my main amazona project from GitHub connected to the hostinger Linux server build and deploy automatically applications on every git push and at the end I teach you how to encrypt the website using let's encrypt SSL certificate let us start by buying hostinger VPS and domain first of all I'm going to thank hostinger for sponsoring this video I already used their service for hosting my website and web applications like coding with baser DOT com hostinger provides premium hosting features for Less multilingual customer support extremely fast servers 30-day Money Packs guarantee and provides data center in 10 countries worldwide web before going for VPS server I would like to mention the hot singer premium shared hosting plan it's Black Friday and you can claim the deal by going to hustinger.com and click on this link it offers affordable shared hosting plan for website optimized for WordPress especially and you can get a free domain with this package great let's go for the VPS server that we are going to use in this tutorial in the hostinger.com click on VPS select VPS hosting scroll down and select the most popular one click on select I suggest choosing the 48 months plan as it will save the biggest amount for you and to get more discount just a scroll down and here click on have a coupon code and enter coding with Basir to get additional 10 percent off on top of their ongoing offers click on apply and there we are coupon applied what you need to do is to create your account or you can click on Google or Facebook to log into the hostinger then enter your credit card data or if you prefer you can pay with other payments gateways then submit secure payments after finishing payment go to hpanel.hostinger.com and here you will have all products that you have bought from hostinger click on VPS in the VPS section select vps2 it needs pending data entry click here there we are we have a set of wizard let's click on start now here you need to select the location of your VPS server select the one that is near to you I select the default one continue in this step we need to select the operating system we're gonna use only plane OS instead of OSF control panel because we're gonna host only one domain click on select and here we are going to use Ubuntu but I'm gonna use the latest one so click I want to choose a different operating system and here we have list of all operating system select Ubuntu 20 point 0 4 and kilicon select continue and here it's time to enter the hostname I'm going to set it to amazona dot name for the password the root password set something secure and this part is very important because based on SSH key we are going to connect to the Linux server what we need to do is to set a name like my computer and the SSH key it's the public SSH key that you have in your dot SSH folder open your Explorer or finder go to your folder find dot SSH you need to make Hidden file visible to find dot SSH folder and open ID underline RS a DOT pop awesome you will have a file like this with this content and copy the all content select control press Ctrl a Ctrl C and go back to hpanel and paste it right here like this kill you can save and continue ah it says the password should contains more field let's select secure password and click on Save and continue you will get the confirmation click on finish setup it takes a while to create your server about 10 minutes and after that you will have your server and there we are we have our VPS with VPS plan 2 in the VPS section great let's go for buying domains click on domains click on get a new domain and here enter the domain name that you want to buy man e-commerce app is the domain that I am going to buy and killicon search the domain is available click on buy now select the billing period and click on complete payment after buying the domain click on domain here and there we are we have the domain in the domain list in this step we need to go to The Domain click on the domain and configure the domain name server click on DNS scroll down and add four records the first record is of type A the name is at sign and it should point to your IP in the VPS so open VPS in a new tab and click on your VPS that you bought find the IP address copy that and go back to the domain paste it here and click on ADD record by clicking on ADD record you will have a record like this but the IP address is different based on your VPS IP do the same for www select a instead of at sign enter www enter your VPS IP address and click at add so here is the second record that will be added to the DNS list the third one is AAA record it's for IP address of version 6. so you can go to the VPS click on VPS access find IPv6 and copy that record then go back here paste it in the point 2 and click on ADD by clicking on ADD record you will have a record like this but the IP address is different based on your VPS do the same for www instead of at sign enter www and the point 2 is the same click on ADD record at the end inside the manage DNS records you will have one two three four records with this data so what we did here is to connect our domain to the VPS server awesome we are ready to go for configuring the VPS server after creating the server in the other view of the VPS go to VPS access and find the terminal here we are going to create an SSH tunnel to the server copy this command and open your vs code from terminal menu select new terminal go to your desktop folder create a folder for your host singer I'm going to set it to amazona Dash hostinger and go to that folder then open it in the vs code Type code and put dot it opens a new window let's close the previous one and go to this window here we are in the Amazon hostinger folder inside a desktop then open Terminal in the new window and paste the command from each panel press enter at the beginning we will get this question are you sure you want to continue connecting and type yes and there we are we are on the amazona server on hostinger let's clear the terminal and start configuring DPS server for launching amazona website the first command is updating the Ubuntu next one is installing get using SoDo apt install git press enter to confirm installation the next step is installing node for node we're going to use this command C URL Dash SL and this address we're going to install it from the notesource.com and the version that we are going to install is version 16. in the next command run the node Source setup by running this command the PPA will be added to the cache and you can install it using this command so the APT install node.js it's going to install the latest version of node.js in the Ubuntu server let's check the result the node version is 16 and check npm version it's [Music] 8.19.2 clear the terminal and let's go for creating folder for the amazona project the first folder that we are going to create is apps amazona repo created it's going to contains the repository the git repository for us the second folder is apps slash Amazon or slash dist it's going to get the destination the production version of the project for us then go to the repository folder inside this folder create a git repository but use dash dash bear to make it as a central git repository for us then open post receive in the hooks folder in this project then you have a change in the git repository and push it to This Server the commands in this file will be wrong here is the command first of all put this message in the log post receive triggered then go to the test folder and Put Another Log message and check out the git repository using this command so what we do in this line is to get the latest changes in the repo and put them inside the desk folder and we are ready to run npm install all packages and run npm build after that run forever restart Amazon forever is a package that we are going to install later and what it does is to keep our amazona process running forever for us press Ctrl X press Y and press enter to save this file after that we need to change the permission of this file change it to ug plus X by setting this permission operating system could able to run this file great let's go for the next step in the next step we need to create a mongodb atlas database go to this address mongodb.com database and click on try free here you can click on sign up with Google and then select your Google account automatically you will be redirected to this page what you need to do is to just create a Sandbox cluster and after creating the cluster it's time to create a new database to do that click on browse collections click on create database and enter the database name amazona hostinger set test as a collection name and click on create then go to the database access click on add new database user select the authentication method to password the username is Amazon or Dash host singer and the password said something I'm going to set it to Amazon or has singer for the password but you need to make it something secret scroll down click add building roles in the built-in rule select read and write to any database scroll down and click on add user Next Step go to the network access click add IP address and make sure that in the H panel in hostinger you copy the IP address and put it inside the IP address list here my astinger server click on convert for testing from your local computer you can add this address to 0.0.0.0.0.0.0 great let's go for getting the connection string click on the database select connect select connect your application and copy this connection string based on the comment here we need to replace password with the password and username with the username let's do that close in the vs code I just click on new file a text file and paste the connection string replace username with a mess or not dash hostinger for password I used the same as the username and right after mongodb.net slash put the database name it's Amazon hostinger so it's gonna be the connection a string keep it in somewhere secret because we need it in the next step in the next step type CD dot dot slash dist so what we did is to go from the repository folder to the destination folder and type in Nano dot EnV to create a environment variable file inside that type DB underline URI equal to copy this connection string and paste it right here also set the port number I'm going to use port number 5000 for the node application press command X and type Y and press enter let's go for the next step we're gonna config the Apache Apache will need to be configured as a reverse proxy server therefore we need to run this command to enable the necessary modules so use Soto A2 en mode and install proxy proxy HTTP rewrite headers and expires great they are activated based on the recommendation we need to restart the Apache but there is no need to do it right now let's go for the next step we need to create an Apache virtual host file use this command SoDo Nano slash Etc Apache to sites Dash available and then enter the name of your domain and put dot config at the end of it here my domain name is mer dash amazona dash app.com so you need to enter your domain here press enter and in the configuration file let's make it a bit bigger and use this configuration set the server name to your domain server Alias to www dot your domain set proxy request off proxy preserve house to on and proxy VR4 and in the proxy section use this setting require all and granted and the last two settings are proxy pass and proxy pass reverse what we did is to use port 5000 for our server press command X yes and press enter the next step is enabling the new site and disabling the default Apache site what we need to do is to disable the default site using this command then enabling the new domain configuration by this command and at the end restart the Apache server using Soto system control restart Apache 2. great the next step is using let's encrypt to enable free SSS service to obtain a SSL certificate for our website start by installing the necessary Search bot packages with the following command so what I did is to installing third part Python 3 searchbot Dash Apache type Y and press enter the next command is executing the following command to obtain an SSL certificate here is the comment your sudo searchbot D enter your domain name Dash D enter your domain name with www dot and make it for Apache using this setting aggregate TOs and dash M enter your email and no eff email and dash dash redirect press enter to obtaining and configuring the certificate great you successfully created the certificate you should get this message and to make sure that Search bot will Auto renew certificate successfully use the following command to perform a draw run here is the command search path renew dry run the next step is installing forever npm install forever and use Dash G to make it as gullible node package after installing forever we need to run this command forever start dash dash the uid is Amazon and the source directory is the destination folder and inside this folder run backend slash server.js if you you press enter you will get this error it says script and this address does not found that's not an issue because after pushing the code it's going to create this file for us in the test folder good we are done with the server side keep this terminal open and click on plus to create a new terminal VR in the Amazon attached hostinger and it's time to get the project source code from GitHub using this command git clone at sign github.com enter to download the source code in the Amazon hostinger folder inside desktop if you type LS you can see that we have Merin Amazon and if you click here in the Explorer you will get the mer Dash amazona after cloning the mirror Amazon go to that folder see the Merit Amazon and run this command to add hostinger server as a repository replace the VPS underlying IP with the IP that you have in the hostinger control panel copy paste it here and press enter the next step is having a change in the source code just click here find mered Amazon uh find readme and just put a change in the readme file and then run these commands git add dot then git commit with a message and get push to hostinger press enter and there we are you just install packages or run build on the remote server then it runs the reactive script build to create a front-end project for us and at the end we get this error it says error the starting process amazona because it cannot find the process amazona it's time to go to the previous terminal inside the server and run forever start amazona again this time you can find the backend server.js if we Type 4 ever a list you can find the Amazon process here great it's time to test the result open your domain in the browser as you see I can find the amazona and the website but there is no data to get the data put slash API slash C and press enter to feed sample data click back and refresh awesome I'm getting my Marin amazona project running on the hostinger with https enabled let's check the website select a product add it to the cart proceed to the checkout create a new account and sign up it says secret or private key must have a value to fix this issue just go to the terminal and open Dot EnV file after port enter JWT underline secret to something secret make it something different and save it we need to restart forever restart amazona to apply the changes and if we click on sign up we are getting another error it says duplicate key error for this email let's change the email and click on sign up awesome we just logged in and I can enter the address continue PayPal continue and place order as you see we successfully deployed the website on This Server that's it about this tutorial until next tutorial bye

Channel: Coding with Basir

Views: 33,131

Keywords: codingwithbasir, coding, programming, tutorial, amazona, html, css, javascript, react, redux, node, express, mongodb

Id: ZKaWTK91ECQ

Length: 26min 49sec (1609 seconds)

Published: Wed Nov 09 2022