How to deploy React app on remote Linux server using NGINX in Linode

Before deploying our React application, Let's know what Linode is.
Linode products, services, and people enable developers and businesses to build, deploy, and scale applications more easily and cost-effectively in the cloud.
Check out their Website Linode

Now let's get started. The first thing you need to do is to Register yourself on the Linode website, which is a simple process. After filling up the required information, it will take some time for you to access your Linode dashboard

Setting up Linux Server

1) Click on Create Linode, proceed to choose Distribution and Location of your remote Linux server. I have chosen Debian 11(Latest) and Mumbai(nearest).

2) After that Chose the Linode plan. Just for the testing purpose I'm choosing the cheapest plan there is i.e. Shared GPU Nanode 1GB, You should choose a Dedicated GPU with higher RAM and CPU if you want to deploy your application in Production for optimized speed and performance.

3) Give your Linode a nice name in Label and choose a secure root password. Don't forget this password we are going to use it later on.

4) Once that is done, Click on Create Linode. It will take some time, when it's running you'll see this page.

5) Now copy the SSH Access which looks like this ssh root@194.195.112.114 and then open a bash terminal in your local system.

6) Copy the SSH Access in your terminal and press Enter, type Yes on next prompt and then enter your root password that we created in the start.

7) Next thing we want to do is to make our server more secure by updating it so type these commands in your terminal next

$apt update
$apt upgrade

8) We also need to configure time zone manually to prevent any issues with our server. Write this in your terminal. It will open a GUI in which select the city nearest to you.

$dpkg-reconfigure tzdata - set timezone

9) Now we are going to add ourself as an admin and disable the default root user. for this type in terminal and after that create a new password. It will ask for some basic details next but it's optional except name.

$adduser <username>

10) Let's add this new user to Admin group next.

$adduser <username> sudo

11) To check if creating new admin was successful or not, Type logoutin terminal and use SSH Access with new username. This will log in your new admin id.

$ssh <username>@194.195.112.114

12) Next we need to disable the root user for security purpose. for that write these. Now you won't be able to login using root SSH.

$sudo passwd -d root
$sudo passwd -l root

13) Now that our server is secured, Time to install NGINX in the server.

$sudo apt install nginx

14) We now need to make a directory in our server where our code will be stored.
The name of the folder can be the domain name if you have already purchased any, or the public IP address of our server. We will use IP address for testing purpose here. We also need to setup few permissions for this directory so type the following commands in your terminal.

$sudo mkdir /var/www/194.195.112.114
$sudo chmod 755 -R /var/www/194.195.112.114
$sudo chown -R <username>:www-data /var/www/194.195.112.114

15) Another thing we need is to create configuration file for NGINX. It will open a writable window.

$sudo nano /etc/nginx/sites-available/194.195.112.114

After that write this, then press ctrl+s and exit.

server{
  listen 80;
  listen [::]:80;

  root /var/www/194.195.112.114;
  index index.html;
}

16) Let's make this default config for our directory

$sudo unlink /etc/nginx/sites-enabled/default
$sudo ln -s /etc/nginx/sites-available/194.195.112.114 /etc/nginx/sites-enabled/

Let's test if that worked

$sudo nginx -t

You should see test is successful dialog. After that we need to restart the NGINX

$sudo systemctl restart nginx

Congratulations 🎉, we are done with setting up our server and directory. We now just need to push our react code into the server. Let's keep going.

Setting up React and writing deployment script

1) Create a fresh react app using command npx create-react-app <project-name>

2) Now in root folder make a new file deploy.sh, and write these commands in there.

echo "Switching to branch master"
git checkout master

echo "Building app... (Can also use npm instead of yarn)"
yarn run build

echo "Deploying files to server..."
scp -r build/* <username>@192.46.214.84:/var/www/194.195.112.114

echo "Done!"

3) Write this command in your root directory to make deploy.sh executable

$chmod u+x deploy.sh

4) Now that deploy.sh is executable, write this command to deploy it. After a prompt to enter admin password the React app will be deployed.

$./deploy.sh

🥳 Congratulations, Your React app now is live at the Public IP Address which was 194.195.112.114 in this tutorial.
You can paste this directly into your browser to view the page online.

I hope it was helpful for those who were looking for this particularly.
Alternatively you could have also used other services for react app hosting like Netlify, Firebase, GitHub pages etc.

Please do tell what are your preferences in hosting your web application.
Thank you. Have a nice day 😊.