How to deploy React app on remote Linux server using NGINX in Linode
Tags: react, linux, nginx, linode
Published: 2022-06-29 10:57:42

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](https://www.linode.com/)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcpq8mf0dwezja4sx8yy.jpeg)

---

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95omhsy8bh8syowy0dcz.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzhgzlzw4db41rqwg1x2.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba52ibw6i3nkwe8psayb.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fdvms5i4lcksqyk76id.png)

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 `logout `in 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 😊.