React/Node App Deployment on Digital Ocean Cloud using GitHub
Introduction:
Running Node or Reach apps is an easy task but deploying them over a cloud and bringing your website online is something that all developers should be familiar with.
Pre-requisites:
Set up a GitHub repository and the code(react/node or both pushed on GitHub).
Purchasing a digital ocean server. Use the below URL if you decide to purchase the Digital Ocean Server.
If you are all set with the prerequisites, let's begin..
Log in to your Digital Ocean Server.
Press on New project on the left side of the dashboard
Fill up the form and press on create project button.
Creating a Droplet:
Click on Create Button on the dashboard and select the Droplets tab.
Now select any one distribution over which you are going to set up your app.
Next, choose a plan that suits your needs.
Choose a region that is closest to your location.
Checkmark on Monitoring
Next, select the SSH key in authentication and follow the instructions given to generate the public and private keys. Also, add your public SSH key in the submit section.
Next, give a hostname to your app. If you want, you can setup multiple droplets with the same configurations at the same time by increasing the droplets from the option given below.
Next, select your project and press on create droplet button.
Now when you return to your project tab, you will see that the app is being deployed which takes around 1 to 2 minutes.
After the app is deployed, you receive an IP Address that will be used as the main IP for accessing any website that is set up inside the droplet.
Next, we need to add our private key in order to access the droplet from our machine. For that open git bash root location, for my case it was:
cd path-to-Git/bin (for me : cd C:\Program Files\Git\bin)
Run bash.exe as an admin
Execute the following command:
exec ssh-agent bash
ssh-add Path_To_PrivateKey_Directory/Your_Private_Key_NAME
Use the next command to always log in to the server
ssh root@IP_ADDRESS
Type the following next 3 commands[1st time]
apt-get update
apt install nginx
apt install npm
Now your basic web page is set up and served on your IP Address
Copy Paste your IP address in the browser to visit the default website.
Next, use the command
mkdir apps
cd apps
Now we will clone the GitHub app on our server
git clone repourl
ls
cd folderName
To install all dependencies type the following command:
npm install — save
Now to run our app in the background, we will install a couple of more dependencies:
npm install -g pm2
Npm install -g serve
Finally, in the case of React:
Npm run build
pm2 serve build 3000 — spa
In the case of node.js just type
pm2 start app.js
This will ensure that the app that you have deployed is running on the server.
Now, Visit the IP Address followed by the port that you have mentioned. In this case port 3000.
And there you go, you have set up your very own React/Nodejs project on the server.
Resources:
Get your hosting at Digital Ocean:
Recommended video for the same tutorial:
