DEV Community

Cover image for How to deploy React app on remote Linux server using NGINX in Linode
Arun Shekhar
Arun Shekhar

Posted on

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

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).

Create Linode

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.

Linode plans

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.

Name and password

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

Running Linode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

$adduser <username> sudo
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

$sudo apt install nginx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

Let's test if that worked

$sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

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

$sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

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!"
Enter fullscreen mode Exit fullscreen mode

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

$chmod u+x deploy.sh
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

🥳 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 😊.

Top comments (1)

Collapse
 
matija2209 profile image
matija2209

That was very helpful. Thanks!